![[半田 惇志]のCSS設計完全ガイド ～詳細解説＋実践的モジュール集](https://m.media-amazon.com/images/I/51BmcxicJML._SX260_.jpg)
以前、某CSS設計本を買いましたが、コードの説明をあまりうまく解説されておらず、
また、BEMなどの説明も少し、著者の提唱するCSS設計手法の宣伝本みたいなイメージを持ってしまい、
半分挫折して、自分流なコーディングルールでやっていました。
この本は違い、著者の提唱するCSS設計手法の話だけでなくBEMなど著者の提唱するCSS設計手法以外の説明を十分にされていること、CSSの基礎から説明しながら、CSS設計とは何ぞやを100ページ以上にわたり説明しています。
また具体的にどういうレイアウトになるかという説明やどういうCSSかというの説明も十分にされており、
横文字ばかりの説明を最小限に抑えているのもプラスです。
概念だけではなく実際に使われる具体的な方法もわかりやすく説明しているため、
CSSをある程度勉強した初心者が1歩進めたいときや、
コーダーの教育にも非常に役立ちそうな本な気がします。
内容紹介
（概要）
CSS設計の考え方をウェブ開発に取り入れる案件が、プロジェクトの大小を問わず増えています。本書は、CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します。ボタン、ラベル、カード、テーブルといったモジュールごとの、実践的なコードを多数掲載。代表的な設計手法であるBEMと、著者が独自に開発したPRECSSの2パターンを取り上げています。その他、CSS開発を効率化するさまざまなツールも紹介します。
（こんな方におすすめ）
・CSS設計の知識を吸収し、フロントエンドエンジニアにステップアップしたいひと
・向上心が強く、CSS設計について理解を深めたい初級フロントエンドエンジニア
・会社としてCSSのルールを策定したいチームリーダー等の責任者
（目次）
Chapter 1 CSSの歴史と問題点
1-1 CSSの始まり
1-2 CSSの問題点
1-3 複雑化するWeb開発
1-4 解決策として生まれたCSS設計
1-5 CSS設計とデザインシステムとの連携
Chapter 2 CSS設計の基本と実践
2-1 【CSS設計の前に】CSSの基本 詳細度とセレクターに】リセットCSS
2-3 【CSS設計の前に】英単語を結合する方式の名前
2-4 よいCSS設計が目指す4つのゴール
2-5 CSS設計の実践と8つのポイント
2-6 モジュールの粒度を考える
2-7 CSS設計の必要性
Chapter 3 さまざまな設計手法
3-1 本Chapterの前提
3-2 OOCSS
3-3 SMACSS
3-4 BEM
3-5 PRECSS
Chapter 4 レイアウトの設計
4-1 Chapter 4~Chapter 7のコードの前提
4-2 本Chapterで扱うサンプル
4-3 ヘッダー
4-4 フッター
4-5 コンテンツエリア
Chapter 5 CSS設計モジュール集① 最小モジュール
5-1 本Chapter以降のモジュール集の進め方
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 最小モジュールと複合モジュールの組み合わせ
7-3 複合モジュール同士の組み合わせ
Chapter 8 CSS設計をより活かすためのスタイルガイド
8-1 スタイルガイドとは
8-2 なぜスタイルガイドが必要か？
8-3 スタイルガイドを作成する
8-4 スタイルガイドを作成する方針のまとめ
Chapter 9 CSS開発に役立つその他の技術
9-1 CSS開発を効率化する、ミスを減らす
9-2 人による差異をなくす
9-3 リファクタリングのヒントを得る
9-4 CSSを軽量化する
9-5 HTML開発を効率化する
9-6 開発にまつわるタスクを自動処理する
CSS設計の考え方をウェブ開発に取り入れる案件が、プロジェクトの大小を問わず増えています。本書は、CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します。ボタン、ラベル、カード、テーブルといったモジュールごとの、実践的なコードを多数掲載。代表的な設計手法であるBEMと、著者が独自に開発したPRECSSの2パターンを取り上げています。その他、CSS開発を効率化するさまざまなツールも紹介します。
（こんな方におすすめ）
・CSS設計の知識を吸収し、フロントエンドエンジニアにステップアップしたいひと
・向上心が強く、CSS設計について理解を深めたい初級フロントエンドエンジニア
・会社としてCSSのルールを策定したいチームリーダー等の責任者
（目次）
Chapter 1 CSSの歴史と問題点
1-1 CSSの始まり
1-2 CSSの問題点
1-3 複雑化するWeb開発
1-4 解決策として生まれたCSS設計
1-5 CSS設計とデザインシステムとの連携
Chapter 2 CSS設計の基本と実践
2-1 【CSS設計の前に】CSSの基本 詳細度とセレクターに】リセットCSS
2-3 【CSS設計の前に】英単語を結合する方式の名前
2-4 よいCSS設計が目指す4つのゴール
2-5 CSS設計の実践と8つのポイント
2-6 モジュールの粒度を考える
2-7 CSS設計の必要性
Chapter 3 さまざまな設計手法
3-1 本Chapterの前提
3-2 OOCSS
3-3 SMACSS
3-4 BEM
3-5 PRECSS
Chapter 4 レイアウトの設計
4-1 Chapter 4~Chapter 7のコードの前提
4-2 本Chapterで扱うサンプル
4-3 ヘッダー
4-4 フッター
4-5 コンテンツエリア
Chapter 5 CSS設計モジュール集① 最小モジュール
5-1 本Chapter以降のモジュール集の進め方
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 最小モジュールと複合モジュールの組み合わせ
7-3 複合モジュール同士の組み合わせ
Chapter 8 CSS設計をより活かすためのスタイルガイド
8-1 スタイルガイドとは
8-2 なぜスタイルガイドが必要か？
8-3 スタイルガイドを作成する
8-4 スタイルガイドを作成する方針のまとめ
Chapter 9 CSS開発に役立つその他の技術
9-1 CSS開発を効率化する、ミスを減らす
9-2 人による差異をなくす
9-3 リファクタリングのヒントを得る
9-4 CSSを軽量化する
9-5 HTML開発を効率化する
9-6 開発にまつわるタスクを自動処理する
出版社からのコメント
CSS設計はプロジェクトの大小や性質によって最適解も変わってきます。本書は、CSSのさまざまな設計手法を紹介しつつ、考え方や実践のポイントを明確化。ボタン、ラベル、カード、テーブル…といったウェブの定番的なモジュールを網羅的に取り上げ、それらの組み合わせ方まで、実践的なコードを解説。
