inline-block

ブラウザの幅に合わせてボックスをいい感じに均等に配置する、グリッドレイアウトを作る事ができる。これは、昔からfloatを使って実現してきた。だが、今はinline-blockを使って簡単に実現できる。inline-block要素はinline要素のようなものだ。だが、widthとheightを持つ事ができるという点で異なる。両方のやり方の例を見てみよう。

難しい方法(floatを使用)

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

私はfloatされているよ!

</div>
<div class="box">

私はfloatされているよ!

</div>
<div class="box">

私はfloatされているよ!

</div>
<div class="box">

私はfloatされているよ!

</div>
<div class="box">

私はfloatされているよ!

</div>
<div class="box">

私はfloatされているよ!

</div>
<div class="box">

私はfloatされているよ!

</div>
<div class="box">

私はfloatされているよ!

</div>
<div class="box">

私はfloatされているよ!

</div>
<div class="box">

私はfloatされているよ!

</div>
<div class="box">

私はfloatされているよ!

</div>
<div class="after-box">

私はclearを使っている。だから、上のボックス達に続いてfloatされたりしない。

</div>

簡単な方法(inline-blockを使用)

同様の事を、displayプロパティの値をinline-blockにすることで実現できる。

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box2">

私は、インラインブロックです!

</div>
<div class="box2">

私は、インラインブロックです!

</div>
<div class="box2">

私は、インラインブロックです!

</div>
<div class="box2">

私は、インラインブロックです!

</div>
<div class="box2">

私は、インラインブロックです!

</div>
<div class="box2">

私は、インラインブロックです!

</div>
<div class="box2">

私は、インラインブロックです!

</div>
<div class="box2">

私は、インラインブロックです!

</div>
<div class="box2">

私は、インラインブロックです!

</div>
<div class="box2">

私は、インラインブロックです!

</div>
<div>

私はclearを使う必要はない。最高だね!

</div>

inline-blockIE6とIE7のサポートには、さらに手間をかける必要がある。inline-blockについて、hasLayoutと結びつけて話す人が時々いるだろう。だが、その話題は古いブラウザのサポートが必要な場合に限られるという事だけ知っておいてくれれば十分だ。興味があれば、IE6とIE7のサポートについての前記のリンクをたどってくれ。ともかく、続けよう。

  • Creative Commons License