CSS とブロック要素の配置について

ショートカットキーの (Z) を押すとここに簡単に戻ることができます.

はじめに

XHTML 文書のレイアウトではしばしば,左側にメニュー一覧,右側に本文を書くようなスタイルもあります(2段組と呼ばれることがありますが,2段組とは正しくは新聞記事のように段落を2段に分けることです).このようなレイアウトを実現するには,HTML の古いバージョンではフレーム機能を使ったりテーブルを利用したりしていました.

しかし,文書管理,データベース化をはじめ携帯端末などを考慮すると,フレーム機能に依存しない文書の作成が求められます.また,テーブルを使ったレイアウトもテーブル本来の使い方をしていないので,文書管理としての不都合も生じます.それゆえ,こうしたレイアウトの実現も CSS に委ねるわけですが,これが意外と簡単ではありません.環境によっては全く意図しないレイアウトになったりもします.さらには,CSS をどのように定義したら所望の配置が得られるかを紹介しているページすらあります.

HTML の古いバージョンでは,フレーム機能などを使う代替措置を行うことは可能でしたが,XHTML では,フレーム機能を使うことができませんので,CSS を使ってレイアウトを定義します.

ボックス要素とインライン要素

ブロック要素とは,別行立てて表示される要素のことで,通常ブロックの幅は,行幅とおなじになります.主なブロック要素の例としては,hn, p, blockquote, div などがあります.

インライン要素とは,必ずブロック要素の中に収まらなければならない要素のことで,主なインライン要素の例としては,em, strong, span などがあります.

ブロック要素の中にブロック要素が収めることはできますが,インライン要素の中にブロック要素を収めることはできません.また,本文の中にインライン要素を直接書くこともできません.

複数のブロック要素を横に配置する

2つのボックスを横に並べてみましょう(ここで紹介する方法は1つの例であってお手本となるものではないことに注意してください).

まず,2つのボックス(クラス名 doublebox)と,そのボックスを収納するボックス(クラス名 cabinet)を用意します.また,この例では,float を使用しますので,架空のボックス(クラス名 dummy)を用意します.

入力例: XHTML
<div class="cabinet">
     <div class="doublebox">左のボックス</div>
     <div class="doublebox">右のボックス</div>
</div>
<div class="dummy">
     <span class="none">dummy box</span>
</div>

次に css ファイルを用意します.収納するボックスの横幅を 100% とすると,1つのボックスの幅は 50% です.ただし,ボックスの周囲に枠線を描く場合は,枠線の厚みを考慮しなければなりませんので,ボックスを2つ並べる場合は,幅は 48% が適当でしょう.また,ボックスを3つ横に並べたい場合は,1つのボックスの幅を 32% 程度に指定します.

入力例: CSS
div.cabinet {
     width:100%;
     margin: 0%;
     padding: 0%;
}
div.doublebox {
     float: left;
     width: 48%;
     margin: 0%;
     padding: 0%;
     border: 1px solid #000;
}
div.dummy { clear: left; }
span.none{ display: none; }
出力例
左のボックス
右のボックス

ところで,float はあくまでも回り込み用の命令なので,表示によってはボックスが横に並ばないこともありますので注意が必要です.

ボックスの中央配置

ボックスの横幅が行幅よりも小さい場合,ボックスを中央に配置したいことがあります.ボックス内のテキストは,text-align: center が用いることができますが,ボックスそのものを中央に揃えることはできません.

横幅が 50% のボックスを中央に配置するには次のように命令します.

入力例: XHTML
<div class="centerbox">中央揃え</div>
入力例:CSS
div.centerbox{
 width: 50%;
 margin-left: auto;
 margin-right: auto;
 border: 1px solid #000;
}
出力例
中央揃え
ブロック内のテキストは中央揃えではありません

IE は,中央に配置されませんので,次のように修正する必要があります.

入力例: XHTML
<div class="centerbox iecenterbox">中央揃え</div>
</div>
入力例:CSS
div.iecenterbox {
     text-align: center;
}
div.centerbox{
 width: 50%;
 margin-left: auto;
 margin-right: auto;
 border: 1px solid #000;
 text-align: left; /* テキストの左揃え */
}
出力例
中央揃え
ブロック内のテキストは中央揃えではありません

表の中央配置

ブロック要素の中央配置の例を応用して,表を中央に配置することもできます.

入力例:CSS
table {
 margin-left: auto;
 margin-right: auto;
 text-align: left; /* テキストの左揃え */
}
入力例: XHTML
<div class="iecenter">
<table summary="表の中央配置">
<caption>表の中央配置</caption>
<tr>
<td>左上</td><td>右上</td>
</tr>
<tr>
<td>左下</td><td>右下</td>
</tr>
</table>
</div>
出力例
表の中央配置
左上右上
左下右下

図の配置

図を別行立てて表示するためには,次のように指定します.

<div class="img">
<img src="画像のファイル名"
 width="画像の幅" height="画像の高さ"</div>
 alt="画像の説明文" />
</div>

しかし、この場合は,図にキャプションをつけることができませんので,次のように div を追加します.

<div class="figure">
<div class="img">
<img src="画像のファイル名"
 width="画像の幅" height="画像の高さ"</div>
 alt="画像の説明文" />
<div class="caption">キャプション</div>
</div>
</div>