ソウマクリップ

トップ  »  Web制作,Webデザイン  »  inline-blockに興味津々。

書籍などに紹介されていない display : inline-blockについて

このページによると

• 行は、テキストや画像などのインライン要素によって自動で作り出される(1行ごとに div などでマークアップしなくても自動でできる)
• 行の高さは、行の中で高さが一番高いもので決まる
• 横幅がいっぱいになると折り返して次の行をつくる
• 行内では、vertical-align が有効
• 行内では、text-align が有効

とあります。(詳しいソースは確認してみてください)。

私は、floatを使いboxを横並びにさせる際、高さが違うboxが混ざっていると、親要素の幅で詰まって崩れてしまうので、1行ずつdivなどでくくって解決させていました。

崩れています。

divでくくって解決。(改行のセンスがないの、は笑って許してください)。

あまり制作の現場で高さの違うboxをレイアウトするデザイナーはいないので、あえて使うようなシーンに巡り会ったことはないのですが、SNSサイトなどで、多数の人がサイズの違う画像を共有する場合などでは向いているプロパティなのかもしれません。

また、せっかくメジャーなブラウザも対応してきたコトですのでイロイロとアイディアが浮かんできました。これを機に勉強をして実装してみたいなと思いました。

inline-blockで解決。

ただ、好みもあると思いますが、実際に使い込んで身体にシミ込まないとダメすね。独自実装の勉強も大事なんですね。

最後に今回inline-blockについて、とても参考になったサイトを紹介します。

ヨモツネットの小山田晃浩さん

norisfactoryさんinline-blockの奇妙な世界