Firefox 3が対応したdisplayプロパティの値(2)
前回に続いて、Firefox 3が対応したdisplayプロパティの値「inline-block」を紹介する。
今回はinline-blockボックスを利用して段組みのレイアウトと横組みのメニューを作成してみたい。なお、displayプロパティやinline-blockボックスについては、前回の記事を参照して欲しい。
inline-blockボックスを利用した段組みのレイアウト
「display: inline-block」と指定すると、HTML/XHTMLタグでマークアップした部分をinline-blockボックスで表示することができる。inline-blockボックスを利用すれば、floatやpositionプロパティを利用せずに段組みのレイアウトを作ることが可能だ。
段組みのレイアウトは、一般的には<div>で構成したblockボックスを横に並べて作成する。しかし、blockボックスはそのままでは横に並べて表示することができないので、floatプロパティで回り込みを指定したり、positionプロパティで表示位置を指定しなければならない。
たとえば、次のソースではAとBのblockボックスにfloatプロパティを適用して、横に並べて2段組みで表示している。また、Cを2段組みの下に表示するため、clearプロパティで回り込みを解除する設定も記述している。
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;
}
<div id="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 A</div> <div id="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 B</div> <div id="c">C C C C C C C C C C C C C</div>
※ブラウザで表示を確認する
一方、AとBをinline-blockボックスに変更すれば、floatプロパティを指定しなくても横に並べて表示することができる。また、clearプロパティで回り込みを解除しなくても、Cを2段組みの下に表示することが可能だ。
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 id="a">と<div id="b">の間に改行やスペースを入れずに記述する。
ボックスの上を揃えて、ボックス間の余白を削除したもの
div {
display: inline-block;
width: 200px;
vertical-align: top;
}
div#a {
background-color: #0088ff;
}
div#b {
background-color: #00ccff;
}
<div id="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 A</div><div id="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 B</div>
※ブラウザで表示を確認する
inline-blockボックスに対応したSafariやOpera、Internet Explorer 8(ベータ版)でも同じように表示することができる。
Safariの表示
Operaの表示
Internet Explorer 8の表示
inline-blockボックスを利用した横組みメニューのレイアウト
- 特集: FirefoxとSafariのCSS徹底検証 (20件)
- 2日前のトップ記事
- 3日前
- 4日前
- 5日前
- ホワイトペーパー
- 話題のタグ
現場の知見から得られるノウハウを共有しましょう
仮想化によるコスト削減を見える化:オンラインTCOカリキュレータ
Ruby・Python・JavaScript・PHPについてどう思いますか?:Tim Brayに聞いてみた
来日したゲイツ氏が経団連で行ったスピーチ全文
グリーンITと「幼年期の終わり」
Web開発者向けツール Opera Dragonflyのアルファ版が登場
あなたがプログラムを理解できない10の理由:第1回
Rubyでどう書く?:RubyでPDF履歴書を作成する
Neil YoungがJavaOneにやってきた
内部統制対策を実現するIT運用管理ツール
オンラインマーケティングの最重要課題
-Simplify IT- ITをシンプルに 連載第2回