BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

テーブルレイアウトからの脱却

<table>タグは表を形成するものであり、ページのレイアウトを目的とした使用は推奨されていません。タグの占める割合が大きいためページの表示に時間を要し、訪問者に余計なストレスを与える恐れがあります。

この問題を解決するための手法を次に挙げています。

リスト要素

部分的なテーブルレイアウトからの脱却に役立ちます。リスト要素には順番のある箇条書き順番のない箇条書き定義リストの3種類があり、これらを利用することで構造的にリストであることを示すことができます。

ブロック要素の浮動

全体的なテーブルレイアウトからの脱却に役立ちます(*1)。CSSのfloatプロパティを利用することで、通常は横方向に並べて配置することのできないブロック要素を浮動させ、並列に配置することができます(*2)

当ブログは、非常に一般的な2カラム形式でレイアウトされています。

div#all

基礎となる横幅720pxのボックスです。タイトルや他のボックスを含んでいます。

div#all{ width:720px; }

div#main

横幅500pxのボックスを右側に浮動させています。記事やコメントを含んでいます。

div#main{
width:500px;
float:right;
text-align:left;
}

div#menu

横幅185pxのボックスを左側に浮動させています。メニューを含んでいます。

div#menu{
width:185px;
float:left;
text-align:left;
}

address

浮動させたボックスの回りこみを解除しています。連絡先や広告を含んでいます。

address{ clear:both; }

IE6にはCSSの実装にバグがあり、ブロック要素を浮動させる際には次の点に注意する必要があります。

  1. 1つのボックスに、floatプロパティとmarginプロパティを同時に指定しない方が良いでしょう。例えば左方向に浮動させたボックスは、左側のマージンが2倍に増大してしまいます。
  2. 1つのボックスに、widthプロパティとpaddingプロパティ及びborderプロパティを同時に指定しない方が良いでしょう。互換モードで表示される場合、widthの値にpadding及びborder-widthの値を含んでしまい、その分だけ短い横幅が適用されます。他の視覚系ブラウザはW3Cの仕様に従い、widthの値を内容域のみの横幅と解釈するため、レイアウトが崩れる恐れがあります。

回避策としては、浮動させたボックスにはwidthプロパティを指定し、その内側のブロック要素marginプロパティpaddingプロパティ及びborderプロパティを指定します。

(*1)
このテクニックは、2step 脱テーブルスタイルシート講座において丁寧に解説されています。
(*2)
img要素やinput要素等の置換要素を除いて、インライン要素はテキスト文字と同じように扱われるため幅や高さは適用されませんが、IE6の互換モードにおいてのみインライン要素にも幅や高さが適用されます。
スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。