HTMLにはいくつかの種類が存在し、それぞれに記述ルールが決まっています。HTML文章を作る際にはどの記述ルールに従っているかを明記する必要があります。以下ではHTML4.01について解説しています。
HTML4.01の記述ルールブラウザがHTML文章を表示するときに、HTML文章がどのような文法に従って書かれているかを判断することができるように使用したHTMLの種類を明記します。HTML4.01では以下の三種類に分類されます。
| Strict | 「使用しないほうがよい」とされた要素や属性、フレームを使用していない |
|---|---|
| Transitional | 「使用しないほうがよい」とされた要素や属性を使用しているが、フレームを使用していない |
| Frameset | 「使用しないほうがよい」とされた要素や属性、フレームを使用している |
| applet, isindex, basefont, menu, center, s, dir, strike, font, u |
| 属性 | ※関連する要素 |
|---|---|
| align | caption, applet, iframe, img, input, object, legend, table, hr, div, h1-h6, p, body |
| alink | body |
| background | body |
| bgcolor | table, tr, td, th, body |
| border | img, object |
| clear | br |
| compact | dir, dl, menu, ol, ul |
| height | td, th, applet |
| hspace | img, object, applet |
| language | script |
| link | body |
| noshade | hr |
| nowrap | td, th |
| size | hr |
| start | ol |
| text | body |
| type | li, ol, ul |
| value | li |
| version | html |
| vlink | body |
| vspace | img, object, applet |
| width | hr, tr, th, applet, pre |
* ※captionは「属性」alignの「関連する要素」として記述されているため、HTML文章を記述する際にはcaptionにalignを使用するのは非推奨です。また、inputでもtype, valueを指定できますが、「関連する要素」に記述されていないので、非推奨ではありません。
HTMLの種類を定義するには先頭にDOCTYPEを記述する必要があります。記述の方法は以下のようになります。
| HTMLの種類 | DOCTYPEの記述 |
|---|---|
| Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| Frameset | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
推奨されない記述方法と推奨される記述方法で、ブラウザ上では同じように表示されるページを製作し、違いを比較してみます。
製作するページ今回は以下のようなページをStrictで推奨される記述方法で製作します。
まず、同じようなページを推奨されない方法で記述した場合のソースを見てみます。レイアウトが<table>で行われており、<font>やalignが使われています。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<title>サンプルページ</title>
</head>
<body>
<table width="100%">
<tr>
<td bgcolor="blue" colspan="2">
<font size="6" color="white">株式会社三浦コンピューター</font>
</td>
</tr>
<tr>
<td width="70px;" valign="top"><a href="">TOP</a><br><br><a href="">挨拶</a><br><br><a href="">会社概要</a></td>
<td>
<font size="6">MCLページにようこそ</font>
<table>
<tr>
<td> </td>
<td>
<table>
<tr>
<td colspan="2"><font size="5">特徴</font></td>
</tr>
<tr>
<td rowspan="3"> </td>
<td>・お客様のニーズを把握し、最大限のサービスを提供できるようにするため、改善と提案を行い、<font color="red"><b>お客様の期待を超える</b></font>ことができるよう心がけております。</td>
</tr>
<tr>
<td>・お客様の要望に対して十分なヒヤリングを行い、<font color="red"><b>最適なミドルウェアの選択や技術知識を活用する</b></font>ことにより状況に応じたシステム構築を心がけております。</td>
</tr>
<tr>
<td>・<font color="red"><b>仕様書にはあまり表現されない処理速度や安定稼動について考慮した開発</b></font>を行い、さらに、システム稼動後のセキュリティも意識するよう心がけております。</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td colspan="2"><font size="5">募集要項</font></td>
</tr>
<tr>
<td rowspan="2"> </td>
<td>当社はまだまだ小規模なソフトウェアハウスではありますが、今後の業務拡大に伴い、幅広い人材募集を行っております。</td>
</tr>
<tr>
<td>優秀な人材のご応募をお待ちしております。ご応募・お問い合わせは<a href="">こちら</a>からメールしてください。</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td colspan="2"><font size="5">開発業務実績</font></td>
</tr>
<tr>
<td> </td>
<td>
<table border>
<tr>
<th>No</th>
<th>システム名</th>
<th>上段：開発環境<br>下段：技術要素</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">座席管理</td>
<td>Windows, Oracle</td>
</tr>
<tr>
<td>Java, HTML, VC++, JSP, Struts, Tomcat, XSLT, FOP</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2">図書館管理</td>
<td>Windows</td>
</tr>
<tr>
<td>VB, VBA</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="right"><i>Copyright (C) MCL. ALL RIGHTS RESERVED</i></td>
</tr>
</table>
</body>
</html>
次に推奨される記述方法で製作したページのソースです。ページのデザインに関係する要素、属性をスタイルシート内で置き換えて利用しています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプルページ</title>
<style type="text/css">
<!--
div.title {
background-color: blue;
clear: both;
color: white;
font-size: 1.5em;
padding: 8px;
margin-bottom: 10px;
}
div.menu {
clear: both;
float: left;
width: 10%;
border-top: solid 1px;
}
div.contents {
border-left: solid 1px;
border-top: solid 1px;
float: left;
width: 89%;
padding-bottom:20px;
}
div.contents div { margin-left: 20px; }
div.contents p {
text-indent: 1em;
margin-top: 0px;
margin-bottom: 0px;
}
div.contents table { border: solid 1px; border-collapse: collapse; }
div.contents td, th { border: solid 1px; padding: 4px; }
div.footer { border-top: solid 1px; clear: both; }
address { text-align: right; }
span.strong { color: red; font-weight: bold; }
-->
</style>
</head>
<body>
<div class="title">株式会社三浦コンピューター</div>
<div class="menu">
<p><a href="">TOP</a></p>
<p><a href="">挨拶</a></p>
<p><a href="">会社概要</a></p>
</div>
<div class="contents">
<h1>MCLページにようこそ</h1>
<div>
<h2>特徴</h2>
<div>
<ul>
<li>お客様のニーズを把握し、最大限のサービスを提供できるようにするため、改善と提案を行い、<span class="strong">お客様の期待を超えること</span>ができるよう心がけております。</li>
<li>お客様の要望に対して十分なヒヤリングを行い、<span class="strong">最適なミドルウェアの選択や技術知識を活用する</span>ことにより状況に応じたシステム構築を心がけております。</li>
<li><span class="strong">仕様書にはあまり表現されない処理速度や安定稼動について考慮した開発</span>を行い、さらに、システム稼動後のセキュリティも意識するよう心がけております。</li>
</ul>
</div>
<h2>募集要項</h2>
<div>
<p>当社はまだまだ小規模なソフトウェアハウスではありますが、今後の業務拡大に伴い、幅広い人材募集を行っております。</p>
<p>優秀な人材のご応募をお待ちしております。ご応募・お問い合わせは<a href="">こちら</a>からメールしてください。</p>
</div>
<h2>開発業務実績</h2>
<div>
<table>
<tr>
<th>No</th>
<th>システム名</th>
<th>上段：開発環境<br>下段：技術要素</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">座席管理</td>
<td>Windows, Oracle</td>
</tr>
<tr>
<td>Java, HTML, VC++, JSP, Struts, Tomcat, XSLT, FOP</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2">図書館管理</td>
<td>Windows</td>
</tr>
<tr>
<td>VB, VBA</td>
</tr>
</table>
</div>
</div>
</div>
<div class="footer">
<address>Copyright (C) MCL. ALL RIGHTS RESERVED</address>
</div>
</body>
</html>
実際にHTML文章を作ってみます。HTML文章は<head>と<body>で構成されています。
HTML文章の情報を明記する(head)ソースの<head>部分には表示しているHTML文章の情報を記述することができます。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> 1
<meta http-equiv="Content-Style-Type" content="text/css"> 2
<title>サンプルページ</title> 3
<style type="text/css"> 4
<!--
・・・省略・・・
-->
</style>
</head>
- HTML文章で使用している文字コード
- HTML文章で使用しているスタイルシート言語
- HTML文章のタイトル
- スタイルシートの内容
* <style>の設定を<!-- -->でコメントしているのは、スタイルシートに対応していない古いブラウザが記述した設定を画面に表示してしまうのを防ぐためです。
<body>には、実際にブラウザに表示される文書の本体を記述します。まずは製作するHTML文章の構成を明確にしていきます。
| 要素 | 役割 | 使用例 | 表示例 |
|---|---|---|---|
| h1~h6 | HTML文章の見出しを作るときに利用します。 <h1>から<h6>の6段階で見出しを設定できます。 |
|
MCLページにようこそ 特徴 ・・・省略・・・募集要項 ・・・省略・・・ |
| div | ページ内のグループを明確にするために利用します。 |
|
株式会社三浦コンピューター ・・・省略・・・ MCLページにようこそ 特徴 ・・・省略・・・ |
| p | グループ内のテキストを段落ごとに区切るときに利用します。 |
|
募集要項 当社は・・・省略・・・ 優秀な・・・省略・・・ |
| 要素 | 役割 | 使用例 | 表示例 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ul,ol,li | <ul>と<li>を利用することでページ内で箇条書きのコンテンツを作成できます。 <ul>の代わりに<ol>を使用すると画面上では番号つきで表示されます。 |
|
|
|||||||||||
| table | ページ内で表を使いたいときに<table>を利用します。 <table>を利用してページのレイアウトを行ってはいけません。 |
|
|
|||||||||||
| span | <span>はそれ自身は特に意味を持っていませんが、<span>で囲んだ部分にスタイルシートを適用するのに利用します。 |
|
提案を行い、お客様の期待を超えることができるよう | |||||||||||
| address | HTML文章内に著作者の情報等を記述したい時は<address>を利用します。 |
|
Copyright (C) MCL. ALL RIGHTS RESERVED |
レイアウトを行なう際に注意したいのがブロックレベル要素、インライン要素についてです。まず、２つの要素の違いについて解説し、その上で要素を左右いずれかに寄せるためのfloatと、ページ内で余白を作るときに利用するmargin,paddingについて解説していきます。
ブロックレベル要素、インライン要素要素はブロックレベル要素と、インライン要素に分けられます。
ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。
| <address>, <blockquote>, <center>, <div>, <dl>, <fieldset>, <form>, <h1>-<h6>, <hr>, <noframes>, <noscript>, <ol>, <p>, <pre>, <table>, <ul> |
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。
| <a>, <abbr>, <acronym>, <b>, <basefont>, <bdo>, <big>, <br>, <cite>, <code>, <dfn>, <em>, <font>, <i>, <img>, <input>, <kbd>, <label>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <textarea>, <tt>, <u>, <var> |
インライン要素には幅(width)や高さ(height)を指定できる要素(例.img)、できない要素(例.span)があります。詳しくは以下のサイトを参考にしてみてください。
<img src="strict02.jpg">
お客様のニーズを把握し、最大限のサービスを提供できるようにするため、改善と提案を行い、お客様の期待を超えることができるよう心がけております。
お客様のニーズを把握し、最大限のサービスを提供できるようにするため、改善と提案を行い、お客様の期待を超えることができるよう心がけております。ここでimg要素にfloatプロパティを設定してみます。
<img style="float: left;" src="strict02.jpg">
お客様のニーズを把握し、最大限のサービスを提供できるようにするため、改善と提案を行い、お客様の期待を超えることができるよう心がけております。
お客様のニーズを把握し、最大限のサービスを提供できるようにするため、改善と提案を行い、お客様の期待を超えることができるよう心がけております。
floatプロパティを設定すると設定した要素に続くすべての要素が回り込んでしまうため、解除する必要があります。
<img src="strict02.jpg">
<p>テキスト1</p>
<p>テキスト2</p>
テキスト1
テキスト2
テキスト1を画像の横に配置させるため、img要素にfloatプロパティを設定します。
<img style="float: left;" src="strict02.jpg">
<p>テキスト1</p>
<p>テキスト2</p>
テキスト1
テキスト2
テキスト1以降の要素のfloat: leftを解除します。floatプロパティを解除する時にはclearプロパティを利用します。
<img style="float: left;" src="strict02.jpg">
<p>テキスト1</p>
<p style="clear: left;">テキスト2</p>
テキスト1
テキスト2
* clearに設定できる値はleft,right以外にboth,noneがあり、bothはfloat: left, float: rightの両方を解除できる。noneは回り込みを解除しないので、変化がありません。
marginとpaddingはページ内で余白を入れたいときに利用します。marginは要素の外側、paddingは要素の内側の余白を入れるために利用されます。
以下のソースを記述してみます。
zzz<div style="height: 5em; margin-top: 1em; padding-top: 2em; border: solid 1px; ">abc</div>yyy
zzzabcyyy
スタイルシートはページのデザインを設定するためのものなので、当然、スタイルシートを利用することでページ内の要素の色やテキストの配置も設定できます。
address {
background-color: blue;
color: white;
text-align: right;
}
アドレス
ブロックレベル要素は自動で改行を行ってしまうため、要素の左右に文章等を配置することができません。
AAA<table border>
<tr>
<td>BBB</td>
</tr>
</table>
AAA
BBB
tableはブロックレベル要素のため、自動的に改行されてしまいますが、tableに対してstyle="display: inline"と設定することでtableをインライン要素として扱うことができます。
AAA<table border style="display: inline">
<tr>
<td>BBB</td>
</tr>
</table>
AAA
BBB
インライン要素は自動で改行を行わないので。AAAとtableが並んで表示されます。また、インライン要素に対してstyle="display: block"と設定することでインライン要素をブロックレベル要素として扱うこともできます。
floatを利用してmenuとcontentsを横に並べて表示する際に、menuのみにfloatを設定した場合とmenu, contents両方にfloatを設定した場合の表示の違いを確認します。menu, contentsの範囲を明確にするため両方の要素に背景色を設定しています。また、下記のソースには必要最低限のソースのみ記述されています。
div.menu {
float: left;
background-color: lime;
}
div.contents {
background-color: aqua;
}
上記のソースでは二つのdivを並べるためにmenuのみに「float: left;」を設定していますが、表示するとcontents内の要素がmenuの下側に回りこんでしまいます。このような場合contentsにも「float: left;」を指定することで回り込みを行わずにmenuの右側に並べて表示することができます。
div.menu {
float: left;
background-color: lime;
}
div.contents {
float: left;
background-color: aqua;
}
menuとcontentsにはそれぞれ「width: 10%;」、「width: 89%;」が設定されています。widthに設定された値の合計を100%にしていない原因を解説していきます。
div.menu {
float: left;
width: 10%;
background-color: lime;
}
div.contents {
float: left;
border-left: solid 1px;
width: 90%;
background-color: aqua;
}
上記のソースでは二つのdivを並べるためにmenuのみに「float: left;」を設定していますが、表示するとcontents内の要素がmenuの下側に回りこんでしまいます。このような場合contentsにも「float: left;」を指定することで回り込みを行わずにmenuの右側に並べて表示することができます。
div.menu {
float: left;
width: 10%;
background-color: lime;
}
div.contents {
float: left;
width: 89%;
border-left: solid 1px;
background-color: aqua;
}
スタイルシートのborder設定を利用して、見出しにマークをつけることができます。
h2 {
border-left: solid 1.2em blue;
border-bottom: solid 4px blue;
padding-left: 0.3em;
}
以下のコードで簡単なtooltipが実現できます(IE6ではこれが必要? a:hover{background: white; text-decoration: none;})。
<style type="text/css">
a.tooltip span {
display: none;
padding: 2px;
margin-left: 0.5em;
}
a.tooltip:hover span{
display:inline;
position:absolute;
border:1px solid gray;
background: white;
color: black;
}
</style>
これは<a href="#" class="tooltip">ペン<span>pen</span></a>です。
これはペンpenです。
以下のコードで簡単な中央配置が実現できます。
<div style="text-align: center; width: 100%;">
<div style="text-align: left; width: 80%; margin: 0 auto;">
aaa
</div>
</div>
* 確認しやすさのため赤枠をつけて表示しています。
<noscript>
<p>JavaScriptがOFFです。</p>
</noscript>
<div id="foo" style="display:none;">
<p>JavaScriptがONです。</p>
</div>
<script type="text/javascript">
<!--
document.getElementById("foo").style.display='block';
//-->
</script>
以下のサイトで自分の製作したHTML文章の文法が正しいかチェックすることができます。
以下のページにHTML4.01, CSS2.1の定義が記述されています。
上記ページの日本語訳