推奨されたタグを利用してHTML文章を作る
戻る
目次 記述ルールを明記する

HTMLにはいくつかの種類が存在し、それぞれに記述ルールが決まっています。HTML文章を作る際にはどの記述ルールに従っているかを明記する必要があります。以下ではHTML4.01について解説しています。

HTML4.01の記述ルール

ブラウザがHTML文章を表示するときに、HTML文章がどのような文法に従って書かれているかを判断することができるように使用したHTMLの種類を明記します。HTML4.01では以下の三種類に分類されます。

表1.HTML4.01の記述ルールの種類
Strict 「使用しないほうがよい」とされた要素や属性、フレームを使用していない
Transitional 「使用しないほうがよい」とされた要素や属性を使用しているが、フレームを使用していない
Frameset 「使用しないほうがよい」とされた要素や属性、フレームを使用している
表2.「使用しないほうがよい」とされる要素
applet, isindex, basefont, menu, center, s, dir, strike, font, u
表3.「使用しないほうがよい」とされる属性
属性 ※関連する要素
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を指定できますが、「関連する要素」に記述されていないので、非推奨ではありません。

DOCTYPEの記述方法

HTMLの種類を定義するには先頭にDOCTYPEを記述する必要があります。記述の方法は以下のようになります。

表4.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で推奨される記述方法で製作します。

図1.製作するページ
サンプルページ
ソースの比較

まず、同じようなページを推奨されない方法で記述した場合のソースを見てみます。レイアウトが<table>で行われており、<font>やalignが使われています。

図2.推奨されないページのソース <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>

次に推奨される記述方法で製作したページのソースです。ページのデザインに関係する要素、属性をスタイルシート内で置き換えて利用しています。

図3.推奨されるページのソース <!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文章を作ってみます。HTML文章は<head>と<body>で構成されています。

HTML文章の情報を明記する(head)

ソースの<head>部分には表示しているHTML文章の情報を記述することができます。

図4.headの記述例 <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>
  1. HTML文章で使用している文字コード
  2. HTML文章で使用しているスタイルシート言語
  3. HTML文章のタイトル
  4. スタイルシートの内容

* <style>の設定を<!-- -->でコメントしているのは、スタイルシートに対応していない古いブラウザが記述した設定を画面に表示してしまうのを防ぐためです。

HTML文章の構成を作る(body)

<body>には、実際にブラウザに表示される文書の本体を記述します。まずは製作するHTML文章の構成を明確にしていきます。

表5-a.HTML文章作成に使用する要素
要素 役割 使用例 表示例
h1~h6 HTML文章の見出しを作るときに利用します。
<h1>から<h6>の6段階で見出しを設定できます。
<h1>MCLページにようこそ</h1>
<div>
  <h2>特徴</h2>
  <div>
    ・・・省略・・・
  </div>

  <h2>募集要項</h2>
  <div>
    ・・・省略・・・
  </div>
</div>

MCLページにようこそ

特徴

・・・省略・・・

募集要項

・・・省略・・・
div ページ内のグループを明確にするために利用します。
<div class="title">株式会社三浦コンピューター</div>
<div class="menu">
  ・・・省略・・・
</div>
<div class="contents">
  <h1>MCLページにようこそ</h1>
  <div>
    <h2>特徴</h2>
    <div>
    ・・・省略・・・
    </div>

    <h2>募集要項</h2>
    <div>
      ・・・省略・・・
    </div>
  </div>
</div>
株式会社三浦コンピューター
・・・省略・・・

MCLページにようこそ

特徴

・・・省略・・・
p グループ内のテキストを段落ごとに区切るときに利用します。
<h2>募集要項</h2>
<div>
  <p>当社は・・・省略・・・</p>
  <p>優秀な・・・省略・・・</p>
</div>

募集要項

当社は・・・省略・・・

優秀な・・・省略・・・

