【2022年】HTML/CSS本「人気ランキング20 / おすすめ参考書9選」

chapter01 Webサイト制作を始める前に
01 Webサイトとその構成要素
02 Webブラウザの機能と種類
03 Webサイトを公開するまで
04 制作に使うソフトのインストール
chapter02 HTMLの基礎
01 HTMLはWebページを制作するための言語
02 HTMLの基本的な書式
03 親子、子孫、兄弟 ～HTMLの階層関係
chapter03 制作の準備と基本のHTML
01 Webサイト制作の準備
02 すべてのHTMLで共通するタグ
chapter04 見出し、段落、リスト
01 見出しテキスト
02 テキストの段落
03 ナビゲーションの設置
04 番号なしリスト（非序列リスト）
chapter05 リンクと画像の挿入
01 サイト内リンクと相対パス
02 外部サイトへのリンクと絶対パス
03 画像の表示
04 キーボードで入力しにくい文字の表示
05 ページの部分ごとに要素をまとめる
06 class属性
07 コメント文
chapter06 2ページ目以降を効率的に作成する
01 index.html以外のファイルの作成
02 段落にテキストと画像を含める
03 テキストを太字にする・改行する
04 id属性と特定の場所へのリンク
05 テーブル（表）
06 番号付きリスト（序列リスト）
07 CSS適用を考えた要素のグループ化
chapter07 CSSの基礎
01 HTMLの「見た目」を整えるCSS
02 CSSの基本的な書式
03 主なセレクタと書き方
04 CSSを書く場所
05 CSSファイルを作成する
06 HTMLファイルとCSSファイルを関連付ける
chapter08 CSSでページのスタイルを調整
01 背景色の設定
02 テキスト色、フォントサイズの設定
03 マージン、ボーダー、パディング
04 行間の調整
05 リンクテキスト色の変更
06 コンテンツの行揃え
07 ブロック表示／インライン表示の変更
08 背景画像の指定
09 スタイルを上書きする
10 繰り返さない背景画像
11 ページの最大幅の設定
12 ページに固有のスタイルを適用
chapter09 フロートとテーブルのスタイル
01 テキストの回り込み
02 テーブルの整形
03 フレックスボックスで2コラムレイアウト
04 <練習>access.htmlのスタイルを作成しよう
chapter10 フォームの作成
01 フォームの基礎知識
02 お問い合わせページの概要
03 フォーム全体の親要素
04 プルダウンメニュー
05 ラジオボタンとチェックボックス
06 テキストフィールド
07 テキストエリア
08 送信ボタン
09 ラベル
10 フォームのスタイルと属性セレクタ
chapter11 モバイル端末に対応する
01 レスポンシブデザイン
02 ビューポートの設定
03 画像をレスポンシブデザインに対応させる
04 メディアクエリとブレイクポイント
05 ページ全体とナビゲーションのモバイル対応
06 コラムレイアウトの調整
07 フォームの調整
chapter12 Webサイトの公開
01 Webサイト公開までの準備
02 Webサーバーに接続
03 ファイルのアップロード
04 Webサイトの最終確認

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デザインのサイトを作る

