内容紹介

（概要）

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　開発にまつわるタスクを自動処理する