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

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

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

通常、上図のようにテーブルを組み、回りに画像をはめ込むことになる。
しかし、ただ飾るためだけにテーブルを使うのはあまり好ましくない。
ということで、簡単な事ならテーブルを使わずCSSでできるということをここに書く。

まず、もっとも単純なものから

ページ全体は上図のようにテーブルを組み、両端に画像を入れる場合がある。
そして、横幅が固定ならばCSSを使ったほうが実は簡単。

まず、ページ全体を div 要素でかこみ、CSSで横幅を指定ておく。
そして、この横幅にあわせた画像を用意しておく。これが背景画像になる。
次にCSSでbodyの背景画像をY軸に連続表示を指定する。

たとえば、div要素に囲まれたコンテンツをページに中央に表示させているとする。
その場合のbodyのCSSはこうなる。

background-image: url(img/topback.gif);
background-repeat: repeat-y;
background-position: center;

上から順に、背景画像、縦にリピート、中央寄せとなる。

では次に、最初の図にある上下にも画像をつける場合。
これも横幅が固定ならば、普通に上下に横幅いっぱいの画像を張ろう。

以上が、横幅が固定の場合のやりかたである。
では、横幅がブラウザや文章にあわせて自動で変化する場合はどうだろうか。
これは上のやりかたと、テーブルのかわりにdivを使ったレイアウト方法の組み合わせとなる。
こうなると、テーブルを使用したほうが楽かもしれない。

この画像配置をテーブルで行わない方法は、これだけでなく、様々な用途に応用できるので是非おさえておこう。
背景画像はブロック要素をまたがって表示できることを利用し、ダイナミックな画像配置が可能となる。