図解! HTML&CSS のツボとコツがゼッタイにわかる本

Chapter01 【基礎】Web サイトの仕組みを学ぼう!
Chapter02 【基礎】Web ページの構造を決める HTML の基礎
Chapter03 【基礎】Web ページをデザインする CSSL の基礎
Chapter04 【応用】表現の幅が広がる CSS の応用テクニック
Chapter05 【応用】CSS で Web ページをレスポンシブにしよう!
Chapter06 【実践】Web サイトの共通部分を作成しよう!
Chapter07 【実践】トップページを作成しよう!
Chapter08 【実践】下層ページを作成しよう!
Chapter09 【応用】動画を挿入しよう!
Chapter10 【実践】Web サイトを公開しよう!

『図解! HTML&CSS のツボとコツがゼッタイにわかる本』 (中田 亨 著、秀和システム、2020 年 12 月刊) は、HTML と CSS の基本的な文法から Web サイトの公開までの流れを、イラストの図解を多く使って学ぶ入門書です。版元の「ツボとコツシリーズ」の 1 冊で、版元は対象を「まったくの未経験者でも、時間がない方でも無理なく理解できるように」と案内しています。版元の書籍ページには練習用サンプルのダウンロードが用意されています (2026 年 10 月時点)。

基礎 / 応用 / 実践の印で分けた全 10 章の構成

目次の各章には【基礎】【応用】【実践】の印が付いています。Chapter01 から Chapter03 が【基礎】で、Web サイトが表示される仕組み、HTML の基礎、CSS の基礎を扱います。Chapter04 と Chapter05 は【応用】で、Web アイコンや position による配置、疑似クラスとアニメーション、グラデーションといった CSS の応用と、レスポンシブなページの作り方に進みます。Chapter06 から Chapter08 は【実践】で、サンプルサイトの共通部分、トップページ、下層ページを順に作ります。Chapter09 は【応用】の動画の挿入、Chapter10 は【実践】の Web サイトの公開です。

優先順位とボックスモデルを扱う CSS の基礎

Chapter03 には「スタイルの優先順位 (ルール 1)」と「セレクタの詳細度 (ルール 2)」の節があり、ボックスモデルや box-sizing、上下マージンの相殺も取り上げられています。CSS では 1 つの要素に複数のルールが当たることがあり、詳細度の高い指定が勝ち、詳細度が同じなら後に書いた指定が勝ちます。ボックスモデルは、要素の内容、内側の余白 (padding)、枠線 (border)、外側の余白 (margin) を重ねた箱として大きさを考える見方で、width に何が含まれるかを box-sizing で切り替えられます。縦に並んだ要素の上下のマージンが足し算にならず大きい方の値だけが残る相殺も、この箱の考え方の上に成り立つ規則です。

ビューポートとフレックスボックスで組むレスポンシブなページ

Chapter05 は、ビューポートの設定、メディアクエリとブレークポイント、フレックスボックスの親要素と子要素のプロパティを扱い、コラムでモバイルファーストにも触れます。レスポンシブデザイン は、1 つの HTML に対して画面の幅に応じた CSS を切り替え、スマートフォンでもパソコンでも読める配置にする作り方です。その中で、要素を横や縦に並べ、余った幅をどう分けるかを親要素の側でまとめて指定できるのが フレックスボックス で、画面の幅に応じて並びの向きや折り返しを変えられます。Chapter06 から Chapter08 では、モバイル向けの CSS とパソコン向けの CSS を分けて書く形で、ヘッダーやフッター、2 カラムのレイアウトとサイドバーを組み立てます。

動画の埋め込みとレンタルサーバーでの公開まで

Chapter09 は、動画の埋め込み、CSS による動画のレスポンシブ化と自動再生、動画に文字を重ねる方法、ページが重くならない対策を扱い、ウェブ標準の遅延ロードについてのコラムがあります。画面に入るまで動画や画像を読み込まない 遅延読み込み は、最初の表示を軽くするための手法です。Chapter10 は、公開までの流れと公開と維持にかかる諸費用、レンタルサーバーの契約、ドメインの取得と設定、FTP クライアントの設定、サーバーへのアップロードを順に追い、パーミッションのコラムで終わります。

本書は、HTML と CSS の書式の基礎から、フレックスボックスとメディアクエリによるレスポンシブなページ作り、サンプルサイトの作成、レンタルサーバーへの公開までを全 10 章に収めています。