ウェブデザインをスタイルシートでおこなおう！

テーブルを使わずバックグラウンドイメージを使う２

おさらい。
テーブル要素を使って箱型の飾りを作るのはよく知られる技。

通常、上図のようにテーブルを組み、回りに画像をはめ込むことになる。
しかし、ただ飾るためだけにテーブルを使うのはあまり好ましくない。
ごちゃごちゃになって更新や模様替えも大変となる。 ということで、ＣＳＳですっきりにしよう第二弾。

前回紹介した方法は、横幅固定で縦はフリーサイズという最も簡単な方法だった。
今回は、ちょっと頭を使って完全なフリーサイズのボックスを作ってみよう。
と言っても、テーブル要素を使って作るより、はるかに簡単で効率的だ。
テーブル要素でがんばって作るのが馬鹿らしくなるだろう。

まずは完成図（ＳＳ）。

上のボックスを作るのに、４つの画像を使用している。

1.左上の部分。これの縦の長さがタイトルの縦の最大サイズとなる。

２．右上とタイトル背景を合わせた部分。この横と縦幅がタイトルの最大の長さとなる。

３．４は、本文の部分で、同様に左下右下と作る。

ではまず、タイトルの部分を説明しよう。
１と２を合成して表示するわけだが、合成の順序を間違えないように。
まず、背景が含まれる右上の部分を表示させる。その上に左上の部分を表示させ、角がちゃんと表示されるようにする。

もし逆の順序でやると、左上の画像が後ろに隠れてしまって、意味が無くなる。

では、タグとＣＳＳをどのようにするかを説明しよう。

<div class="box">
<div class="title"><h2>タイトル</h2></div>
<div class="content">文章</div>
</div>

見ての通り、テーブルで作るよりもすっきり見やすくなっている。本来のＨＴＭＬ文章に近い形である。
ＣＳＳで、titleの背景を右上、title h2の背景を左上にすれば、タイトル部分の完成。
次に、boxとcontentの背景も同様に処理するだけだ。
たったこれだけで、フリーサイズのボックスができる。テーブル要素を使うよりぐっとお手軽で効率的だというのがわかるはず。

div.title {
background-image: url(title-right.gif);
background-repeat: no-repeat;
background-position: right top;
}
div.title h2{
background-image: url(title-left.gif);
background-repeat: no-repeat;
background-position: left top;
}
div.box {
background-image: url(content-right.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
div.content {
background-image: url(content-left.gif);
background-repeat: no-repeat;
background-position: left bottom;
}

スタイルシートは上記が基本で、使うときはpaddingも指定して、文字が端によりすぎないようにしよう。（例： padding: 4px; ）
たったこれでだけで、あの複雑なテーブルプレートを再現できてしまうのだ。