いちばんよくわかる HTML5 ＆ CSS3 デザインきちんと入門(イチバンヨクワカルエイチティーエムエルファイブアンドシーエスエススリーデザインキチントニュウモン)

レスポンシブ Web デザインが“当たり前”の時代の、新しい HTML ・ CSS の書き方ガイド

現在の HTML ・ CSS の書き方は、少し前までの HTML ・ CSS の書き方とは大きく変わっています。本書ではスマートフォン時代に求められる、 HTML を組むときの考え方から CSS の実践的なテクニックまでをきちんと解説。たくさんのサンプルコードに触れていただくことで、最新の、実践で役立つ力がきちんと身につきます。

＜本書の対象読者＞
● これから Web サイト制作を学びたい初心者の方
● 最新の HTML ・ CSS の書き方を知りたい経験者の方
● フレックスボックスを使ったページレイアウトについて知りたい方
CHAPTER 1 Web サイトの仕組みを知ろう

SECTION 1 Web サイトが表示される仕組み
SECTION 2 URL
SECTION 3 Web サイトに使われるファイルの種類
SECTION 4 Web サイトのファイル・フォルダ構造
SECTION 5 Web サイトの制作環境を整えよう

CHAPTER 2 HTML の基礎知識とマークアップの実践例

SECTION 1 HTML とは
SECTION 2 HTML の書式
SECTION 3 HTML ドキュメントの構造
SECTION 4 マークアップの考え方トレーニング

CHAPTER 3 CSS の基礎知識とページデザインの実践例

SECTION 1 CSS の基礎知識
SECTION 2 CSS の書式
SECTION 3 ページに CSS を適用するトレーニング

CHAPTER 4 テキストの装飾

SECTION 1 見出しや本文のフォントサイズを調整する
SECTION 2 読みやすい行間にする
SECTION 3 段落のテキストをリード文だけ太字にする
SECTION 4 表示するフォントを設定する
SECTION 5 テキストの行揃えを変更する
SECTION 6 2 行目以降を 1 文字下げる
SECTION 7 テキスト色を変更する
SECTION 8 見出しにサブタイトルをつける

CHAPTER 5 リンクの設定と画像の表示

SECTION 1 テキストにリンクを追加する
SECTION 2 テキストリンクに CSS を適用する
SECTION 3 画像を表示する
SECTION 4 画像にリンクをつける
SECTION 5 画像にテキストを回り込ませる

CHAPTER 6 ボックスと情報の整理

SECTION 1 インラインボックスとブロックボックス
SECTION 2 箇条書き (リスト) のマークアップ
SECTION 3 リストを情報の整理に使う
SECTION 4 上手な＜ div ＞の使い方
SECTION 5 CSS のボックスモデル
SECTION 6 パディング、ボーダー、マージンの設定
SECTION 7 2 つ以上のボックスを並べる
SECTION 8 ボックスのデザインを調整する

CHAPTER 7 テーブル

SECTION 1 テーブルを作成する
SECTION 2 アクセシビリティを考慮したテーブル
SECTION 3 テーブルのデザインバリエーション

CHAPTER 8 フォーム

SECTION 1 フォームとデータを送受信する仕組み
SECTION 2 さまざまなフォーム部品
SECTION 3 標準的なフォームの例

CHAPTER 9 ページ全体のレイアウトとナビゲーション

SECTION 1 実践的なコーディングのために知っておきたい CSS の知識
SECTION 2 シングルコラムレイアウト
SECTION 3 フレックスボックスを使ったコラムレイアウト
SECTION 4 ナビゲーションメニューを作成する

CHAPTER 10 レスポンシブ Web デザインのページを作成しよう

SECTION 1 レスポンシブ Web デザインとは
SECTION 2 レスポンシブ Web デザインのサイトを作る

HTML と CSS の役割分担があやふやな段階から、フレックスボックス でレイアウトを組みレスポンシブ対応のページを作れるところまでを一冊で運ぶ入門書です。『いちばんよくわかる HTML5 ＆ CSS3 デザインきちんと入門』 (狩野祐東 著、 SB クリエイティブ、 2016 年刊、 273 ページ) は、 Web サイトが表示される仕組みの説明から始めて、マークアップとスタイリングの考え方を段階的に積み上げます。著者は『スラスラわかる HTML&CSS のきほん』など HTML ・ CSS ・ JavaScript の解説書を数多く手がけてきた書き手で、書名の「きちんと」が示すとおり、その場しのぎではない基礎固めを狙った本です。

全 10 章の構成とマークアップの考え方訓練

全 10 章の構成は、 Web サイトの仕組みと制作環境 (第 1 章) 、 HTML と CSS の基礎知識と書式 (第 2 章・第 3 章) を土台に、テキストの装飾、リンクと画像、ボックスと情報の整理、テーブル、フォームと部品ごとに手を動かし (第 4 章から第 8 章) 、フレックスボックスを使ったコラムレイアウトとナビゲーション (第 9 章) 、レスポンシブ Web デザイン のページ制作 (第 10 章) へ到達します。特徴的なのは第 2 章の「マークアップの考え方トレーニング」で、見た目の再現ではなく、この内容にはどのタグが適切かを考えて意味づけする訓練が独立して用意されています。

2016 年刊という時点をどう読むか

刊行された 2016 年は、スマートフォン対応が Web 制作の前提になり、 float 頼みのレイアウトからフレックスボックスへ主役が移った時期にあたります。本書がレスポンシブ前提の書き方を看板にしているのはその文脈です。一方で、 2017 年以降に主要ブラウザへ行き渡った CSS Grid は登場せず、 HTML5 という呼称自体も、仕様が HTML Living Standard へ一本化された 2021 年以降は歴史的な名前になりました。とはいえ、ボックスモデル、セレクタとカスケード、意味を考えたマークアップという本書の中心部分は当時から変わらない骨格で、フレックスボックスもレイアウトの主力であり続けています。

想定読者と学び方の型

版元が挙げる対象は、これから Web サイト制作を学ぶ初心者、 2016 年時点の新しい書き方を学び直したい経験者、フレックスボックスによるレイアウトを知りたい人です。 JavaScript やデザインツールの操作は本書の範囲外で、コードを手で書いてブラウザで確かめる形式が貫かれているため、一つずつ因果関係を確認しながら進みたい人に合います。逆に、手早く見栄えのするページを完成させたい人には回り道に感じられるはずです。

2026 年にこの本を選ぶ場合の条件

2026 年に選ぶなら、 CSS Grid やその後の CSS の道具立てまで扱う刊行の新しい入門書と見比べたうえで、という条件はつきます。それでも、意味から考えるマークアップ の訓練は流行に左右されない足腰を作る部分で、ここが崩れていると新しいレイアウト手法もフレームワークも結局使いこなせません。断片的なコピペで凌いできて限界を感じている人、 HTML と CSS を一度きちんと積み直したい人にとって、通読する価値のある構成です。