2005年12月02日

CSSでテーブルタグをつかわずに...

このサイトは２カラムで構成されていますが、上部のグレーのラインにはカテゴリー別のナビゲーションがついています。

スタイルシートの知識があまりなかったので、これまでは最上部のバナー部分やナビゲーション部分はテーブルタグで作成していました。

それを今回、スタイルシートだけで作り直してみました。見た目は、まるでテーブルでつくったようにうまくいきました。テーブルをつかうとタグが非常に長くなる上、SEO的にも良くないようです。

今回テーブルタグをなくす上での大きなポイントは

１：下記画像のようにＤＩＶ（ブロック要素）の中にＤＩＶを入れること。このサイトの場合、最上部のバーナー部分は５つのＤＩＶ要素で成り立っています。そして、CSSの設定は５つのＤＩＶ要素それぞれにfloat: left;かfloat: right;をふりわけています。

※追記：12/11日以降は最上部バナーは750px X 80pxサイズの１枚の画像にしています。
Web標準の教科書がとても参考になります。

２：カテゴリーのナビゲージョンでは単語間の幅をいかに調節するかでした。ですが、これはスタイルシートでword-spacing:*em;（*は数字）を使えばよいことがわかりました。

よくかんがえたら２カラムとか３カラムというものは上記の画像と同じ理屈で成り立っていたのに.....。

いまさらですが、スタイルシートが大まかにですが理解できてきたような気がします。いずれスタイルシートを使いこなせるようになりたいものです！