目次
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