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

はじめに

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

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

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

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

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

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

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

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

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

まず，２つのボックス（クラス名 doublebox）と，そのボックスを収納するボックス（クラス名 cabinet）を用意します．また，この例では，float を使用しますので，架空のボックス（クラス名 dummy）を用意します．

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

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

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% のボックスを中央に配置するには次のように命令します．

<div class="centerbox">中央揃え</div>

div.centerbox{
 width: 50%;
 margin-left: auto;
 margin-right: auto;
 border: 1px solid #000;
}

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

<div class="centerbox iecenterbox">中央揃え</div>
</div>

div.iecenterbox {
     text-align: center;
}
div.centerbox{
 width: 50%;
 margin-left: auto;
 margin-right: auto;
 border: 1px solid #000;
 text-align: left; /* テキストの左揃え */
}

表の中央配置

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

table {
 margin-left: auto;
 margin-right: auto;
 text-align: left; /* テキストの左揃え */
}

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

• © Mamoru IMANISHI All rights reserved.
•