小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

段組みレイアウトの基礎

CSSレイアウト

解説第八弾です。
本コンテンツは、以下のページのHTML/CSSソースを解説しています。


今回は、段組みレイアウトの基礎的なところを解説してみます。
スタイル指定なしのHTMLから徐々に段組みレイアウトのHTMLへ進化させていきます。
まずは、スタイル指定（CSS)なしのHTMLです。
尚、HTMLソースは、ブラウザで表示させた後、ブラウザのメニューからの表示で見てください。

まず、サンプル１でCSSを使わず（見やすくするため「background-color」は例外）以下の構造のHTMLを表示しています。

  • header_containerというidのdiv要素（ヘッダー）
  • contents_containerというidのdiv要素（コンテンツ）
  • sidebar_containerというidのdiv要素（サイドバー）
  • footer_containerというidのdiv要素（フッター）


サンプル１では、ブラウザのデフォルトでのマージンとパディングがあるので、サンプル２ではこれをゼロにします。


サンプル３では、サンプル２でのcontents_containerを左フロートさせ右側へsidebar_containerを回り込ませてみます。


一見、IEもFirefoxも段組みになります。
しかし、sidebar_containerは親要素の100%の横幅になっているだけで、実は段組みではないのです。
フロートさせたブロックレベル要素の後につづくフロートでないブロックレベル要素は、あたかも前のフロート要素が無かったようにレイアウトされるのです。


では、段組みさせるのは、どうするかというと、後につづくブロックレベル要素もフロートさせます。


これで、IEもFirefoxも段組みになりました。
しかし、IEは、ウインドウの大きさを変えると、段組みになったり、カラム落ちになったり不安定なのです。
これを解決するには、sidebar_containerの横幅を30%から29.9%にすると、IEでも大丈夫になりますね。
どうやら、IEでは、レイアウト計算で誤差がでるようです。


これで、段組みが完成しました。
しかし、ulやol要素の点や番号の表示が変です。
なので左マージン（margin-left:25px;）をとり、いい感じになりました。


このように、レイアウト横幅を親要素のパーセントで指定すると比較的簡単に段組みレイアウトができます。

関連ページ：