「スマホ対応もお願いします。」

その一言で、全国のWeb制作者は静かに深呼吸をした。

Webはパソコンだけのものだった

今では当たり前になったスマートフォン。

しかし、かつてWebサイトは「パソコンで見るもの」でした。

画面幅は決まっている。

レイアウトも決まっている。

横幅960px。

そんなサイトが数多く存在していました。

誰も困っていませんでした。

あの日までは。

スマートフォンという革命

ある日。

「最近、スマホで見る人が増えてきました。」

「スマホでも見られるようにできますか？」

その一言から、新しい時代が始まります。

画面幅320px。

375px。

414px。

768px。

今まで一つだった世界が、

突然、何十種類もの画面幅へ分裂したのです。

最初は別サイトだった

当時は今のようなレスポンシブデザインが一般的ではありませんでした。

example.com

とは別に、

m.example.com

というスマートフォン専用サイトを作ることも珍しくありませんでした。

PCサイトを修正する。

スマホサイトも修正する。

更新は二倍。

管理も二倍。

開発者は静かに笑いました。

「……一つにしたい。」

media queryとの出会い

やがて、新しい技術が広まります。

@media screen and (max-width: 640px){
 }

「画面幅によってCSSを変えられる。」

革命でした。

PCでは横並び。

スマホでは縦並び。

同じHTMLなのに、見た目だけを切り替えられる。

未来が見えました。

終わらない画面幅

しかし、現実は甘くありません。

320px。

360px。

375px。

390px。

414px。

768px。

1024px。

「どこで切り替える？」

開発者は悩みます。

640px。

768px。

980px。

1210px。

会社ごとに、

案件ごとに、

新しい境界線が生まれていきました。

新しい仕事

レスポンシブ対応が一般的になると、

開発者の仕事も変わりました。

「PCでは大丈夫です。」

では終わりません。

Chrome。

Firefox。

Safari。

Edge。

スマートフォン。

タブレット。

縦向き。

横向き。

確認する画面は何倍にも増えました。

そして、1px

「Macでは問題ありません。」

「Windowsで1pxはみ出しています。」

「……。」

この頃から、

Web制作の敵はブラウザだけではなくなります。

小数ピクセルという新たな存在が静かに姿を現し始めていました。

あとがき

今ではレスポンシブデザインは当たり前です。

新しくサイトを作るとき、「スマホ対応しますか？」とは聞かれません。

対応していて当たり前。

そんな時代になりました。

でも、その当たり前の裏側には、数え切れないほどの試行錯誤がありました。

PCしかなかった世界から、どんな画面でも快適に見られる世界へ。

それはWeb制作史の中でも、最も大きな革命の一つだったのかもしれません。

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

そこには、レスポンシブ革命があります。

次回予告
第七世代　Flexbox革命

長きにわたりWeb制作を支え続けたfloat。

その時代が、ついに終わりを迎える。

display: flex;

たった一行で、

歴史は大きく動き始めた。