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

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

floatプロパティを利用した段組み

 段組みを現在の主流であるfloatプロパティを利用して設定すると次のようになる。

 段の高さは中身の文字や画像の分量によって決まるため、段ごとの高さはバラバラになってしまう。floatプロパティを利用した段組みでは、段の高さを揃えて表示するのは難しいのが現状だ。

floatプロパティを利用した段組み floatプロパティを利用した段組み
#left-sidebar{
float: left;
width: 200px;
padding: 20px;
background-color: orange;
}

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

#right-sidebar{
float: left;
width: 200px;
padding: 20px;
background-color: limegreen;
}
ブラウザで表示を確認する

ボックスレイアウトを利用した段組み

 ボックスレイアウトの機能を利用して段組みを行うには、全体をマークアップした

に対して「display: box」と指定する。

 すると、

はボックス要素となり、中身であるサイドバーとコンテンツは横に並べて表示される。さらに、各段の高さは自動的に一番大きな段に揃えて表示されるので、サイドバーとコンテンツの高さを揃えて表示することが可能だ。

 なお、displayプロパティの値はFirefoxでは「-moz-box」、SafariとGoogle Chromeでは「-webkit-box」と指定する。

ボックスレイアウトを利用した段組み ボックスレイアウトを利用した段組み
#container{
display: -moz-box;
display: -webkit-box;
}

#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などの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]