エビスコム著『HTML&CSS コーディング・プラクティスブック〈実践シリーズ〉』はAmazonのKindleで購入できる初心者から中級者向けのコーディング強化書籍です。デザインカンプを元に具体的なコーディングに落とし込む考え方や手法を学ぶことができます。全8冊をレビューしていきます。

『HTML&CSS コーディング・プラクティスブック 実践シリーズ』概要

『HTML&CSS コーディング・プラクティスブック〈実践シリーズ〉』は全8冊からなるシリーズで構成され、各書籍ごとに強化する項目・難易度レベルが異なるのが特徴です。

No	難易度	言語	レイアウト	特徴
1	★★☆☆☆	HTML CSS JavaScriot	Flexボックス 1カラム	ハンバーガーメニュー オーバーレイ マイナスマージン フェードイン iOS対応
2	★★★★☆	HTML CSS JavaScriot	Flexボックス 1カラム	ハンバーガーメニュー オーバーレイ マイナスマージン 要素を重ねた複雑なレイアウト CSS変数 calc rotate svg画像のレスポンシブ
3	★★★☆☆	HTML CSS JavaScriot	Flexボックス Fluidレイアウト 1カラム	ダークモード CSS変数 filterプロパティ SVG画像 sessionStorage border-image transition animation
4	★☆☆☆☆	HTML CSS	Flexボックス 1カラム 複数ページ	共通パーツ 背景画像とテキストを重ねる
5	★★☆☆☆	HTML CSS JavaScriot	CSSグリッド 1カラム 複数ページ	ハンバーガーメニュー オーバーレイ 不規則に配置する装飾パーツ 画像ギャラリー mix-blend-mode PC環境のスクロールバー表示
6	★★☆☆☆	HTML CSS	CSSグリッド 1カラム 複数ページ	12分割グリッド 構造的アウトライン 見出しの階層 画像を波型にカット Font Awesomeアイコン
7	★★★☆☆	HTML CSS JavaScriot	Flexボックス 1カラム	レスポンシブテーブル table-layout border-spacing 見出し列を固定してスクロール表示 レイヤー画像の重ねがけ レイアウトシフト対策 アニメーション
8	★★★★★	HTML CSS JavaScriot	CSSグリッド Flexボックス 1カラム	要素を重ねるデザイン Fluodタイポグラフィ CSS変数と可変サイズ calc() clamp() aspect-ratio display-contents linear-gradient -webkit- 論理的プロパティ

おすすめの学習順序

全8シリーズはナンバリングの順番で取り組むことをおすすめします。中級者・経験者はシリーズ4を飛ばしても良いと思います。シリーズ8はチャレンジャーレベルですが、本書を見ながらなら完成までたどり着くことができました。

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

シリーズ1では、お問い合わせフォームのあるコーポレートサイトを制作します。

シリーズ1冊目の難易度は★2となっていますが、初心者向けの書籍やPrograteを2周した経験でチャレンジできると思います。

モバイル時のメニューをハンバーガーメニューで実装し、ハンバーガーメニューをタップすると横からスライドしてオーバーレイで表示するメニューを作成します。この時、JavaScriptで表示を制御する方法を学びます。JavaScriptはごく初歩的な記述のため解説はありません。また、本書のハンバーガーメニューの実装方法は全シリーズの基本となります。

シンプルなアニメーション（動き）をともなってブラウザ表示する実装も学びます。

個人的に嬉しかったのは、iOSで表示が崩れる対応とwebkitの解説です。

解説に重きをおいた書籍ではないため、詳細に触れられてはいませんが、知識として意味のある学びを得られました。

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

シリーズ2では、Googleマップを備えたカフェサイトを制作します。

テキスト・複数の画像・イラストを複雑に配置していくため、難易度★4には納得します。

モバイル時のハンバーガーメニュはプラクティスブック 1を少々発展させた形です。CSS変数、calc、rotateといった初心者向けの書籍では取り扱われにくい題材が含まれます。

