「横だけでは足りなかった。」

「Web制作は、ついに二次元を手に入れた。」

Flexは革命だった

Flexboxは、多くのWeb制作者を救いました。

横並び。

上下中央。

高さ揃え。

floatとclearfixから解放され、Web制作は確かに楽になりました。

しかし、一つだけ残っていた課題があります。

ページ全体のレイアウトです。

レイアウトは設計図になる

Flexは一方向のレイアウトが得意でした。

でも、

ヘッダー。

サイドバー。

メインコンテンツ。

フッター。

複雑なページになると、Flexを何重にも組み合わせる必要がありました。

そんな時代に現れたのが、

display: grid;

でした。

「……設計図だ。」

初めてGridを書いた開発者は思いました。

「これは横並びじゃない。」

「設計図そのものだ。」

 display:grid;
 grid-template-columns: 300px 1fr;
 grid-template-rows: auto 1fr auto;

画面を更新する。

「……。」

「レイアウトを書いている。」

そんな感覚になりました。

二次元という自由

Flexは横か縦。

Gridは、横と縦を同時に考える。

この違いはとても大きなものでした。

どこに何を配置するのか。

どの列を何pxにするのか。

余白はどれくらいか。

まるで建築家が設計図を描くように、レイアウトを組み立てられるようになりました。

「もうmarginで調整しなくていい？」

昔。

「あと10px右。」

「もう5px下。」

margin。

padding。

position。

微調整。

そんな日々でした。

Gridは言いました。

「ここに置けばいい。」

Web制作者。

「……。」

「もっと早く言って。」

それでもFlexは消えなかった

革命が起きても、Flexは終わりませんでした。

ページ全体はGrid。

カード一覧はFlex。

ナビゲーションはFlex。

用途によって使い分ける。

それが新しいWeb制作になっていきます。

Flexは王ではなくなりました。

しかし、最も頼れる将軍として、今も第一線で活躍しています。

古代文明は今も生きている

とはいえ、

保守案件では今も出会います。

 float:left;

.clearfix

zoom:1;

display:flex;

そして、

display:grid;

一つのCSSファイルの中に、二十年分の歴史が並んでいる。

そんな案件も珍しくありません。

あとがき

Gridが登場したことで、Web制作は「レイアウトを調整する仕事」から、「レイアウトを設計する仕事」へと変わりました。

でも、その便利さは、これまで積み重ねられてきた数え切れない試行錯誤の上にあります。

table。

float。

clearfix。

IE。

レスポンシブ。

Flex。

そしてGrid。

どれ一つ欠けても、今のWeb制作はありません。

だから昔のコードを見つけても、笑わないでください。

そこには、誰かがその時代の最善を尽くした証があります。

昔のコードを笑わないでください。

そこには、Grid連邦の成立があります。

最終章　エピローグ

技術は進化します。

ブラウザも変わります。

数年後には、Gridも「昔の技術」と呼ばれる日が来るのかもしれません。

それでも変わらないものがあります。

誰かが納期と戦い、

仕様変更と戦い、

ブラウザと戦い、

夜遅くまでコードを書き続けたこと。

その積み重ねが、今のWebを作っています。

だから私は、古いCSSを見るたびに思うのです。

CSSにバグはありません。

そこには歴史があります。