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 スマートフォン対応のコーディング

『HTML5/CSS3 モダンコーディング』 (吉田 真麻 著、翔泳社、2015 年 11 月 2 日発売) は、スタンダード、グリッド、シングルページという 3 つのレイアウトのサイトを 1 つずつ作りながら、HTML5 と CSS3 によるコーディングの進め方を学ぶハンズオン形式の本です。叢書は WEB Engineer's Books で、副題は「フロントエンドエンジニアが教える 3 つの本格レイアウト」です。版元は対象を「駆け出しのフロントエンドエンジニアや、HTML/CSS コーディングに興味はあっても実践の機会がないデザイナー、バックエンドエンジニアなど」と案内しており、文法を一通り知ったあとに、1 つのサイトを最後まで組み上げる経験を積むための本という位置づけです。

PART0 から PART3 まで、3 つのサイトを作る構成

目次は PART0 から PART3 までの 4 部で、PART1 以降の節には 01 から 20 までの通し番号が付いています。PART0「イントロダクション」は「本書で作成するサイト」「コーディングの進め方」「デベロッパーツールの使い方」「本書の読み方」の 4 項目です。PART1「スタンダードレイアウト」はベース、ヘッダー、メイン領域、サイドメニュー、フッターの順に、PART2「グリッドレイアウト」はベース、ボックス、中ボックスと大ボックス、ナビゲーションの順にコーディングします。PART3「シングルページレイアウト」はヘッダーに続いて ABOUT ME、WORKS、MY SKILLS、CONTACT の 4 つのセクションとフッターを組み、最後の 2 節「スマートフォン対応の下準備」「スマートフォン対応のコーディング」で締めくくります。PART1 から PART3 はどれも「この PART で作るサイト」で完成形を示し、「ベースのコーディング」から始まる並びです。

デザインから骨格を見極めてから組む進め方

版元の紹介によれば、本書は「サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフロー」をなぞる作りです。見た目を上から順に再現していくと、後から要素を足したときに配置が崩れやすくなります。先にページを大きな区画に分け、どの区画が何の役割を持つかを決めてから中身を詰めると、構造と見た目を分けて考えられます。HTML5 には header、nav、section、footer のように区画の役割を表す要素があり、役割に合った要素で骨格を組む セマンティック HTML の考え方は、検索エンジンや支援技術が文書の構造を読み取る助けにもなります。画面の幅に合わせて配置を組み替える レスポンシブデザイン も、区画の分け方が整理されているほど手を入れる箇所を絞りやすくなります。

グリッドレイアウトの語と、2015 年刊という前提

版元の紹介は、3 つのレイアウトを Web ページのデザインスタイルとして挙げています。PART2 の節に中ボックスと大ボックスが並ぶとおり、ここでのグリッドは大きさの違う箱を格子状に並べる見た目の名です。CSS には同じ語を持つ 2 次元の配置の仕組み CSS Grid がありますが、指すものは別で、本書がどの CSS の手法で箱を並べているかは版元の目次からは確認できません。また 2015 年 11 月の刊行なので、コードはその時点のブラウザーと CSS を前提にしています。後から加わった CSS の機能まで学びたい場合は、刊行の新しい資料で補う必要があります。

目次はタグやプロパティを 1 つずつ解説する章立てではなく、サイトの部位ごとの節で組まれています。文法をまったく知らない段階なら、先に基礎の入門書を 1 冊通しておくと進めやすくなります。HTML と CSS の文法は学んだものの、デザインを渡されたときにどこから書き始めればよいか迷う人、3 種類の異なるレイアウトを通して組み立ての手順を自分の手に覚えさせたい人には、作るものがはっきりしている分、練習の題材として使いやすい一冊です。