CSS 3における新しいレイアウト手法:ボックスレイアウト

エ・ビスコム・テック・ラボ
2008-11-13 22:24:01
  • このエントリーをはてなブックマークに追加

 ウェブページのレイアウトでは、ヘッダーやサイドバー、コンテンツなどをどのように配置するかがポイントとなる。現在、配置のコントロールにはfloatやpositionプロパティを利用するのが一般的だが、CSS 3の「Advanced Layout Module」という草案では、新しいレイアウト手法が提案されている。

 このレイアウト手法は「行と列のレイアウト」や「ボックスレイアウト」と呼ばれ、FirefoxとSafari、Google Chromeが対応している。

 ボックスレイアウトの機能を利用すれば、これまでのfloatやpositionプロパティでは困難だった「段の高さを揃えた段組み」なども簡単に作成できるようになる。

 そこで今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認したい。

段の高さを揃えた段組み。左右のサイドバーをコンテンツの高さに揃えている 段の高さを揃えた段組み。左右のサイドバーをコンテンツの高さに揃えている

段の高さを揃えた段組みを作成する

 ボックスレイアウトの機能を利用して、段の高さを揃えた段組みを作成してみよう。

 まずは、次のように左サイドバー、コンテンツ、右サイドバーの3つのパーツを用意する。この段階では段組みの設定をしていないので、3つのパーツは記述した順に縦に並んで表示される。なお、左右のサイドバーは200ピクセル、コンテンツは300ピクセルの横幅に設定し、全体は

でマークアップしている。

段組み用の3つのパーツ 段組み用の3つのパーツ
#left-sidebar{
width: 200px;
padding: 20px;
background-color: orange;
}

#contents{
width: 300px;
padding: 20px;
background-color: yellow;
}

#right-sidebar{
width: 200px;
padding: 20px;
background-color: limegreen;
}

コンテンツ

…略…
ブラウザで表示を確認する
  • コメント(1件)
#1 tomita   2008-11-16 10:38:55
http://b.hatena.ne.jp/at_yasu/20081115#bookmark-10822025
> iid:at_yasu 様

「ブラウザで表示を確認する」のリンク先を修正しました。
ご指摘、ありがとうございました。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]