CSSレイアウトを学ぶ
ブラウザの幅に合わせてボックスをいい感じに均等に配置する、グリッドレイアウトを作る事ができる。これは、昔からfloatを使って実現してきた。だが、今はinline-blockを使って簡単に実現できる。inline-block要素はinline要素のようなものだ。だが、widthとheightを持つ事ができるという点で異なる。両方のやり方の例を見てみよう。
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
私はfloatされているよ!
</div>私はfloatされているよ!
</div>私はfloatされているよ!
</div>私はfloatされているよ!
</div>私はfloatされているよ!
</div>私はfloatされているよ!
</div>私はfloatされているよ!
</div>私はfloatされているよ!
</div>私はfloatされているよ!
</div>私はfloatされているよ!
</div>私はfloatされているよ!
</div>私はclearを使っている。だから、上のボックス達に続いてfloatされたりしない。
</div>
同様の事を、displayプロパティの値をinline-blockにすることで実現できる。
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
私は、インラインブロックです!
</div>私は、インラインブロックです!
</div>私は、インラインブロックです!
</div>私は、インラインブロックです!
</div>私は、インラインブロックです!
</div>私は、インラインブロックです!
</div>私は、インラインブロックです!
</div>私は、インラインブロックです!
</div>私は、インラインブロックです!
</div>私は、インラインブロックです!
</div>
私はclearを使う必要はない。最高だね!
inline-blockのIE6とIE7のサポートには、さらに手間をかける必要がある。inline-blockについて、hasLayoutと結びつけて話す人が時々いるだろう。だが、その話題は古いブラウザのサポートが必要な場合に限られるという事だけ知っておいてくれれば十分だ。興味があれば、IE6とIE7のサポートについての前記のリンクをたどってくれ。ともかく、続けよう。
