builder by ZDNet Japanをご愛読頂きありがとうございます。

builder by ZDNet Japanは2022年1月31日にサービスを終了いたします。

長らくのご愛読ありがとうございました。

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;
}
ブラウザで表示を確認する

ブログの新規登録は、2021年12月22日に終了いたしました。

folllow builer on twitter
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]