display : inline-block をつかったレイアウト
初版 : 2008 年 7 月 5 日
アップデート : 2008 年 10 月 16 日
小山田 晃浩
株式会社メタフェイズ
矢印キーの左右でスライドを切り替えることができます。
このスライドは
2008 年 7 月 5 日に開催された SwapSkills で使用しました。
今回はその再演です。
- 前提
- 仕様/仕組み
- inline-block の仕様 / 仕組み
- inline-block のどこがいいのか
- 実装
- まとめ
前提 行について
- 行は、テキストや画像などのインライン要素によって自動で作り出される : demo
(1行ごとに div などでマークアップしなくても自動でできる)
- 行の高さは、行の中で高さが一番高いもので決まる : demo
- 横幅がいっぱいになると折り返して次の行をつくる : demo
- 行内では、vertical-align が有効 : demo
- 行内では、text-align が有効
これを頭の片隅において inline-block を知ってみましょう
仕様 / 仕組み
CSS 2.1 で定義されている display プロパティの値の一つ
inline-block を指定するには
div.sample{
display:inline-block;
}
のように指定する
CSS 2.1 (9.2.4 The 'display' property)
- inline-block
- This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.
- ブロック要素のように width、height、上下の padding と margin を指定できる box を作る
- img 要素 (置換インライン要素) ように行内に流し込むことができる
- 中身は block が指定されたときと同様に表示される
- 外側は img 要素などの置換インライン要素と同様に表示される
- 外側はテキストや img 要素と同様 (行内にレイアウトされる)
- 内側は display:block が指定されたときと同様
- box を横に並べられる
- text-align が有効
- vertical-align が有効
実装 実際の応用例
inline-block を使ったレイアウトの例の紹介
これらのソースコードは公開します
- box を行の中に流し込むことができる (段組を実現)
- 行の高さは、同じ行の中で一番高さが高いものにあわせて拡張される
- box を横に並べられる
- text-alignでセンタリングできる
- 行内では vertical-align が有効
- vertical-align を middle や bottom に指定することで上下中央揃え、下揃えを実現できる
vertical-align :bottom を指定して行の底に揃えて配置する
まず、float で実現する方法を思い出してみる
高さが違う要素が混ざっている場合、そこで詰まって崩れてしまう
まず、float で実現する方法を思い出してみる
そのため、1 行ずつ div などでくくる必要がある
- 通常のテキストなどは行の中に並び、横幅がいっぱいになると次の行へ折り返す : demo
- これと同様に inline-block は横幅がいっぱいになると自動で次の行を作り出し折り返す
- 高さが違う box が並んでいる複数の行を作ることができる
実装 実際に inline-block 使う方法
現在のメジャーな Web ブラウザではほぼ使うことができる
- IE 5 以降なら特殊な方法で扱うことができる
- Firefox 2 以前のバージョンでも -moz-inline-box で代用できる
div.sample {
width: 300px;
display: inline-block;
}
を指定する。
IE 5 以上、7 以下のためのコードを追記する
div.sample {
width: 300px;
display: inline-block;
/display: inline;
/zoom: 1;
}
『/』で始まるプロパティは IE 5, 5.5, 6, 7 用の CSS ハック (IE 8 では無視される)
display : -moz-inline-box; を使用する (Mozilla 独自実装)
inline-block が指定されたときとは違うが、block が指定された要素を噛ませることで解決できる
display: -moz-inline-box; は display: inline-block; の前に追記する
div.sample {
border: 1px solid #999;
width: 300px;
display: -moz-inline-box;
display: inline-block;
}
div.sample > div{
width:300px;
display:block;
}
display:block と最大の横幅が指定された要素を噛ませる
<div class="sample"><div>内容</div></div>
<div class="sample"><div>内容</div></div>
CSS のソースコード
div.sample {
border: 1px solid #999;
width: 300px;
display: -moz-inline-box;
display: inline-block;
/display: inline;
/zoom: 1;
}
div.sample > div{
width:300px;
display:block;
}
HTML のソースコード
<div class="sample"><div>内容</div></div>
メジャーな Web ブラウザ (IE 6, 7, Firefox 2, 3, Safari 2, 3, Opera 9.2, 9.5) で inline-block の実現が可能
HTML のソースコード上ではスペースや改行をつけない (Firefox 2, Opera 対策)
Firefox 2 用に気をつけること
-moz-inline-box; の中にtable を入れない : demo
- inline-block を使えば、いろいろなレイアウトが可能になる
- 現状のメジャーな Web ブラウザで inline-block を扱うことができる
- どうしても inline-block ではないと実現できないような箇所に対して使用する
- CSS 2.1 で定義されているもので、CSS 3 ほど遠くない技術。Web ブラウザの対応ももうすぐ !!
- 仕様を読むのも大切だけど Web ブラウザのレンダリングの仕組みやクセ、独自実装も知っておくといい