4. 今こそ見直すclearfix

floatプロパティーを用いたとき、回り込み解除の為のclearfixが必要です。2011年4月21日に発表されたmicro clearfixは、IE 6以上のブラウザーを対象に作成されたものでした。

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

▲ 当時シェアが一定数あったIE 6以上向けのclearfix

clearfixのコードはブラウザーの進化と共に短くなり、現在ではシェアの少ないIE 7以下を対象外とした次のclearfixが使われています（参考記事「The very latest new new way to do “clearfix”」）。

.clearfix:after {
    content: "";
    display: block;    /* または display:table; */
    clear: both;
}

実は、 clearfixはoverflowプロパティーを用いて更に短く記述可能です。overflowプロパティーでvisible以外を指定すると、親ボックスの高さが算出できるためです（参考記事「floatを解除する手法のclearfix と 次世代のレイアウトの話｜Web Design KOJIKA17」）。

.clearfix {
    overflow: hidden;
}

子要素が親要素をはみ出すようなレイアウトの場合、子要素が見切れてしまう点を注意しつつ、有効に活用しましょう。

5. これからのボックスレイアウトにはfloatよりもFlexboxを

ボックスの横並びにfloatプロパティーは必須でしたが、いくつかのデメリットがあります。九州大学ウェブページのフッター部分を例に、3つ紹介します。

1点目はclearfixが多くなることです。次に示すのはclearfix指定箇所ですが、floatプロパティーを用いた数だけclearfixが指定されています。

161219_webstndard_float_clearfix

2点目は縦方向レイアウトの煩雑さです。floatプロパティーは要素を右か左へ回り込みさせる為の機能であり、縦方向のレイアウトの為の機能はありません。したがって、縦中央揃えのようなレイアウトをしたい場合は、margin-top等を用いて位置を調整する必要があります。

161219_webstndard_float_centering

3点目は、横並びした要素の高さが揃わないことです。下図のようなカード型のレイアウトを行いたい場合、JavaScriptを使って高さを強制的に変更する必要があります。

161219_webstndard_float_height

これらのデメリットは、CSS3のボックスレイアウト機能「Flexbox」で解決できます。

Flexboxでボックス配置の常識は変わる

Flexboxを用いると、floatプロパティーより簡単なコードでボックスのレイアウトが可能です。前述のfloatプロパティーの3つのデメリットと見比べてみましょう。

1点目に、Flexboxではfloatプロパティー使用時のようにclearfix指定が不要なため、コード量が短くなります。

.selector {
    display: flex;
}

2点目に、Flexboxでは縦方向（正確には垂直軸方向）のレイアウトの為の機能があります。align-itemsプロパティーを使うと、縦方向の上寄せ・中央寄せ・下寄せ等ができます。

161219_webstndard_align-item

3点目に、Flexboxでは横並びした時にデフォルトで要素の高さが揃うため、JavaScriptによる高さ調整は不要です。前述のaligin-itemsプロパティーの初期値がstretch、つまり親の高さまでボックスが伸びる設定になっているからです。

161219_webstndard_flexbox_height

今後は積極的にFlexboxを用いて、効率的にボックスレイアウトを行うのが望ましいと言えます。Flexboxは記事「Webデザイナー初心者でも始められるFlexbox入門」で参照ください。

6. ベンダープレフィックスの悩みはAutoprefixerで解決する

昨今はブラウザーのCSS3対応が進み、ベンダープレフィックス（-webkit-や-moz-といったCSSに付与する接頭辞のこと）が不要なCSSプロパティーが増えています。例えば、CSS3で角丸を実現するborder-radiusプロパティーは、現在のブラウザーシェアから見てベンダープレフィックスは不要（Can I use）ですが、2016年に作られたウェブページにおいても指定されているコードを多く見かけます。

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

▲ -webkit-、-moz-の指定は、現在のブラウザシェアから言えば不要

ブラウザーのシェアやCSSの実装状況に応じて適切な量のベンダープレフィックスを設定するには、「Autoprefixer」を使うと便利です。

Autoprefixerでベンダープレフィックスを効率的に設定する

Autoprefixerとは、指定したブラウザーに応じたベンダープレフィックスを自動で付与して出力できるPostCSSのツール。コーダーはベンダープレフィックスの付与に悩む必要がなくなりコード量も減ることで、効率的なCSSコーディングが行えます。

161219_webstndard_autoprefixer

AutoprefixerはGulpのようなビルドツールと共に使うのが便利です。初学者でも簡単に導入できるように、いくつかの設定を行うだけでAutoprefixerが使えるタスクを作成しましたので、記事「Webデザイナー初心者でも始められるFlexbox入門」の3ページ目を参照ください。

古きを捨て新しきを得て、ハッピーエンドエンジニアになろう

ウェブ技術は進化が早く、キャッチアップするのが大変だという声をよく耳にします。しかし、新しい技術はエンドユーザーにもクリエイターにもメリットをもたらします。今のコーディング技術が正しいのか？ を常に疑いながら、最新の技術を研究し続けましょう。

筆者のTwitterアカウントでも引き続きウェブの最新情報を発信していきますので、是非チェックしてください。