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