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;
}

div要素によるスタイルコンテナ

span要素

span要素」は、div要素同様にコンテナ化するための要素であり、異なる点はインラインレベルのコンテナを構築する点だ。 そのDTDは、つぎのように示されている。

<!ELEMENT span %Inline;>
<!ATTLIST span
  %attrs;
  >

span要素により、インラインレベルのスタイルを細かく制御できますが、実際には、em要素やstrong要素などの字句要素群によって マークアップした方が、文書構造上は分かりやすくなる。そのため、div要素に比較すると、span要素は使用例は限られている。

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.