CSS設計完全ガイド ～詳細解説＋実践的モジュール集（技術評論社） [電子書籍]

CSS設計完全ガイド ～詳細解説＋実践的モジュール集（技術評論社） の 商品概要

• 2021/6/30紙版の4刷に対応するため更新しました。
  CSS設計は多くの現場で導入されていますが，いまだに悩みがつきません。プロジェクトの大小や性質によって最適解も変わってきます。
  そこで本書は，CSSのさまざまな設計手法を紹介しつつ，考え方や実践のポイントを明確化します。そのうえでボタン，ラベル，カード，テーブル…といったウェブの定番的なモジュールを網羅的に取り上げ，さらにはそれらの組み合わせ方まで，実践的なコードを紹介します。
  代表的な設計手法である「BEM」と，著者が開発した設計手法「PRECSS」によって対比的な解説を加えており，思考をなぞることで最適解が炙り出されることでしょう。
  駆け出しのウェブ開発者，フロントエンドエンジニアの方に，ぜひ読んでいただきたい1冊です。
  

• 目次

  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
  

CSS設計完全ガイド ～詳細解説＋実践的モジュール集（技術評論社） の商品スペック