『作って学ぶ HTML＆CSSモダンコーディング』について

今回の書籍『作って学ぶ　HTML＆CSSモダンコーディング』は、「最近のレスポンシブWebデザインの扱いって、どんな感じなんだろう？」という疑問がきっかけでした。

文字通り、最近の扱いが気になったのもありますし、ネットなどで「レスポンシブが苦手だ」という話をよく見かけたからです。

エビスコムの本での最近の扱いを振り返ってみると、レスポンシブだけを取り上げて解説することはなくなりました。CSSの設定の一部として扱えるようになったためです。ネット上でどんな感じで扱われているかを確認してみても、大きな違いは感じません。

ただ、レスポンシブが登場したばかりの頃はそうではありませんでした。当時は Flexbox もなく、Float ベースのレイアウトの時代でした。Float には続くボックスを左右に回り込ませるという機能しかありませんでしたので、レスポンシブの結果を考慮して、ボックスの並びを考える必要がありました。
つまり、HTML と CSS が互いに干渉してしまい、CSS の設定として割り切ることができなかったのです。実現可能なレイアウトに制限があること、レイアウトとセマンティクスのバランスなど… 気にしなければならなかったことが多かったのを思い出します。

そして、Flexbox が使われるようになり、ボックスのコントロールの自由度が上がったことで HTML と CSS の相互の干渉もなくなり、CSS の機能としてレスポンシブを扱えるようになりました。ただ、何かを忘れているような気が…。

そこで、改めて現在のレスポンシブWebデザインを確認してみることにします。

現在のレスポンシブWebデザインとは？

まずは、デザインの方から見てみます。

• モバイルファーストが定着した結果、Webページの構造もワンカラムが主流になる
• PCメインの時代のスペースの有効活用方法として生まれたマルチカラムも、ワンカラムの上に構成するスタイルへと変化
• コーディングのスタイルもワンカラムを意識したものへと変化

という感じでしょうか。
やっと落ち着くところへたどり着いたという感じです。

続いて、レスポンシブWebデザインの実現方法です。
基本的な流れとしては、

• メディアクエリ @media を使ったブレークポイントによる CSS の切り替え
• デバイスの多様化に合わせて、ブレークポイントが増加
• デバイスの多様化がさらに進み、ブレークポイントの増加による対応から、ブレークポイントの間を補間する形で特定の要素を変化させる

といった感じで進化してきたように思います。

ただ、レスポンシブWebデザインが登場した頃から考えられていたもう一つの流れ、「ブレークポイントを必要としないレスポンシブ」が CSS の進化によって実用的になってきます。その中心となる存在が

• Flexbox
• CSS Grid

です。

さらに、IE（Internet Explorer）のサポート終了が見えたことで多くの HTML&CSS が自由に使えるようになり、こちらの流れも加速することになります。

CSSの進化とIEのサポート終了で見えてきた「これからのレスポンシブWebデザイン」

改めて確認してみると、できることが増え、選択肢が増え、自由が広がったことでなかなかすごいことになっています。これは、しっかりとまとめ直したほうが良いのではないか？

といった流れから、IE を気にする必要がなくなったこのタイミングで、レスポンシブWebデザインをマスター（再確認）するための本として出来上がったのが、今回の『作って学ぶ　HTML＆CSSモダンコーディング』です。

本書では、これからのレスポンシブWebデザインを構成する上で必要なことをマスターできるように構成しています。

メインのルートとしては、ステップ・バイ・ステップでサンプルページを作成していきます。

サンプルはページを構成するパーツ単位で作成していきます。その際、パーツを実現するための CSS を検討し、メインのルートで採用したものばかりでなく、候補として上がったものも詳しく解説し、状況に応じて選択できる構成になっています。

さらに、ページのコードにはようやく使えるようになった便利な HTML&CSS の数々を採用しています。

メディアクエリやマージンなどの設定も最小限で済み、驚くほどシンプルなコードになっています。そのおかげで、盛り込みたい内容も320ページにすべて盛り込みきりました！

レスポンシブWebデザインに関する引き出しを増やすことにこだわった１冊となっていますので、これからのWeb制作に役立てていただければと思います。