日文文書処理

ここでは、〈body要素〉に含まれる複数のブロックレベル要素をグループ化して、〈body要素〉をいくつかブロックにわける方法を学ぶ。

ブロックレベル要素をグループ化する

〈段落要素〉などのブロックレベル要素を、ひとつのブロックレベル要素にグループ化する（まとめる）には、「div要素」を使う。

たとえば、〈div要素〉を使って〈段落要素〉をグループ化するには、次のように記述すればよい。

<div>
  <p>ぜんまいの</p>
  <p>のの字ばかりの</p>
  <p>寂光土</p>
</div>
<div>
  <p>広島や</p>
  <p>卵食ふ時</p>
  <p>口ひらく</p>
</div>

〈div要素〉について

〈div要素〉は、ブロックレベル要素なので、その中にインライン要素を直接書くことができる。例えば、次のようにインライン要素である〈cite要素〉を記述することができる。

<div>
  <p>ぜんまいの</p>
  <p>のの字ばかりの</p>
  <p>寂光土</p>
  <cite>川端茅舎の俳句</cite>
</div>
<div>
  <p>広島や</p>
  <p>卵食ふ時</p>
  <p>口ひらく</p>
  <cite>西東三鬼の俳句</cite>
</div>

また、〈div要素〉は〈段落要素〉（→見出しと段落をつくる）とは異なり、

<div>
  <ol>
    <li>〜〜〜</li>
    <li>〜〜〜</li>
  </ol>
 </div>

のようにブロックレベル要素を子要素にしたり、

<div>
  <p>段落</p>
  <div>〜〜</div>
  <p>段落</p>
</div>

のように〈div要素〉と〈div要素〉を入れ子にすることができる。

クラス属性を記述する

〈div要素〉は、〈span要素〉（→テキストの一部の表示を変更する）と同じく、それだけでは意味を持たない。〈div要素〉は、《クラス属性》class attributeや《id属性》id attributeと組み合わせて使われることが多い。たとえば、〈div要素〉に《クラス属性》を指定すると、次のようになる。

<div class="part">
  <p>ぜんまいの</p>
  <p>のの字ばかりの</p>
  <p>寂光土</p>
  <cite>川端茅舎の俳句</cite>
</div>
<div class="part">
  <p>広島や</p>
  <p>卵食ふ時</p>
  <p>口ひらく</p>
  <cite>西東三鬼の俳句</cite>
</div>

〈div要素〉の《クラス属性》に対して、スタイルシートstyle sheetでスタイルを指定すれば、そのブロックの表示を変更することができる。たとえば、スタイルシートに

div.part {
    border: thin dotted blue ;
    margin-bottom: 1em ;}

のように書けば、ブロックの外側に青い色の点線の枠が表示される。