ボックスレイアウトの方向をコントロールする

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

 ボックスレイアウトではレイアウトの方向を簡単に指定することができる。これにより、要素を横に並べた段組みのレイアウトだけでなく、縦に並べたときのレイアウトも細かくコントロールすることが可能だ。

 なお、ボックスレイアウトはCSS 3の草案「Advanced Layout Module」で提案されているレイアウト手法で、現在のところFirefoxとSafari、Google Chromeが対応している。詳しくは前回までの記事を参照してほしい。

ボックスレイアウトの方向を指定する

 次のサンプルでは全体を囲んだ

をボックス要素として表示するため、「display:box」と指定している。すると、ボックス要素の子要素「テキストA」〜「テキストC」は横に並べて表示される。これにより、ボックスレイアウトの標準のレイアウトの方向は「横方向」となることがわかる。

 なお、ボックス要素には「border: solid 5px blue」と指定して、全体を青色の罫線で囲むように指定している。

標準のボックスレイアウトの表示 標準のボックスレイアウトの表示
#container{
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
}

#text-a{
background-color: orange;
}

#text-b{
background-color: yellow;
}

#text-c{
background-color: limegreen;
}
テキストA
テキストB
テキストC
ブラウザで表示を確認する

 これに対して、ボックス要素に「box-orient:vertical」と指定すると、子要素を縦に並べて表示することができる。box-orientはレイアウトの方向を指定するプロパティで、横方向にレイアウトする場合は「horizontal」、縦方向にレイアウトする場合は「vertical」と指定する。

 なお、Firefoxでは「-moz-box-orient」、SafariとGoogle Chromeでは「-webkit-box-orient」と記述する。

「box-orient:vertical」と指定したときの表示 「box-orient:vertical」と指定したときの表示
#container{
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;

-moz-box-orient: vertical;
-webkit-box-orient: vertical;
}
…略…
ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]