今回はWeb制作に携わる上でその能力が試される「横並び(水平配置)」のレイアウト法についてのお話です。
基本のfloat(回り込み)とその解除方法、そしてfloatを使わない代替案をご紹介します。
.wrapper div {
float: left;
}
.clear {
clear: both;
}
<div class="wrapper">
<div>Box</div>
<div>Box</div>
<br class="clear">
</div>
水平配置の基本形はこれですが、無駄なclear用タグを記述するやるせなさと、「<ul>で<li>をfloatさせたらどうclearすんの」といった不条理さが渦巻く、なんとも欠点だらけの仕様なのです。
.wrapper div {
float: left;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
<div class="wrapper clearfix">
<div>Box</div>
<div>Box</div>
</div>
そこで2004年に考案されたのがこの「Clearfix」というハック手法で、floatの仕様に辟易していたWeb制作者たちの間で爆発的に広がりました。
簡単に説明すると、
• 擬似要素の「:after」を使って要素内の最後(文末)に見えない「.」を生成する
↓
• その「.」をブロック要素にしてclearプロパティを付与する
ということなのですが、当時、初めて知った時には「めっちゃ頭よろしいやん!」と感動しました。
このClearfixは「回り込みを解除する」という目的においてはかなり万能なハックであることから、現在でも一般的に使用されています。
.wrapper {
overflow: hidden;
zoom: 1; /* 旧IE対策 */}
.wrapper div {
float: left;
}
<div class="wrapper">
<div>Box</div>
<div>Box</div>
</div>
上述の通り、Clearfixは「回り込みを解除する」という点だけに着目すればパーフェクトに近い方法ですが、個人的にfont-sizeを0としている点にやや抵抗があり、極力使わないようにしていました。
そこで新たにたどり着いたのが、このoverflowを使って親要素の高さを有効化し、あたかも解除したかのような挙動を実現するという解決法。Clearfixと同様、親要素に対して指定するものなので、<ul>であれ<dl>であれ、あらゆる状況に対応します。
場合に応じて「position: relative;」を指定する必要があったりしますが、基本的に安定した仕事をしてくれる優れものです。
.wrapper div {
display: inline-block;
}
<div class="wrapper">
<div>Box</div>
<div>Box</div>
</div>
しかし、「floatというプロパティ自体に欠点がある」という考えは根強く、私を含め、floatからの脱却を目指す制作者はたくさんいます。
IE7以下を切り捨てる前提ではありますが、代替として「display: inline-block;」を使う手法があります。昔から存在している「inline」だと、あくまでインライン要素として横並びになるため、ちょっとしたテキストのリスト等でしか使う機会がありませんでしたが、「inline-block」はブロック要素として横に並ぶため様々な装飾が可能です。
特筆すべきは、floatと違って高さがバラバラの要素を並べてもレイアウトが崩れないという点と、必ずしも親要素を必要としない点です。
※ハックでIE7以下への対応も可能ですが、個人的にそれらの旧ブラウザはいい加減に切り捨ててもOKなのではと思っています。
.wrapper {
display: table;
}
.wrapper div {
display: table-cell;
}
<div class="wrapper">
<div>Box</div>
<div>Box</div>
</div>
その昔、私がHTMLのコーディングを始めた頃、世の中のウェブサイトはまだテーブルレイアウトが主流でした。ダイアルアップ接続でインターネットを使っていた時代です。
そこからCSSが普及し、XHTMLが基本となり、「文法的に正しいマークアップ」を目指す動きが活発化し、その流れから「テーブルレイアウトは悪だ」という考えが広まりました。
それがどうでしょう、巡り巡って、この時代にテーブルレイアウトが帰って来ました(笑)。
とは言え、もちろんtableでマークアップするわけではなく、「CSS側で擬似的にtable化する」という手法なので、HTMLの記述としてはルールに沿った文法を維持できます。
特筆すべきは、何と言っても高さが流動する点とvertical-alignプロパティが有効な点です。とにかくtableのセル(td)そのまんまの特性を持っているので、そのレイアウト保持力は強力です。
近年のレスポンシブデザインが進む動きの中で、私自身もfloatに変わってこの方法を使う機会は少なくありません。
.wrapper {
display: flex;
}
<div class="wrapper">
<div>Box</div>
<div>Box</div>
</div>
これからのWebレイアウトには必要不可欠な真打ち、Flexbox(Flexible Box Layout Module)です。
基本は親要素に「display: flex;」を当てるだけで横並びの配置が可能です。
それだけなら上記4・5から大した変わり映えはありませんが、Flexboxの本領はその豊富なプロパティを組み合わせてこそ発揮することができます。
各プロパティの説明についてはグーグル先生に尋ねるとたくさんの記事を紹介してもらえますが、視覚的に挙動を確認するには下記のページがおすすめです。
Flexbox Playground
ちなみに、各ブラウザのサポート状況は下記にて確認することができます。
Can I Use
「横に並べるのならfloatっしょ」という固定観念から脱却して、フレキシブルなコーディングができるようになればWebレイアウトにおける表現力は飛躍的に上がります。
状況に応じた選択を楽しみましょう!