コーディング・プラクティスブックの始め方

現在、７冊となった『コーディング・プラクティスブック』シリーズ。

気になる１冊からはじめたり、１冊目から順番に進めても問題はありません。
ただ、難易度にばらつきがあるため、オススメの進め方を紹介します。

各書籍情報のページでは「作例のポイント」をPDFで公開していますので、参考にしてください。

• Flexbox
• CSS Grid

Flexbox

コーディングの際に Flexbox（フレキシブルボックス）をメインとしているのが、以下の５冊です。

最初の１冊としては、スタンダードな構成のページを Flexbox を使って作成していく、次の２冊から選ぶのをオススメします。
そして、そこを基準にレベルや好みの合うものを探してみてください。

書籍情報Amazon

コーディング・プラクティスブック 1

with Flexbox

LEVEL 2

基本となる１冊です。
レスポンシブなページのコーディングに必要なポイントをしっかりと抑えていきます。
レスポンシブへの対応をこれからマスターしたい方にオススメの１冊です。

書籍情報Amazon

コーディング・プラクティスブック 4

with Flexbox & マルチページ

LEVEL 1

複数のページのCSSの扱いがちょっと不安な方や、1よりももう少しやさしいページが良い方にオススメの１冊です。

スタンダードな構成のページではあるものの、レスポンシブに関する指示が細かく、見た目以上に大変な構成となっているのが2です。
解説なしで指示通りのページがコーディングできれば、HTML&CSSに関してはあまり困ることはない、と思われるレベル設定になっています。

書籍情報Amazon

コーディング・プラクティスブック 2

with Flexbox & vm・remを活用したレイアウト

LEVEL 4

ちょっと複雑なレスポンシブにチャレンジしてみたい方にオススメの１冊です。

なかなか制作する機会がないものの、制作経験があったほうがいいと思うものを含むページを Flexbox をメインにコーディングしていくのが次の２冊です。

書籍情報Amazon

コーディング・プラクティスブック 3

with Flexbox & ダークモード

LEVEL 3

ダークモードに本格的に対応したページを Flexbox を使ってレイアウトしていきます。

書籍情報Amazon

コーディング・プラクティスブック 7

with Flexbox & レスポンシブテーブル

LEVEL 3

レスポンシブテーブルを扱ったページを、Flexbox を使ってレイアウトしていきます。

７はレスポンシブテーブルに加えて、Flexbox の使いこなしに関してもオススメな１冊です。

CSS Grid

コーディングの際に、CSS Grid（CSSグリッド）をメインにしているのが以下の２冊です。実践的なCSS Gridの使い方を解説しています。

CSS Gridを理解していることが前提となりますので、これからCSS Gridを学ぼうという方には、少し難しく感じるかもしれません。

CSS Gridを活かしたコーディングを体感できる構成となっています。

書籍情報Amazon

コーディング・プラクティスブック 5

with CSS Grid & マルチページ

LEVEL 2

CSS Gridの基本を活かしたページを作成します。
CSS Gridが実現するシンプルなコーディングを体験してください。

書籍情報Amazon

コーディング・プラクティスブック 6

with CSS Grid & 12分割グリッド

LEVEL 2

12分割グリッドでデザインされたサイトの制作を通して、実践的な環境でのCSS Gridの問題点とその解決方法を解説しています。