本書の中で最も身になったのは、svg画像のレスポンシブ対応でした。やりごたえのある内容のため、腰を据えて取り組むことをおすすめします。

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

シリーズ3では、キャンディ紹介サイトを制作します。

ダークモード対応サイトを制作するというあまり他では見ない課題を学習できる点が大きな特徴です。ブラウザの開発者ツールを使用したダークモードへの切り替え方法や、キービジュアルに表示したスイッチでダークモードへ切り替かわる挙動を実装します。

切り替えはJavaScriptを多用するため、シリーズの中ではJavaScriptの比重が大きくなっています。さらに、sessionStorage、border-imageといった馴染みのなかった仕様が盛り込まれており、学習効果として隙がない好教材であると感じました。

コーディング上級者の場合でもダークモード実装方法の解説は必見だと思います。

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

シリーズ4では、トップページと記事ページで構成されたコーポレートサイトを制作します。

内容は基礎の基礎レベルで、フレックスボックスの修得練習が中心です。画像とテキストをずらして重ね合わせる配置は実務でも取り入れやすいのではないでしょうか。

JavaScriptがないため、初学者でもチャレンジしやすい課題レベルでした。

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

シリーズ5では、トップページと記事ページで構成されたキャンプサイトを制作します。

ディスプレイの端にSNSボタンや縦書きテキスト、装飾パーツなどを配置していく構成をマスターすると、今後のWebサイトを一味違うオリジナル感のあるデザインで制作するために大いに役立ちそうです。

また、CSSのmix-blend-modeプロパティが登場し、画像とテキストの重ね合わせた箇所の色のコントロールを行います。mix-blend-modeは個人で学習しているとなかなか取り扱う機会が少ないため、良い機会になりました。

全編をとおしてGridの基礎知識がある前提で解説が進むため、あらかじめGridの書籍を履修しているとスラスラ理解できると思います。

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

トシリーズ6では、ップページと記事ページで構成されたサボテンのECサイトを制作します。

レイアウトは12分割グリッドでコントロールしていくため、シンプルな構成です。ただし、カラム数を柔軟に増減できるように対応しておき、Webサイトを運用していくうえで柔軟にスタイル調整できるように準備しておきます。

構造的アウトラインや見出しの階層についても解説されます。<li>タグの中に見出しタグを挿入することができるのか、本書を読み解くとそういったHTMLの奥深さの一端にも触れられます。

最大の特徴は、ヘッダー画像の下辺を波打った形状にするデザインでした。オンラインツールを使用して簡単にリッチな装飾を施す方法がわかります。

また、フォームの装飾はブラウザごとの差異に配慮したコーディングを行います。

実践シリーズの中では取り組みやすいレベル感でした。

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

シリーズ7では、フットボールの対戦結果サイトを制作します。

ヘッダーは複数のレイヤー画像を重ねた上、レイアウトシフトが発生しないように細かな調整を行います。

レスポンシブのテクニックも満載でした。

かっこいいデザインカンプを元にコーディングを完成すると、達成感がありました。

スマホのディスプレイの横幅の狭さはテーブルを掲載する時のネックとなります。今回の課題ではテーブルをレスポンシブ対応していきます。縦に並んだ見出しはサイズ固定にし、表示しきれないセルはスクロールで表示されるようにします。

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

シリーズ8では、ハウスメーカーのWebサイトを制作します。

複雑に配置されたコンテンツと装飾をGridレイアウト、Flexボックス、positionを駆使して実現していきます。星5だけあって、シリーズ最大ボリュームでした。

作例コンセプトはモダンコーディングを取り入れ、いかに複雑なデザインをシンプルなHTML＆CSSで記述していくか、でした。aspect-ratioを使用した実践例と、display-contentsを学習できたことが収穫として大きく、直近3年で広まったような最新コーディングに触れてみたい方はぜひチャレンジしてみてください。