HTML5 & CSS3 標準デザイン講座 30 Lessons

ゼロから学べる Web 制作学習書が HTML5 と CSS3 に完全対応!

わかりやすいと好評の Web 制作入門書が、現在の標準規格である「HTML5」と「CSS3」に完全対応して登場です。HTML5 と CSS3 の初歩的な文法学習から始めて、本格的なサイト制作までの流れを通して学ぶことで、初心者でも正しいマークアップの作法が身に付きます。用語や考え方を解説する講義パートと、実際にサンプルページを制作していく実習パートからなるレッスンを順に進めて、ステップアップしながら学んでいけます。サンプルソースはダウンロードが可能。Web 制作をこれから始める人に最適の 1 冊です!

ORIENTATION レッスンを始める前に

Chapter01 HTML で文書を作成する

LESSON01 HTML の概要
LESSON02 文書を HTML でマークアップする
LESSON03 改行や強調・画像やリンクを挿入する
LESSON04 表とフォームを設置する
補講 文法チェックのすすめ
補講 DOCTYPE を HTML4.01/ XHTML1.0 にする場合の注意点

Chapter02 CSS で文書を装飾する

LESSON05 CSS の概要
LESSON06 基本プロパティとセレクタの使い方
LESSON07 背景画像を使って装飾する
LESSON08 初歩的な文書のレイアウトとボックスモデル
LESSON09 表組みと入力フォームのスタイリング

Chapter03 CSS レイアウトの基本

LESSON10 レイアウトの種類
LESSON11 float レイアウト
LESSON12 position レイアウト
補講 新しいレイアウト手法

Chapter04 本格的な HTML5 によるマークアップを行うための基礎知識

LESSON13 セクション関連の新要素
LESSON14 新しいカテゴリとコンテンツ・モデル
LESSON15 その他の新要素と属性
補講 HTML5 の全体仕様と実装上の注意点

Chapter05 本格的な Web 制作のための設計と準備

LESSON16 Web サイトのコーディング設計
LESSON17 効率的な CSS コーディングの下準備

Chapter06 実践的な Web サイトのコーディング

LESSON18 大枠のレイアウトフォーマットを作成する
LESSON19 display プロパティを活用したレイアウト
LESSON20 CSS スプライトの仕組みを理解する
LESSON21 メインコンテンツ領域を作成する

Chapter07 CSS3 入門

LESSON22 CSS3 の概要
LESSON23 CSS3 セレクタ
LESSON24 CSS3 プロパティ
LESSON25 変形・アニメーションとメディアクエリ

Chapter08 マルチデバイス対応の基礎知識

LESSON26 デバイスの特性を理解する
LESSON27 モバイル対応 Web サイト制作の基礎知識

Chapter09 レスポンシブ・ウェブデザインのコーディング

LESSON28 レスポンシブの画面設計とベースコーディング
LESSON29 メディアクエリを使ったレイアウトの調整
LESSON30 Retina ディスプレイ対策
補講 レスポンシブにまつわる各種 TIPS

索引

HTML で文書を作り、CSS で装飾し、レイアウトを組んでスマートフォンに合わせるまでの Web 制作の流れを、30 のレッスンで順に学ぶ入門書です。『HTML5 & CSS3 標準デザイン講座 30 Lessons』 (草野 あけみ 著、翔泳社、2015 年 11 月刊) は、副題に「Web の基本をきちんと学ぶ!」を掲げ、HTML5 と CSS3 の初歩的な文法から本格的なサイト制作までを扱います。版元は、用語や考え方を解説する講義パートと、サンプルページを実際に制作していく実習パートからなるレッスンを順に進めることで、初心者でも正しいマークアップの作法が身に付くと案内しています。

30 LESSON の構成、文書作成からレスポンシブまで