表5-b.HTML文章作成に使用する要素
要素 役割 使用例 表示例
ul,ol,li <ul>と<li>を利用することでページ内で箇条書きのコンテンツを作成できます。
<ul>の代わりに<ol>を使用すると画面上では番号つきで表示されます。
<ul>
  <li>お客様のニーズを把握・・・省略・・・</li>
  <li>お客様の要望に対して・・・省略・・・</li>
  <li>仕様書にはあまり表現・・・省略・・・</li>
</ul>
  • お客様のニーズを把握・・・省略・・・
  • お客様の要望に対して・・・省略・・・
  • 仕様書にはあまり表現・・・省略・・・
table ページ内で表を使いたいときに<table>を利用します。
<table>を利用してページのレイアウトを行ってはいけません。
<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>
No システム名 上段:開発環境
下段:技術要素
1 座席管理 Windows, Oracle
Java, HTML, VC++, JSP, Struts, Tomcat, XSLT, FOP
2 図書館管理 Windows
VB, VBA
span <span>はそれ自身は特に意味を持っていませんが、<span>で囲んだ部分にスタイルシートを適用するのに利用します。
提案を行い、<span class="strong">お客様の期待を超えること</span>ができるよう
提案を行い、お客様の期待を超えることができるよう
address HTML文章内に著作者の情報等を記述したい時は<address>を利用します。
<div class="footer">
    <address>Copyright (C) MCL. ALL RIGHTS RESERVED</address>
</div>

Copyright (C) MCL. ALL RIGHTS RESERVED

レイアウトの変更

レイアウトを行なう際に注意したいのがブロックレベル要素、インライン要素についてです。まず、2つの要素の違いについて解説し、その上で要素を左右いずれかに寄せるためのfloatと、ページ内で余白を作るときに利用するmargin,paddingについて解説していきます。

ブロックレベル要素、インライン要素

要素はブロックレベル要素と、インライン要素に分けられます。

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識されます。ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。

表6.ブロックレベル要素の種類
<address>, <blockquote>, <center>, <div>, <dl>, <fieldset>, <form>, <h1>-<h6>, <hr>, <noframes>, <noscript>, <ol>, <p>, <pre>, <table>, <ul>

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。

表7.インライン要素の種類
<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)があります。詳しくは以下のサイトを参考にしてみてください。

http://mozilla.gr.jp/standards/webtips0015.html

float
図5.画像とテキスト:ソース <img src="strict02.jpg"> お客様のニーズを把握し、最大限のサービスを提供できるようにするため、改善と提案を行い、お客様の期待を超えることができるよう心がけております。
図6.画像とテキスト:表示例 お客様のニーズを把握し、最大限のサービスを提供できるようにするため、改善と提案を行い、お客様の期待を超えることができるよう心がけております。

ここでimg要素にfloatプロパティを設定してみます。

図7.テキストを回り込ませる:ソース <img style="float: left;" src="strict02.jpg"> お客様のニーズを把握し、最大限のサービスを提供できるようにするため、改善と提案を行い、お客様の期待を超えることができるよう心がけております。
図8.テキストを回り込ませる:表示例 お客様のニーズを把握し、最大限のサービスを提供できるようにするため、改善と提案を行い、お客様の期待を超えることができるよう心がけております。

floatプロパティを設定すると設定した要素に続くすべての要素が回り込んでしまうため、解除する必要があります。

図9.画像とテキストの配置:ソース <img src="strict02.jpg"> <p>テキスト1</p> <p>テキスト2</p>

テキスト1を画像の横に配置させるため、img要素にfloatプロパティを設定します。

図11.画像を左に寄せる:ソース <img style="float: left;" src="strict02.jpg"> <p>テキスト1</p> <p>テキスト2</p>

テキスト1以降の要素のfloat: leftを解除します。floatプロパティを解除する時にはclearプロパティを利用します。

図13.回り込みを解除する:ソース <img style="float: left;" src="strict02.jpg"> <p>テキスト1</p> <p style="clear: left;">テキスト2</p>

