『作って学ぶHTML&CSSモダンコーディング』からモダンな制作ステップを学んだ話

書籍『作って学ぶHTML&CSSモダンコーディング』を読み終えました（以前一度読んでいたのですが、再読したのでブログにしました）。感想としては、実務ではまだ使ったことのない技術が満載で、学びが多い本でした。

本書の対象は、モバイルファーストでのモダンなコーディングの経験がない方/浅い方でしょうか。対応ブラウザは本書執筆時の各モダンブラウザ最新バージョンということで、IEには非対応です。clamp関数が何度か出てきますが、Safariで効かない際の対応方法は書かれているので、実用に耐えうる内容だと思います。

全体の流れとして、トップページと下層1ページのマークアップをしながら、どのようなCSSが最適かを探っていきます。
その際に、Flexboxでの調整とCSS Gridでの調整どちらが適しているか、どのような違いがあるかも記載されているのがポイント高いです。

例えば、「タイル状に並べるレイアウト」であれば、CSS Gridで設定するケース、Flexboxでは「gapで調整する方法」「justify-contentで調整する方法」「アイテムの横幅に余白を含めて調整する方法」があり、アイテム数を変える際の陥りやすい点なども教えてくれます。

個人的に一番有益だったのは、font-sizeをclampで指定する時の計算方法ですね。実務ではまだ使っていませんが、個人のサイトではこの指定をするようになりました。

巻末にはCSS Gridのリファレンスもあり、さらっと読み返すのに便利です。ただ、Gridをまったく触ったことのない初学者さんにはちょっと難しく感じるかもしれません。別途Gridの基礎を学んでからの方がスムーズに進められると思います。

CSS Gridを基礎から学ぶにはWeb上の情報でも十分ですが、私は『CSS グリッドレイアウト デザインブック』で学びました。
雑誌やフライヤー風のレイアウトをCSS Gridを使いながら制作していきます。作例がとても良いので、ワクワクできる本です。