HTML5 & CSS3 ワークブック

『HTML5 & CSS3 ワークブック』 (相澤 裕介 著、カットシステム、2020 年 1 月刊) は、版元の情報演習シリーズの 35 番にあたる「ステップ 30」の一冊で、版元の書名には「第 2 版」と添えられています。版元の案内によると、HTML と CSS の学習に必要な内容を 30 のステップに分け、1 ステップごとに演習問題を付けて、自分の学習成果を確かめながら進める構成です。対象読者として、初めてホームページ作成を学ぶ人、HTML と CSS の活用法を覚えたい人、仕事で HTML を使わなければならない人、講習会や研修用の教材を探している人の 4 つが挙げられています。

30 ステップの構成、HTML の基本からフォームまで

目次は Step 01「HTML ファイルと Web サーバー」で始まり、Step 30「フォームの作成」で終わります。Step 02 から Step 07 はタグの基本と改行、見出しと段落、文字の装飾、画像の掲載、リンクの作成です。Step 08 から Step 21 は CSS の基本、文字書式、色指定、背景、サイズと枠線、余白、角丸と影と半透明、div 要素と span 要素、回り込み、フレックスボックスを使った配置、リンクの CSS と続き、Step 21「CSS のまとめ」で一区切りになります。その後は表の作成と表の CSS 指定、グループ化とセルの結合、リストの作成と活用、2 回に分けたページレイアウトの作成、CSS ファイルの活用、インラインフレームの作成を経て、フォームの作成に至ります。巻末には演習問題の解答が付いています。

HTML と CSS という 2 つの言語

HTML は文書の構造、つまり見出しや段落、表やリストといった要素の意味と並びを記述する言語で、CSS はそれぞれの要素の文字、色、余白、配置といった見た目を指定する言語です。版元の案内も、HTML を骨組み、CSS をデザインの指定と説明しています。本書では Step 28「CSS ファイルの活用」で、スタイルを別のファイルにまとめる書き方を扱います。

float による回り込みとフレックスボックス

ページの部品を横に並べる方法として、本書は回り込み (float) と Flexbox の両方を Step として立てています。Web デザインの本の選び方は Web デザイン本ガイド にまとめています。

本書は HTML 文書の基本から CSS による装飾と配置、表とリスト、ページレイアウト、インラインフレームとフォームまでを 30 のステップに分け、各ステップに演習問題、巻末にその解答を収めています。