ホームページの基礎（2. CSS 編） - HITP 広島工業大学専門学校

2.20 スタイルコンテナ

このページでは，CSSから少し離れて，XHTMLのdiv要素とspan要素について説明します。

2.20.1 スタイルコンテナ

まずは，つぎの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>

CSS総目次 | ページ先頭に戻る

2.20.2 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要素によるスタイルコンテナ

CSS総目次 | ページ先頭に戻る

2.20.3 span要素

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

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

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

CSS総目次 | ページ先頭に戻る