* clearに設定できる値はleft,right以外にboth,noneがあり、bothはfloat: left, float: rightの両方を解除できる。noneは回り込みを解除しないので、変化がありません。

margin, padding

marginとpaddingはページ内で余白を入れたいときに利用します。marginは要素の外側、paddingは要素の内側の余白を入れるために利用されます。

以下のソースを記述してみます。

図16.marginとpaddingの利用:ソース zzz<div style="height: 5em; margin-top: 1em; padding-top: 2em; border: solid 1px; ">abc</div>yyy
スタイルシート

スタイルシートはページのデザインを設定するためのものなので、当然、スタイルシートを利用することでページ内の要素の色やテキストの配置も設定できます。

図18.スタイルシートの設定:ソース address { background-color: blue; color: white; text-align: right; }
付録
ブロックレベル要素をインライン要素として扱う

ブロックレベル要素は自動で改行を行ってしまうため、要素の左右に文章等を配置することができません。

図20.テキストとtable:ソース AAA<table border> <tr> <td>BBB</td> </tr> </table>

tableはブロックレベル要素のため、自動的に改行されてしまいますが、tableに対してstyle="display: inline"と設定することでtableをインライン要素として扱うことができます。

図22.tableをinline要素として扱う:ソース AAA<table border style="display: inline"> <tr> <td>BBB</td> </tr> </table>

インライン要素は自動で改行を行わないので。AAAとtableが並んで表示されます。また、インライン要素に対してstyle="display: block"と設定することでインライン要素をブロックレベル要素として扱うこともできます。

floatを利用した段組の設定

floatを利用してmenuとcontentsを横に並べて表示する際に、menuのみにfloatを設定した場合とmenu, contents両方にfloatを設定した場合の表示の違いを確認します。menu, contentsの範囲を明確にするため両方の要素に背景色を設定しています。また、下記のソースには必要最低限のソースのみ記述されています。

図24. menuのみfloat:ソース div.menu { float: left; background-color: lime; } div.contents { background-color: aqua; }

上記のソースでは二つのdivを並べるためにmenuのみに「float: left;」を設定していますが、表示するとcontents内の要素がmenuの下側に回りこんでしまいます。このような場合contentsにも「float: left;」を指定することで回り込みを行わずにmenuの右側に並べて表示することができます。

図26. menu, contentsにfloat:ソース div.menu { float: left; background-color: lime; } div.contents { float: left; background-color: aqua; }
widthの合計が100%になったとき

menuとcontentsにはそれぞれ「width: 10%;」、「width: 89%;」が設定されています。widthに設定された値の合計を100%にしていない原因を解説していきます。

図28. 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の右側に並べて表示することができます。

図30. width合計99%:ソース div.menu { float: left; width: 10%; background-color: lime; } div.contents { float: left; width: 89%; border-left: solid 1px; background-color: aqua; }
見出しにマークをつける

スタイルシートのborder設定を利用して、見出しにマークをつけることができます。

図32.見出しにマークをつける:ソース h2 { border-left: solid 1.2em blue; border-bottom: solid 4px blue; padding-left: 0.3em; }
CSSでtooltip

以下のコードで簡単なtooltipが実現できます(IE6ではこれが必要? a:hover{background: white; text-decoration: none;})。

図34.CSSでtooltip:ソース <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>です。
CSSで中央配置(センタリング)

以下のコードで簡単な中央配置が実現できます。

図36.CSSで中央配置:ソース <div style="text-align: center; width: 100%;"> <div style="text-align: left; width: 80%; margin: 0 auto;"> aaa </div> </div>

* 確認しやすさのため赤枠をつけて表示しています。

JavaScriptがOFFの対応
図38.JavaScriptがOFF:ソース <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>
図39.JavaScriptがOFF:表示例ON
JavaScriptがONです。
図40.JavaScriptがOFF:表示OFF例
JavaScriptがOFFです。
文法をチェックする

以下のサイトで自分の製作したHTML文章の文法が正しいかチェックすることができます。

HTML4.01, CSS2.1の定義