PRESSMAN*Tech

HTML5, CSS3からWordPress, AWS, Elasticsearchまで。プレスマンのスタッフが綴る技術ブログ。

『float』ではなく『display: inline-block;』を使うという選択

CSS

通常、ブロック要素を横並びにしたいときは『float』を使うことが多いと思います。しかしfloatには

  • clearする必要がある
  • IE6ではfloatと同方向のpadding、marginが2倍になってしまう(バグ)
  • 高さが異なるボックスがあるとその後のレイアウトが崩れる

といった面倒がつきまといますよね。そんな時は『display: inline-block;』の出番です。block要素のように高さや縦方向のpadding、marginが指定できる上に、inline要素のように横並びができ、しかも高さが異なるボックスがあってもレイアウトが崩れません。


それでは実際に『display: inline-block;』を使った例を見てみましょう。

html

<div class="ib-box">ボックス1</div>
<div class="ib-box">ボックス2</div>
<div class="ib-box" style="height: 150px;">ボックス3</div>
<div class="ib-box">ボックス4</div>
<div class="ib-box">ボックス5</div>
<div class="ib-box">ボックス6</div>
<div class="ib-box">ボックス7</div>
<div class="ib-box">ボックス8</div>

css

.ib-box{
display: inline-block;
width: 120px;
height: 100px;
margin: 10px;
}

単純にdivを並べ、これらに『display: inline-block;』を指定しました。ここではレイアウトを見るためにボックス3の高さを敢えて変えています。

ボックス1
ボックス2
ボックス3
ボックス4
ボックス5
ボックス6
ボックス7
ボックス8

いかがでしょうか?ご覧のようにfloatを使わずとも、高さを指定したボックスの横並びが実現できました。さらに高さが異なるボックス3以降のレイアウトも崩れていないのが分かると思います。

しかし『display: inline-block;』はIE6、IE7では使うことができません。
そこでIE6、IE7用にハックを指定してあげる必要があります。

css

.ib-box{
display: inline-block;
/display: inline;  /* IE用ハック */
/zoom: 1;  /* IE用ハック */
width: 120px;
height: 100px;
margin: 10px;
}

とりあえずdisplayをinlineで指定して、zoomでhaslayoutをtrueにする感じです。hasLayoutとはそのオブジェクトがレイアウトを持つかどうかの読み取り専用のプロパティです。zoomを指定することでhasLayoutをtrueにすることができ、それによってheightも指定できるようになるというわけですね。個人的には、CMSを使ってのECサイト作成やギャラリーサイトの構築なんかでよく使ってます。任意の場所でclearかけるのが難しいことが多いので。シンプルにマークアップしたいなって方は是非試してみてください。

それでは。

投稿者:Itoh
このエントリーをはてなブックマークに追加

私たちと一緒に働きませんか?

株式会社プレスマンでは、コーディングが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。まずは募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。

プレスマンの採用情報を見る →

コメントは受け付けていません。

▲ 先頭へ戻る