HTML&CSS コーディング・プラクティスブック〈実践シリーズ〉

デザインを再現するのはもちろんですが、Webページのコーディングはそこがゴールではありません。

そのページのコードはどう使われるのでしょうか？

• 将来、拡張されるのでしょうか？
• どのようなブラウザに対応させるのでしょうか？
• Reactなどと合わせて使われるのでしょうか？
• CMSが組み込まれるのでしょうか？

etc…

そのシチュエーションに応じて最適なコードを選択しなければなりません。

しかし、こうしたことを学ぶのはなかなか難しいのです。様々なページを数多く作成して経験を積むしかないからです。

そのため、実務をどんどんこなすのが一番だと言われます。

でも、実務に付く前に少しでも経験を積んで引き出しを増やしておきたいのも正直なところ…。

そんな方にぴったりなのが、コーディング・プラクティスブックです。様々なタイプのベージ制作を体験していただければと思います。

コーディング・プラクティスブックの構成About This Book

コーディング・プラクティスブックは以下のような構成となっています。

• デザインカンプ（Adobe XDやFigmaで作成されたもの）
• 指示書
• 作例

制作するページは学習用のシンプルなものではありません。実際に使っていただけるレベルのページデザインと、それに応じた作り込みになっています。

ページのデザインはスタンダードなものはもちろん、トレンドに応じたものもどんどん揃えていく予定です。

また、見た目はシンプルでも、指示書通りに再現しようとすると難易度が一気に上がるものもあります。

指示書に従って模写のようにチャレンジしていただいたり、作例を参考に制作の流れや考え方、テクニックを吸収していただくなど、さまざまな形で活用していただけるように構成しています。

コーディング・プラクティスブックのレベルBook's Level

ページ制作を行う場合、デザインカンプと指示書をもとにコーディングを進めていくことになります。ただし、そこにヒントや解説などはありません。

コーディング・プラクティスブックの「レベル」はそのような状況を想定し、（作例を参考にすることなく）デザインカンプと指示書に従ってページを制作する際の難易度や工数などを考慮して設定しています。そのため、コーディング全般の知識がある方を基準としています。

作例の解説の難易度ではありませんので、ご注意ください。

作例Case Study

指示書に従い、デザインカンプ通りのページを制作する過程の一例を「作例」として解説しています。

デザインカンプと指示書を分析するところからはじめ、コーディングの方針の決定、そして、実際にページを作成し、最後に作成したページを検証します。

ページ制作の一連の流れを丁寧に解説しています。ただし、一般的な学習教材に比べて作り込む要素もあるため、実践的な内容となっています。デザインからページを制作する際に考えるポイントや注意するポイントなどの参考にしていただければと思います。

シリーズは、今後も増えていく予定です。