コーディング・プラクティスブック』は、デザインカンプと指示書に従い、Webページをコーディングしてみる実践シリーズです。自由に活用していただけるように構成してありますが、実戦的なコーディング力をつけることを目的としていますので、次のような活用方法がおすすめです。作例を読む前に、デザインカンプと指示書に従ってページ制作にチャレンジしてみる。レスポンシブも含めて一通り形にしてみる。難しかったら立ち止まる。作例を読んでみて、自分のやり方と比較してみる。難しかった部分は作例で補ってみる。作例の条件を変えてやってみるのもおすすめです。Flexbox(フレキシブルボックス)で作成してあるため、CSSグリッドで作成してみる。Polyfillありで作成し、CSSの変数(カスタムプロパティ)を使うことで作業が楽になるのを確認してみる。Polyfillなしでやると大変なことになるのを確認してみる。レスポンシブのやり方を変えてみる。etc.いろいろなやり方によってもっと簡単にできることが見えてくれば、仕事において「この方法を使ったほうがいい」といった提案もできるようになってくると思います。デザインと作例のポイントエビスコムがこれまでに出してきた書籍(レッスンブックなど)はHTML&CSSの理解・習得を目的としているため、ページデザインの作り込みは最小限にとどめ、シンプルな設定だけで形になるようにしてあります。コーディング・プラクティスブック』では、実際の案件で求められるレベルで作り込んだデザインを採用し、どうコーディングするかを考えることができるようにしてあります。「HTML&CSSの理解・習得」を目的とはしていませんので(理解・習得済みであることを前提とした書籍ですので)、デザインカンプから得られる数値も必ずしもきれいな値にはなっていません。デザインも「コーディングのしやすさ」を考えて作られたものではありません。指示書にも1から10まで「こう作ってほしい」ということが書かれているわけではないため、デザインカンプから「デザイナーさんはこういうところを意識して作ってるな」といったことを読み解きながらコーディングしていきます。デザインカンプから読み解けない部分:レスポンシブでどう変化させるかテキストが増減した場合の対処をどうするかマークアップの変更などにどこまで対応できるようにしておくかなど、「コーダーとして気を配りたいところ」や「このあたりまで意識しておけば仕事を受けても怖くなくなる」といったポイントも盛り込んだ作例となっています。クラスの付け方についてはクライアントに合わせて設定するものと考えていますので、本書ではシンプルな形で記述し、必要に応じて変えることができるようにしてあります。コーディング・プラクティスブックデザインカンプと指示書に従い、Webページをコーディングしてみる実践シリーズです。