Firefox 3が対応したdisplayプロパティの値(2)

エ・ビスコム・テック・ラボ
2008-05-09 12:06:01
  • このエントリーをはてなブックマークに追加

 今回はinline-blockボックスを利用して段組みのレイアウトと横組みのメニューを作成してみたい。なお、displayプロパティやinline-blockボックスについては、前回の記事を参照して欲しい。

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

 「display: inline-block」と指定すると、HTML/XHTMLタグでマークアップした部分をinline-blockボックスで表示することができる。inline-blockボックスを利用すれば、floatやpositionプロパティを利用せずに段組みのレイアウトを作ることが可能だ。

 段組みのレイアウトは、一般的には

で構成したblockボックスを横に並べて作成する。しかし、blockボックスはそのままでは横に並べて表示することができないので、floatプロパティで回り込みを指定したり、positionプロパティで表示位置を指定しなければならない。

 たとえば、次のソースではAとBのblockボックスにfloatプロパティを適用して、横に並べて2段組みで表示している。また、Cを2段組みの下に表示するため、clearプロパティで回り込みを解除する設定も記述している。

AとBのblockボックスを横に並べて表示したもの AとBのblockボックスを横に並べて表示したもの
div#a, div#b{
display: block;
width: 200px;
float: left;
}

div#a{
background-color: #0088ff;
}

div#b{
background-color: #00ccff;
}

div#c{
clear: both;
width: 400px;
background-color: #ffff00;
}
A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
B B B B B B B B B B B B B B B B B B B B B B B B B B B B
C C C C C C C C C C C C C
ブラウザで表示を確認する

 一方、AとBをinline-blockボックスに変更すれば、floatプロパティを指定しなくても横に並べて表示することができる。また、clearプロパティで回り込みを解除しなくても、Cを2段組みの下に表示することが可能だ。

AとBをinline-blockボックスに変更したもの AとBをinline-blockボックスに変更したもの
div#a, div#b{
display: inline-block;
width: 200px;
}

div#a{
background-color: #0088ff;
}

div#b{
background-color: #00ccff;
}

div#c{
width: 400px;
background-color: #ffff00;
}
ブラウザで表示を確認する

 ただし、そのままではinline-blockボックスの下を揃えた表示になるので、上で揃えて表示するにはvertical-align:topを指定する。また、AとBの間の白い余白を削除するには、

の間に改行やスペースを入れずに記述する。

ボックスの上を揃えて、ボックス間の余白を削除したもの ボックスの上を揃えて、ボックス間の余白を削除したもの
div{
display: inline-block;
width: 200px;
vertical-align: top;
}

div#a{
background-color: #0088ff;
}

div#b{
background-color: #00ccff;
}
A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
B B B B B B B B B B B B B B B B B B B B B B B B B B B B
ブラウザで表示を確認する

 inline-blockボックスに対応したSafariOperaInternet Explorer 8(ベータ版)でも同じように表示することができる。

Safariの表示 Safariの表示
Operaの表示 Operaの表示
Internet Explorer 8の表示 Internet Explorer 8の表示

inline-blockボックスを利用した横組みメニューのレイアウト

  • 新着記事
  • 特集
  • ブログ