今回のポイント
<div>でまとめるということを知る
position:absoluteを使ううえでの注意

　ここまでに学んだ知識だけでは，CSSを使ってWebページをレイアウトする際に，

  • XHTMLの書式として<p>の中に<h1>や<ul>は書けない
  • 禁忌だと言っていたheight指定を使わざるを得ない場合がある

といった問題が発生すると前回，指摘しました。今回は，これらの問題を解決する方法について説明します。

　HTMLには<div>というタグがあります。“div”はDivisionの略です。Divisionは「分離」や「区域」といった意味です。和訳の通り，タグの意味合いも「領域指定」といった感じになっています。<div>タグはCSSで画面構成を学ぶにはとても大切なタグです。

　次のようなHTML（部分）があったと考えてください（リスト1）。

リスト1●ページを作っていると普通に出てくる構成 

<h1>見出し項目</h1>
<p>この見出しに対する説明文</p>

  <h2>小見出し項目</h2>
  <p>小見出し項目の本文部分。</p>

　リスト1はページを作っていると普通に出てくる構成です。前回までの知識で，<h1>や<p>にそれぞれCSS指定して位置を指定することはできます。しかしそれでは，それぞれが個別の付箋のような状態になって位置の調整が大変です。「<h1>をここに決めたら次の<p>はそこを起点に下にズラして…」のように，ひとつずつ調整が必要になるわけです。

<div>で括った部分はひとつの区域になる

　そもそもリスト1のような構成は，<h1>から最後の<p>までがおよそ“ひとつの塊（文意，あるいは文章としての流れ）”です。元がひとつの塊であるものを個別に設定するということに無駄を感じてしまいますね。そこで<div>です。文意としてひとつであろう部分を<div>で括ります（リスト2）。

リスト2●文意としてひとまとまりである部分を<div>で括る 

<div>     <!-- (1) -->
<h1>見出し項目</h1>
<p>この見出しに対する説明文</p>

  <h2>小見出し項目</h2>
  <p>小見出し項目の本文部分。</p>
</div>    <!-- (2) -->

　リスト2では，(1)と(2)でリスト1のHTMLを括ってしまっています。「括った部分はひとつの区域です」という意味を持たせた状態です。ふたつの<div>で構成したページを実際に見ながら学習を進めてみましょう。

リスト3●ふたつの<div>で構成したページ 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>CSSでのレイアウト</title>
  </head>
  <body>

<div>   <!--ひとつめのdiv-->
<h1>ひとつめのdiv</h1>
<p>こちらはひとつのh1とpで構成されたdivです。</p>
</div>

<div>   <!--ふたつめのdiv-->
<h1>ふたつめのdiv</h1>
<h2>小見出しをつけてみよう</h2>
<p>こちらはh1とh2，pで構成されています</p>
</div>

  </body>
</html>

　ブラウザでの表示結果は図1のようになります。パッと見ただけでは<div>が何をしているのかはわかりにくいです。見た目として<div>によって括られた部分の上下に空改行が入っていることなどは実際にはどうでもいいことです。前にも書いたようにCSSによる装飾をする前に，ブラウザでどのように見えるかというのは，ブラウザがデフォルトとして勝手にやっていることです。例えば<a>のリンク部分に下線が付いていることもブラウザのデフォルトで勝手にやっていることでHTMLの規定に「リンクには下線を付けなさい」なんてどこにも書かれていません。

図1●リスト3のブラウザ表示
図1●リスト3のブラウザ表示