HTML5 ／ CSS3 モダンコーディング(エイチティーエムエル ファイブ シーエスエス スリー モダン コーディング)

フロントエンドエンジニアから学ぶ制作現場の実践的なテクニック!

本書は、 HTML5/CSS3 を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。

現在主流な Web ページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した 3 つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。

実際の Web 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、 HTML5/CSS3 の実用的なコーディングスキルやテクニックを無理なく身につけることができます。

3 つのサイトを作成することで、「本格的なレイアウトのサイトを作れた」「こういったレイアウトの場合こうコーディングすればいいという具体的なテクニックがわかった」というような手応えを得やすく、学ぶことへのモチベーションが下がらずに高まる構成にしています。

駆け出しのフロントエンドエンジニアや、 HTML/CSS コーディングに興味はあっても実践の機会がないデザイナー、バックエンドエンジニアなどが、実際にサイトを作ることを通してスキルアップすることを目標とした一冊です。

PART0 イントロダクション
A 本書で作成するサイト
B コーディングの進め方
C デベロッパーツールの使い方
D 本書の読み方
PART1 スタンダードレイアウト
01 この PART で作るサイト
02 ベースのコーディング
03 ヘッダーのコーディング
04 メイン領域のコーディング
05 サイドメニューのコーディング
06 フッターのコーディング
PART2 グリッドレイアウト
07 この PART で作るサイト
08 ベースのコーディング
09 ボックスのコーディング
10 中ボックスと大ボックスのコーディング
11 ナビゲーションのコーディング
PART3 シングルページレイアウト
12 この PART で作るサイト
13 ベースのコーディング
14 ヘッダーのコーディング
15 セクション 1 (ABOUT ME) のコーディング
16 セクション 2 (WORKS) のコーディング
17 セクション 3 (MY SKILLS) のコーディング
18 セクション 4 (CONTACT) とフッターのコーディング
19 スマートフォン対応の下準備
20 スマートフォン対応のコーディング

Web ページのレイアウトを組む力は、デザインカンプを眺めるだけでは身につきません。本書は HTML5 と CSS3 を使ったページレイアウトの実装に焦点を絞り、スタンダードレイアウト・グリッドレイアウト・シングルページレイアウトの 3 パターンを実際に手を動かしながら構築していく構成です。フレームワークに頼らず素の CSS でレイアウトを組み上げる工程を丁寧に追うため、なぜその書き方で意図どおりに配置されるのかを理解できます。

著者の吉田真麻氏は各章で「何を実現したいか」を先に示し、そこに到達するためのプロパティの選択と組み合わせを段階的に説明します。そのため float や Flexbox の挙動を暗記するのではなく、レイアウト要件から逆算して手段を選ぶ思考が自然に育ちます。ブラウザ間差異や崩れの原因もコード上で確認しながら進むため、実務でトラブルに遭遇したときの調査力が鍛えられます。

注意点として、 CSS の進化は速いため、 Grid Layout の詳細な活用などは別途補完が必要です。ただし本書が教える「なぜこのプロパティでこの配置になるのか」という原理の理解は陳腐化しにくく、新しい仕様を学ぶ際の土台になります。