20. スタイルコンテナ
XHTMLのdiv要素とspan要素について説明する。
スタイルコンテナ
まずは、つぎのXHTMLのコードを見てほしい。
<table>
<tr><th>氏名</th><td>広島一郎</td></tr>
<tr><th>電話</th><td>999-999-9999</td></tr>
</table>
<table>
<tr><th>氏名</th><td>広島二郎</td></tr>
<tr><th>電話</th><td>888-888-8888</td></tr>
</table>
これはXHTMLで、電話帳を作成したものであるが、XHTMLの性格上、文書の論理構造の記述はできても、 電話帳としての意味的構造はマークアップできない。つまり、一人分とか、一人分のタイトルだとか。
そこで、こうしたマークアップをXHTMLの範囲で補完するために、さまざまな要素のグループ化を行うことができる。 このグループ化した器を「コンテナ」と呼ぶ。では、コンテナ化したXHTMLのコードを見てみよう。
<div id="a001">
<table>
<tr><th>氏名</th><td>広島一郎</td></tr>
<tr><th>電話</th><td>999-999-9999</td></tr>
</table>
</div>
<div id="a002">
<table>
<tr><th>氏名</th><td>広島二郎</td></tr>
<tr><th>電話</th><td>888-888-8888</td></tr>
</table>
</div>
div要素
「div要素」は、コンテナ化するための要素であり、ブロックレベルのコンテナを構築する。 そのDTDは、つぎのように示されている。
<!ELEMENT div %Flow;>
<!ATTLIST div
%attrs;
>
この"div要素"は、ブロックレベルのコンテナであり、スタイルを適用する場合は、特に「スタイルコンテナ」と呼ぶ。 以下にXHTMLコードの例を示す。
<body>
<div id="head">
<h1>タイトル</h1>
<p>ここは、タイトル部分の段落です。</p>
</div>
<div id="body">
<p>ここは、本文部分の段落です</p>
</div>
</body>
つぎに、このXHTMLに適用するスタイルシートと、その表示結果を示す
* {
margin: 0;
padding: 0;
border: none;
}
body {
width: 300px;
padding-left: 1em;
padding-right: 1em;
}
div#head {
color: #000;
background-color: #ccc;
border: 2px solid #000;
padding: 1em;
text-align: center;
}
div#head p {
font-size: 0.8em;
}
div#body {
color: #000;
background-color: #fff;
padding: 1em;
margin-top: 1em;
}
span要素
「span要素」は、div要素同様にコンテナ化するための要素であり、異なる点はインラインレベルのコンテナを構築する点だ。 そのDTDは、つぎのように示されている。
<!ELEMENT span %Inline;>
<!ATTLIST span
%attrs;
>
span要素により、インラインレベルのスタイルを細かく制御できますが、実際には、em要素やstrong要素などの字句要素群によって マークアップした方が、文書構造上は分かりやすくなる。そのため、div要素に比較すると、span要素は使用例は限られている。