------------------------------------------------
Chapter 1　CSSの歴史と問題点
------------------------------------------------
1-1　CSSの始まり
　CSSの役割と目的
1-2　CSSの問題点
　「カオス」になるCSS
　CSSはすべてがグローバルスコープ
1-3　複雑化するWeb開発
　変更不可能なHTML/CSSと付き合う
　増加するページ数
　頻繁に変更される「状態」
1-4　解決策として生まれたCSS設計
1-5　CSS設計とデザインシステムとの連携
------------------------------------------------
Chapter 2　CSS設計の基本と実践
------------------------------------------------
2-1　【CSS設計の前に】CSSの基本 詳細度とセレクター
　セレクターの種類と、本書における呼称
　カスケーディングの基礎
　詳細度の基礎
2-2　【CSS設計の前に】リセットCSS
　ブラウザのデフォルトスタイル
　ハードリセット系CSS
　ノーマライズ系CSS
　リセットCSSはCSS設計にどのような影響を及ぼすか？
2-3　【CSS設計の前に】英単語を結合する方式の名前
2-4　よいCSS設計が目指す4つのゴール
　予測できる
　再利用できる
　保守できる
　拡張できる
2-5　CSS設計の実践と8つのポイント
　1. 特性に応じてCSSを分類する
　2. HTMLとスタイリングが疎結合である
　3. 影響範囲がみだりに広すぎない
　4. 特定のコンテキストにみだりに依存していない
　5. 詳細度がみだりに高くない
　6. クラス名から影響範囲が想像できる
　7. クラス名から見た目・機能・役割が想像できる
　8. 拡張しやすい
2-6　モジュールの粒度を考える
　改めてモジュールとは
　モジュールの粒度のばらつきが引き起こす問題
　モジュール粒度の指針
2-7　CSS設計の必要性
------------------------------------------------
Chapter 3　さまざまな設計手法
------------------------------------------------
3-1　本Chapterの前提
3-2　OOCSS
　ストラクチャーとスキンの分離
　コンテナとコンテンツの分離
　OOCSSのまとめ
3-3　SMACSS
　ベースルール
　レイアウトルール
　モジュールルール
　ステートルール
　テーマルール
　SMACSSのまとめ
3-4　BEM
　BEMの基本
　Blockの基本
　Elementの基本
　Modifierの基本
　Blockのネスト
　Mix
　Mixでは対処できない場合
　Modifier名は省略してはいけない
　BEMのその他の命名規則
　BEMのまとめ
3-5　PRECSS
　基本的な指針
　ベースグループ
　レイアウトグループ
　モジュールグループ
　ヘルパーグループ
　ユニークグループ
　プログラムグループ
　オリジナルグループ
　PRECSSのまとめ
------------------------------------------------
Chapter 4　レイアウトの設計
------------------------------------------------
4-1　Chapter 4～Chapter 7のコードの前提
　使用するリセットCSS
　独自に定義したベーススタイル
　使用する設計手法
4-2　本Chapterで扱うサンプル
4-3　ヘッダー
　①.header__inner / .ly_header_innerに対するスタイリング
4-4　フッター
　①ボーダーの実装方法の違い
　ヘッダーの内側とフッターの内側のスタイリングは共通化すべきか？
4-5　コンテンツエリア
　1カラム設計
　2カラム設計
------------------------------------------------
Chapter 5　CSS設計モジュール集①　最小モジュール
------------------------------------------------
5-1　本Chapter以降のモジュール集の進め方
　拡張パターンについて
　バリエーションについて
　BEMとPRECSSの差違について
5-2　最小モジュールの定義
5-3　ボタン
　基本形
　拡張パターン
　バリエーション
5-4　アイコン付き小ボタン
　基本形
　拡張パターン
5-5　アイコン
　基本形
　拡張パターン
　バリエーション
5-6　ラベル
　基本形
　拡張パターン
　バリエーション
5-7　見出し
　基本形
　バリエーション
5-8　注釈
　基本形
　バリエーション
------------------------------------------------
Chapter 6　CSS設計モジュール集②　複合モジュール
------------------------------------------------
6-1　複合モジュールの定義
6-2　メディア
　基本形
　拡張パターン
　バリエーション
6-3　カード
　基本形
　拡張パターン
6-4　テーブル（水平）
　基本形
　拡張パターン
6-5　テーブル（垂直）
　基本形
6-6　テーブル（交差）
　基本形
6-7　ページャー
　基本形
6-8　タブナビゲーション
　基本形
6-9　CTA
　基本形
6-10　料金表
　基本形
　バリエーション
6-11　FAQ
　基本形
6-12　アコーディオン
　基本形
6-13　ジャンボトロン
　基本形
6-14　ポストリスト
　基本形
6-15　順序なしリスト
　基本形
　拡張パターン
　バリエーション
6-16　順序ありリスト
　基本形
　バリエーション
------------------------------------------------
Chapter 7　CSS設計モジュール集③　モジュールの再利用
------------------------------------------------
7-1　最小モジュールを利用した複合モジュールの作成
　水平ボタンリスト
7-2　最小モジュールと複合モジュールの組み合わせ
　ボタン + 画像半分サイズメディア
　ボタン + CTAエリア
　ラベル + ポストリスト
7-3　複合モジュール同士の組み合わせ
　FAQ + リスト
　アコーディオン + カード + CTAエリア
------------------------------------------------
Chapter 8　CSS設計をより活かすためのスタイルガイド
------------------------------------------------
8-1　スタイルガイドとは
8-2　なぜスタイルガイドが必要か？
8-3　スタイルガイドを作成する
　スタイルガイドジェネレーターを使用する
　手動で作成する
8-4　スタイルガイドを作成する方針のまとめ
------------------------------------------------
Chapter 9　CSS開発に役立つその他の技術
------------------------------------------------
9-1　CSS開発を効率化する、ミスを減らす
　Sass
　Browsersync
　Autoprefixer
9-2　人による差異をなくす
　CSScomb
　EditorConfig
　Prettier
9-3　リファクタリングのヒントを得る
　Stylelint
　CSS Stats
9-4　CSSを軽量化する
　CSS MQPacker
　cssnano
9-5　HTML開発を効率化する
　Nunjucks
　EJS
　Pug
9-6　開発にまつわるタスクを自動処理する
　Prepros
　Gulp
　webpack

ＨＴＭＬ
ＣＳＳの基礎
ページの基本となるＨＴＭＬ
テキストの整形とデザインテクニック
リストのデザインテクニック
リンクと画像のテクニック
ページ全体に適用するデザインのテクニック
ボックスの整形とデザインテクニック
テーブルのデザインテクニック
フォームのデザインテクニック
メタデータと外部サイトとの連携テクニック
パーツ作成のテクニック
ナビゲーションのデザインテクニック
レイアウトのテクニック
レスポンシブＷｅｂデザインに対応するテクニック
アニメーションとエフェクトのテクニック

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

吉田真麻（ヨシダマアサ）
１９９１年生まれ。中学時代に個人のモバイルサイトを作ったことがきっかけでＨＴＭＬ／ＣＳＳコーディングの面白さを知り、高校・大学と学業のかたわら趣味仕事問わず複数のサイト制作を行なう。１９歳の頃から本格的にＷｅｂ制作業に就き、その後ＰＨＰとＪａｖａＳｃｒｉｐｔに出会ってプログラミングに目覚める。現在の活動は主にフロントエンドエンジニアとして、ＨＴＭＬ／ＣＳＳ／ＪａｖａＳｃｒｉｐｔでのシングルページアプリケーションの開発や個人のプロダクト制作、イベント登壇など（本データはこの書籍が刊行された当時に掲載されていたものです）