本書は ORIENTATION「レッスンを始める前に」で始まり、Chapter01「HTML で文書を作成する」から Chapter09「レスポンシブ・ウェブデザインのコーディング」までの 9 つの Chapter に、LESSON01 から LESSON30 までが割り振られています。Chapter01 と Chapter02 で HTML による文書の作成と CSS による装飾の基本を押さえ、Chapter03 では float レイアウトと position レイアウトを扱います。Chapter04 はセクション関連の新要素やコンテンツ・モデルといった HTML5 によるマークアップの基礎知識、Chapter05 はサイトのコーディング設計と CSS コーディングの下準備、Chapter06 は大枠のレイアウトフォーマットの作成からメインコンテンツ領域の作成までの実践的なコーディングです。後半は Chapter07 の CSS3 入門でセレクターとプロパティ、変形 / アニメーションとメディアクエリを学び、Chapter08 のマルチデバイス対応の基礎知識を経て、Chapter09 でメディアクエリを使ったレイアウトの調整や Retina ディスプレイ対策に進みます。Chapter01、Chapter03、Chapter04、Chapter09 には、文法チェックのすすめや新しいレイアウト手法、HTML5 の全体仕様と実装上の注意点、レスポンシブにまつわる各種 TIPS といった補講も置かれています。

構造と見た目を分ける考え方とボックスモデル

Web 制作の基本は、HTML が文書の構造と意味を記述し、CSS が見た目を記述するという役割の分担です。見出しや段落、リスト、表を、見た目ではなく意味に合った要素でマークアップしておけば、CSS を差し替えるだけでデザインを変えられ、検索エンジンや支援技術も文書の構造を読み取りやすくなります。この考え方は セマンティック HTML と呼ばれ、HTML5 でセクション関連の要素が加わったことで、文書のまとまりを要素で書き分けやすくなりました。本書は Chapter04 でセクション関連の新要素とコンテンツ・モデルを扱ったうえで Chapter05 のコーディング設計に進むため、要素の意味を押さえてから設計と実装に入る順序になっています。CSS の側では、要素の幅と余白と枠線の関係を決めるボックスモデルの理解が、レイアウトの崩れを読み解く鍵になり、本書では LESSON08 で初歩的な文書のレイアウトとあわせて扱います。画面の幅に応じてレイアウトを切り替える レスポンシブデザイン も、メディアクエリでブレークポイントごとの指定を書き分けるという、同じ CSS の仕組みの延長にあります。

2015 年時点の HTML5 と CSS3 を前提に読む注意

本書の内容は、2015 年 11 月の刊行時点の HTML5 と CSS3 を前提にしています。HTML の仕様は WHATWG が HTML Living Standard として更新を続けており、W3C が HTML 5.2 を公開していた URL も、2026 年 10 月時点ではこの文書へ転送されます。要素や属性の細部は HTML Living Standard で確かめながら読むのが確実です。レイアウトの組み方も、本書の Chapter03 と Chapter06 が扱う float や position、display プロパティによる方法のほかに、Flexbox や CSS Grid を使う方法が広く使われるようになっています。補講で触れる新しいレイアウト手法は刊行時点の内容のため、本書で文書の構造とボックスモデルの考え方を固めたあとで、Flexbox や CSS Grid の書き方を別の資料で補うと、2015 年以降の制作現場の書き方へ無理なくつなげられます。

一方で、JavaScript による動的な振る舞いや、フロントエンドのフレームワークを使った開発を学びたい人には、本書は目的が合いません。扱うのは HTML と CSS によるページ制作です。HTML と CSS の入門書を他の本と比べて選びたい場合は、Web デザイン本の選び方 で学ぶ順番とあわせて整理できます。

これから Web 制作を始める人が、講義で用語と考え方を確かめ、実習でサンプルページを組み立てるという往復を 30 回くり返しながら、1 つのサイトを最後まで作り切る経験を積めるのが本書の強みです。サンプルソースはダウンロードできるので、各 LESSON の実習を手元で動かしながら進めれば、マークアップの作法とレイアウトの基礎が確かな手応えとして残ります。