フロート（Float）から
フレキシブルボックス（Flexbox）へ
Webページのレイアウトでは、長い間CSSのフロート（Float）を使ってきました。ただし、Floatの本来の役割は、ボックスの横に後続のテキストコンテンツを流し込むという単純なものです。これをハック的な形で利用し、さまざまな機能を組み合わせて複雑なレイアウトを実現してきたのがこれまでのWebページ制作でした。レイアウトが崩れるのを防ぐclearfix（クリアフィックス）もそんな中で編み出されたテクニックの１つです。
ところが、スマホの登場により、閲覧環境に合わせてレイアウトを変化させる「レスポンシブ」にも対応しなければならなくなります。
「１つのソースで多様な閲覧環境に対応する」というレスポンシブの思想そのものはWebに当初から備わったものですが、Floatでそこまで対応することは考えていなかったでしょう。そのため、ただでさえハック的な形で利用していたものを、さらに複雑な形で利用することになってしまいました。
そんなところに登場したのが、CSSのフレキシブルボックス（Flexbox）です。これまでにFloatで記述してきた設定は、よりシンプルなFlexboxの設定に置き換えることができます。Flexboxを使うことで、今までのハック的なテクニックもいらなくなりますし、レスポンシブへの対応も幅が広がります。
これまでのFloatによるWebページ制作が最終的に行き着くところ、収まるべき形になったものが「フレキシブルボックス（Flexbox）」と考えるとわかりやすいと思います。IE11を含めた主要ブラウザが対応していますので、そろそろFloatをレイアウトのコントロールに使うのはやめてもよいのではないでしょうか。
『フレキシブルボックスで作るHTML5&CSS3レッスンブック』ではフレキシブルボックスを使ったページ制作について、モバイルファーストで、レスポンシブまで含めてステップ・バイ・ステップで解説していますので、これまでWeb制作に従事してきた方はもちろん、
- これからWeb制作をはじめる
- これからHTMLやCSSを覚える
- 従来型の（フロートベースの）最新の制作ノウハウを習得したい
といった場合に、参考にしていただければと思います。
ボックスの構造を確認しながらページ制作を進める
フレキシブルボックス（Flexbox）を使ったレイアウトは、フロート（Float）によるレイアウトの延長線上にありますので、ボックスの相互の位置関係でレイアウトをコントロールすることになります。
そのため、レイアウトを進めていくと、ボックスがどのような構造になっているのか、相互の位置関係がどのボックスのマージンやパディングで調整されているのか、といったことがわかりにくくなっていきます。
このようなときに便利なのが、ブラウザに標準で装備されている開発ツール（デベロッパーツール）です。開発ツールを利用すると、ボックスの構造や位置関係はもちろん、どのCSSでどのように設定されているのかも簡単に確認することができ、どこを調整すればよいのかがすぐにわかります。
特に、Firefoxの開発ツールではフレキシブルボックスの構造までわかりやすく確認できるようになっていますので、おすすめです。『フレキシブルボックスで作るHTML5&CSS3レッスンブック』でも、Firefoxをメインブラウザとして使用し、必要に応じて開発ツールを活用していますので、参考にしてください。
