【連載】CPIエバンジェリストのお悩み相談室②
これからはFlexboxの時代!?
思わずテンションが上がってしまうCSS3のレイアウトモジュール「Flexbox」（前編）
Webサイトのレイアウトは、これまで「float」を使いコーディングしていました。もともと「float」は、名前の通り指定した要素を浮遊（float）させて右や左へ配置させるためのプロパティのため、親要素の高さを回避して後続の要素が回り込んでしまうので、レイアウトをコーディングするには問題がありました。それを「clearfix」という裏技のようなテクニックで問題を回避してきたという経緯があります。
そんなレイアウトコーディングに苦労していた頃と比べ、昨今は、CSS3のレイアウトモジュールFlexbox（CSS Flexible Box Layout Module）が、レイアウトコーディングの主流になりつつあります。 それはなぜか？ Flexboxが注目を浴びる具体的な例を見てみましょう。
Flexboxは、2016年5月26日にW3Cによる勧告候補となり仕様が確定し、各ブラウザへの対応が進んでいます。 リファレンス：https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/（英語）
利用できるブラウザは、主要ブラウザの最新版か、 IE10+、Android 4.4+より対応しています。これまでHTMLとCSSだけで表現できなかった複雑なレイアウトも、Flexboxを使うことで、簡単に表現できるようになります。
［これまでのfloatsとclearfixの例］
これまで利用していたfloatsとclearfixを使った例として、弊社が提供するレンタルサーバー「CPI」のサイトの「目的別からプランを選ぶ」のコードをご覧ください。1行目のブロック要素＜div class=”container”＞に 横幅（900px）を指定し、各アイテムである、リスト＜li＞＜/li＞に横幅 (300px) と、回り込みを指定する float: left;を指定しています。＜ul＞
＜li＞アイテム1＜/li＞
＜li＞アイテム2＜/li＞
＜li＞アイテム3＜/li＞
＜/ul＞
＜/div＞
［Flexboxで書き直す］
このコードをFlexboxで書き直すと下記のようになります。＜div class="container"＞
＜div class="item"＞＜img＞ ＜a＞Item＜/a＞ ＜img＞＜/div＞
＜div class="item"＞＜img＞ ＜a＞Item＜/a＞ ＜img＞＜/div＞
＜div class="item"＞＜img＞ ＜a＞Item＜/a＞ ＜img＞＜/div＞
＜div class="item"＞＜img＞ ＜a＞Item＜/a＞ ＜img＞＜/div＞
＜div class="item"＞＜img＞ ＜a＞Item＜/a＞ ＜img＞＜/div＞
＜div class="item"＞＜img＞ ＜a＞Item＜/a＞ ＜img＞＜/div＞
＜/div＞
.container{
display:flex;
flex-wrap:wrap;
}
.item{
flex:1 1 300px;
/* アイテムの配置 */
display:flex;
align-items:center;
justify-content:space-between;
}
CodePen: https://codepen.io/abechiyo/pen/bqwJWK
作例でもわかるとおり、Flexboxを使うメリットは、レスポンシブ対応のレイアウトが少ないコードで表現できることです。Webサイトはさまざまなデバイスからアクセスされることが想定されるので、ボックスサイズの横幅固定はできるだけ避け、可変で制作したいところです。Flexboxを使うことで、レスポンシブに対応したレイアウトが簡単にコーディングできるようになったため、Flexboxが多く使われるようになりました。
またFlexboxを活用すると下記のようなレイアウトも簡単に実装できます。
http://codepen.io/abechiyo/pen/YZwRvx
画面幅に合わせてページネーションが伸び縮みします。さらに画面幅を縮めると特定のページ番号が消えます。
ソースコード一部引用：
http://codepen.io/iamjustaman/pen/YPLPNR
一覧ページなどで、ページ遷移するためのページング機能
◯Flexboxを使うメリット：
少ないコードで表現できる。画面幅に合わせて伸び縮みする。
価格リストなどの機能表
◯Flexboxを使うメリット：
各ボックスの高さを揃えたり、画面に合わせて左右幅が伸び縮みしたりします。ボックスの下揃えは、これまでJavaScriptを利用してボックスを下に揃えるか、親要素の背景画像を工夫して下揃えしているように見せるなどのテクニックが必要でした。Flexboxを使えば、JavaScriptや背景テクニックを使わなくても簡単に実現できます。
http://codepen.io/abechiyo/pen/aJdQXm
FlexboxのOrderを使い、各ボックスをドラックアンドドロップで入れ替えることができます。
ニュースサイトなどで、好きなジャンルのニュースを画面上方に配置し、さらに並べ換えた情報をcookieに保存することで、次回以降もユーザーの好きなジャンルのニュースが画面上方に表示されるなど、さまざまなシーンでの利用が可能です。
◯Flexboxを使うメリット：
各BOXの並べ替えをorder プロパティを使うことで簡単に実装することができます。
補足：
今回の内容は2016年11月25日に開催された「神戸ITフェスティバル」で、「Good bye ~~ floats and “clearfix” hacks これからはFlexboxの時代」というタイトルで講演したものです。当日使用したスライドも公開していますので、合わせてご覧ください。
URL: http://shared-blog.kddi-web.com/sandbox/flexbox-s/
［筆者プロフィール］
阿部 正幸（あべ まさゆき） | KDDIウェブコミュニケーションズ／エバンジェリスト
システム開発会社で大規模なシステム開発を経験後、Web制作会社でプログラマー兼ディレクターとして従事。その後、KDDIウェブコミュニケーションズに入社、レンタルサーバーCPIのプロダクトマネージャーに就任。ACE01、SmartReleaseをリリース後、現職の「エバンジェリスト」としてWeb制作に関する様々なイベントに登壇。Drupal（g.d.o Japan）日本コミュニティー、HTML5 funなどに所属し、OSSを世に広げる活動やWeb制作に関する情報を発信している。
