Takazudo Clipping*

inline-blockはもう使える（だいたい）

inline-blockとは、まさに、その名の通り、インライン要素とブロック要素の中間的なdisplayプロパティの値です。display:inline-blockが指定された要素は、文中にブロック要素をボコっと突っ込んだような形で描画されます。前後で改行されないブロック要素のような存在です。Firefox3で正式にサポートされたみたいです。使用に関して問題となるのは、これに対応していないIE7,IE6とFirefox2なのですが、どうにか頑張ると、ほぼ同様の効果を得ることができます。最近使う機会があったので、ソース解説と併せて紹介します。

まず、inline-blockは、以下のような点が便利です。

幅や高さを持てる

インライン要素ではwidth,height,縦方向のmargin,paddingが無視されますが、inline-blockだとこれが可能になります。

連続するブロック要素を中央寄せにしたような効果を得られる

divdivdivをfloat:left,left,left...もしくはright,right,right...とすると、右か左にそろえられますが、真ん中に揃えることはできません。（ですよね…？） tableでtd,td,tdと囲んで、tableを中央寄せにすれば、中央寄せは可能ですが、内容がページ幅を超えると、飛び出てしまいますし、表でもないのにtableは使いたくありません。こういった表現は、inline-blockを使えば簡単にできます。

へー便利なの？かな？で、何に使うんだろう具体的に…。と感じる方が多いのではないでしょうか。自分は最近、ページ送りのエレメントを組む時に使用しました。以下が、そのサンプルとソースコードです。

inline-block pagination （サンプル + ソース解説）

Firefox2/3, IE6/7/8beta2, Safari3, Opera9.5あたりで正常に描画されていることを確認。

ここで、inline-blockを使わなければならなかった理由は、上記で挙げた通り、高さと最小限の幅を持たせるため、連続するブロック要素を中央に寄せるため、量が増えたら自動的に折り返すようにするためです。各数字部分がインライン要素であれば高さを持てませんし、tableで中央寄せにしていては、２番目のように、ページ送りが多くなってしまうと、ページ幅を突き破ってしまいます。

ページ送りの各数字のa要素には、min-widthが指定されており、2桁になった状態の幅に揃えられています。この指定は、これらがインライン要素である場合、無視されてしまいます。（※ Firefox2だと、このmin-widthが効いてませんでした。Firefox2用には、独自拡張の-moz-inline-boxというディスプレイプロパティの値を使用しており、完全実装ではないので仕方ないかも？）

ここで使っているIE6,IE7に対するCSS Hackについては、100%安全なCSS Hack for IE をご参照ください。

最初に挙げた、IE6,IE7, Firefox2でどうやってinline-blockを再現するのかは、上記サンプル内にて書きましたのでご参照ください。また、下記ページを参考にしました。

This article is about... css , inline-block