display:inline-blockがけっこう便利。だけど…

2009/04/06

カテゴリ：: CSS

タグ：: CSS; inline-block

inline-block

小さいブロック要素とかを横並びにさせたいときとか、inline-block使うと便利なんですよね。幅も高さも指定できてしまう要素にみせることができるinline要素になるというのがとても便利。わざわざblock要素にして、floatさせて横並びにさせる、そして並ぶ要素を終わらせたあとはclearをして…なんてことをしていると、指定が多くなってしまうんですよね。ですが、inline-blockを使うと、そんなことしなくても簡単に並べちゃうってのはいいですよね。

しかし、そのinline-blockは、IEやFirefox2などのオールドブラウザだとうまく動作しないことの方が多い。今では使えるようになっているブラウザが多いのですが、IEや以前のブラウザを気にすると、使いどころが少なかったりもする。

inline-block

inline-blockのオールドブラウザやIEについての動作は、参考としているサイトを見てもらいたい。

IE 6, IE 7 の inline-block 考察

スタイルシートをめぐる冒険: inline-blockの奇妙な世界

使えたり使えなかったり…いろいろ考えるよりblock指定してfloatさせて、最後にclear入れたほうが楽なのかも…なんて思ってしまいます。事実、オールドブラウザ対応にさせるなら、そのほうが明らかに作業工程が少なく早くなると思う。崩れる原因を作ってしまうよりも、できるだけ原因にならないCSSを指定したほうが、早いですものね。

inline-blockが便利だと思う時

例えば下記のようなソースの場合

■サンプルHTML

<ul>
  <li><a href="#">１</a></li>
  <li><a href="#">２</a></li>
  <li><a href="#">３</a></li>
  <li><a href="#">４</a></li>
  <li><a href="#">５</a></li>
  <li><a href="#">６</a></li>
  <li><a href="#">７</a></li>
</ul>

■サンプルCSS

ul{
	margin: 0;
	padding: 20px 0;
	text-align: center;
}
li{
	display: inline-block;
	margin: 0;
	padding: 5px 10px;
	border: 1px solid #cccccc;
	list-style-tyle: none;
}