書籍などに紹介されていない display : inline-block について
初版 : 2008 年 7 月 5 日
アップデート : 2008 年 10 月 16 日
小山田 晃浩
株式会社メタフェイズ
矢印キーの左右でスライドを切り替えることができます。
-
SwapSkills は Web ディレクター・クリエイターのための勉強会です。
- 扱う内容は「XHTML」「CSS」「写真」「ウェブマスターツール」「Dreamwaver の使い方」「デザイン」「ディレクション」などです。
- このスライドは、2008 / 7 / 5 に開催されたものです。
主催：『allWeb クリエイター塾』
allWeb クリエイター塾では 11 月に web directions east を開催予定です。
- 前提
- 仕様/仕組み
- inline-block の仕様 / 仕組み
- inline-block のどこがいいのか
- 実装
- 応用例 1 : float : center ?
- 応用例 2 : 上下中央揃え、下揃えの段組
- 応用例 3 : 高さが違う box が並ぶリスト
- 実際に inline-block 使う方法
- まとめ
- 行は、テキストや画像などのインライン要素によって自動で作り出される
(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 要素や input 要素, textarea 要素などといった置換インライン要素のように行内に流し込むことができる
- inline-block の中身は block が指定されたときと同様に表示される
- inline-block の外見は img 要素などの置換インライン要素と同様に表示される
- 外身はテキストや img 要素と同様 (行内にレイアウトされる)
- 中身は display:block が指定されたときと同様
- box を横に並べられる
- text-align が有効
- vertical-align が有効
inline-block を使ったレイアウトの例の紹介
これらのソースコードは公開します
- 行の中に流し込むことができるので段組を実現が可能
- 行の高さは、同じ行の中で一番高さが高いものにあわせて拡張される
- vertical-align は 行内の縦位置をどこに揃えるかを決めることのできる CSS のプロパティ
- 行内では vertical-align が有効
- vertical-align を middle または bottom に指定することで inline-block で作ったカラムの上下中央揃え、下揃えを実現できる
vertical-align :middle を指定して行の中央に揃えて配置する
vertical-align :bottom を指定して行の底に揃えて配置する
まず、float で実現する方法を思い出してみる
高さが違う要素が混ざっている場合、そこで詰まって崩れてしまう
そのため、1 行ずつ div などでくくる必要がある
- 通常のテキストなどは行の中に並び、横幅がいっぱいになると次の行へ折り返す : demo
- これと同様に inline-block は横幅がいっぱいになると自動で次の行を作り出し折り返す
- 高さが違う box が並んでいる複数の行を作ることができる
現在のメジャーな 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 では無視される)
Mozilla 系Webブラウザに独自実装されている display プロパティの値 -moz-inline-box を使用する
-moz-inline-box が指定された要素の中身の挙動は 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>
本来は必要ないが、Firefox 2 以前のバージョンのために余分なマークアップをする
Firefox と同じく HTML のソースコード上ではスペースや改行をつけないようにする
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;
}
<div class="sample"><div>内容</div></div>
メジャーな Web ブラウザ (IE 6, 7, Firefox 2, 3, Safari 2, 3, Opera 9.2, 9.5) で inline-block の実現が可能
-moz-inline-box; の中にtable を入れない-moz-inline-box; の中では互換モードみたいになる
- inline-block を使えば、いろいろなレイアウトが可能になる
- 現状のメジャーな Web ブラウザで inline-block を扱うことができる
- どうしても inline-block ではないと実現できないような箇所に対して使用する
- CSS 2.1 で定義されているもので、CSS 3 ほど遠くない技術。Web ブラウザの対応ももうすぐ !!
- 仕様を読むのも大切だけど Web ブラウザのレンダリングの仕組みやクセ、独自実装も知っておくといい
Internet Explorer 8 beta 2
Firefox 3
Safari 3.1
Opera 9.5
