こんにちは。フロントエンドエンジニアの木下です。
HTML5が勧告された日(2014年10月28日)は自分の誕生日（ビルゲイツと一緒）だったので、何だか運命的なものを感じながら毎日HTML/CSS/JSを書いています。
アーキタイプブログではテック系の記事を書いていこうと思っています。よろしくおねがいします！
はじめに
みなさんCSSは書いていますか？
HTML/CSSのコーディングはエンジニアではなくデザイナーの領域という会社も増えていますし、そうでなくても以前より開発時にデザイナーとエンジニアが連携する場面は増えているので、コードを目にする機会は多いと思います。
今回はwebページやアプリケーションのレイアウトを組む際の手法についてのお話です。
今どきといえばフレックスボックスやグリッドレイアウト。だけどテーブルレイアウトだってまだ使われているんだよ、ということでまずはこれまでの歴史を振り返ってみようと思います。
テーブルレイアウト時代
見た目はCSS！という今となっては当たり前な認識になる前は、レイアウト組みはtable要素を使うのが普通でした。
table>table>table>table…なんていうのはざらで、だからといって誰も気にしないある意味とても平和な時代。
そもそもブラウザがCSSにまともに対応していなかったり、HTML(v4.01)自体もDtdに「loose(ゆるい)」というのがあったりめちゃくちゃ(寛容)です。
ちなみに一部で有名な阿部寛さんのサイトは、テーブルレイアウトで組まれています！
ためしに以下のデザインをテーブルで組んでみました。
See the Pen Tabel Layout on CodePen.
複雑ですね。
スマートフォンもなく、ガラケーで魔法のiらんどのキリ番を踏んでいた2000年代頭頃まで時代は続きます。
そんなテーブルレイアウトですが、今でもメルマガのレイアウト組みでは現役です。ある程度CSSで組めるようにもなっていますが、大枠はtableで組むことが多いのではないでしょうか。
フロート/ポジション時代
2000年代に入りwebサイトの重要性が増して、CMS導入やSEO対策が求められるようになり、テーブルレイアウトのみで構築していくのは難しくなりました。
アクセシビリティやメンテナンス性を考慮し、構造と見た目をわけるためCSSが主流な時代となります。
しかしブラウザの対応状況も各社ばらばらで、バグも多く「CSSハック」全盛期となります。
Internet Explorer6でfloatするとmarginが2倍になるというバグが有名で、透過pngも使えないそんなブラウザがシェア80%以上あるような状況で、バグ対処はまさにコーダーの腕の見せ所でした。
この時代は長く、ブラウザ戦争が起きたり、中盤からはjQueryが世を席巻して凝った演出もできるようになるなど、「マークアップエンジニア」界隈は盛り上がりをみせていました。
そしてこの頃レイアウトを組むのに使われていたのは主にfloatプロパティとpositionプロパティ。
大きなレイアウトを組むには本来は向いていないなと個人的には感じながら他に選択肢がない状態で、要素を天地中央にしたり、footerを常時下付けするのに四苦八苦しながらコーディングしていました。
スマートフォン対応（レスポンシブ）がなかったので、成り立っていたのかもしれないですね。
先ほどのデザインをfloat,positionで組む場合は以下のコードになります。
See the Pen Float Layout on CodePen.
See the Pen Position Layout on CodePen.
HTMLはすっきりしました。CSSも一見シンプルで問題なさそうですが、コンテンツの幅や高さが可変になると対応するのは大変です。
フレックスボックス時代
時を経て、HTML4.01,XHTML1.0/1.1の次はHTML5、そしてCSS3の時代になりました。
スマートフォン所持率が劇的に増えて、PCブラウザはInternet ExplorerよりもGoogle Chromeがシェアを獲得して、「CSSハック」は終焉したように思います。
レスポンシブ実装のコーディングになり、レイアウト専用のプロパティ、フレックスボックスが使われるようになりました。
要素の順番を表示上並び替えられることに感動したり、これまで小手先の技術で無理矢理実装していたものがすべて解決したような感覚でした。
2018年現在、レイアウト組みに一番多く使われている手法です。
フレックスボックスで先ほどのデザインを組んでみたものは以下のコードです。
天地中央にする時は便利でよく使いますね。
See the Pen Flexbox Layout on CodePen.
これからのグリッドレイアウト
フレックスボックスは画期的なプロパティで、もうこれ以上のものは必要ないのではと思うこともありますが、実は不向きなこともあります。
もともと単一行/列向けに設計されていることもあり、格子状のレイアウトや、外のボックスとのレイアウトをするにはそれらを別の要素で囲う必要があるので、全体のレイアウトを組むことは得意としていません。
そこで登場するのがグリッドレイアウト。フレックスボックスが苦手としている格子状や全体のレイアウトを得意としています。
ブラウザ側の対応が遅く、フレックスボックスよりも使えるようになるまでに時間がかかりましたがモダンブラウザはすべて対応し、Autoprefixerを使えばInternet Explorerへの対応も簡単なので、グリッドレイアウトで組まれたサイトが増えていくと思います。
おわりに
単一行/列のレイアウトはグリッドレイアウトよりもフレックスボックスの方が優位ですし、単純な回り込みはもちろんfloatを使うので、これからは本来の用途となる適したプロパティを使い分けていくことが重要ですね。
次回はグリッドレイアウトについてもっと掘り下げて、実はテーブルレイアウトに考え方が近いのでは？など、実際のコードと合わせて書いていこうと思います。
それでは！ハッピーコーディング。