THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS
inline-block

inline-block

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

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

inline-block

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

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

inline-blockが便利だと思う時

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

■サンプルHTML

<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</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;
}

■プレビュー

上記のプレビュー、モダンブラウザ(Fx3,Safari,Opera,Chrome)表示するとこうなる。

inline-blockサンプル

IE8も上記に近いものになるが、liを改行して書いているため、通常なら上記のようにliごとに隙間ができるが、IE8は隙間がない(おそらく)。

そしてIEなどで表示すると、下画像のようになる。

inline-blockサンプル

IEなどでも表示させるには、inline指定と、hasLayoutをtrueにする指定など(zoom:1;など)入れることで表示できるらしい。

いずれにせよ、inline-blockは今後便利になってくると思われます。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/116990578
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

Web情報など発信その1
Excerpt: 私も時事ネタなどの情報を発信したいと思い。。。 いろいろなブログなどからいい情報を発信したいと思いました。 特にこれから必要そうな情報や私がささった内容などを 載せたいと思います。 ■AlertF..
Weblog: キョウリツネット物語
Tracked: 2009-04-27 20:40

IEでもdisplay: inline-blockを使えるようにする一番簡単な方法
Excerpt: display: inline-block; は非常に便利ですが、IEで上手く動かないことがあります。 ブロック要素に対しては効かなかったりするようです。 ですが、以下のスタイルを指定すればdisp..
Weblog: blog
Tracked: 2010-08-22 12:37

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。