CSS設計完全ガイド ～詳細解説＋実践的モジュール集 [単行本]

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

• 要旨（「BOOK」データベースより）

  ＳＭＡＣＳＳ、ＢＥＭ、ＰＲＥＣＳＳなどさまざまな手法の考え方がわかる。ボタン、ラベル、カード、テーブル…実例コードを多数掲載。ＣＳＳの理解を深め、８つのポイントで設計！

• 目次

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

• 著者紹介（「BOOK著者紹介情報」より）（本データはこの書籍が刊行された当時に掲載されていたものです）

  半田 惇志(ハンダ アツシ)
  株式会社２４‐７／テクニカルディレクター・株式会社パンセ／シニアエンジニア

• 著者について

  半田 惇志 (ハンダ アツシ)
  半田惇志（はんだ あつし）
  株式会社24-7／テクニカルディレクター・株式会社パンセ／シニアエンジニア。
  主に受託制作のフロントエンドの開発から業務全体のワークフロー設計・改善、マーケティングオートメーション、コンテンツ制作まで幅広く業務を行う。特に強い専門領域はHubSpot CMSとCSS設計。好きな言葉は人間万事塞翁が馬。
  
  著作物 : Webのための次世代エディタ Bracketsの教科書（Kindle版のみ取り扱い）
  PRECSS（http://precss.io/ja/）
  ブログ : Thinking Salad（https://thinkingsalad.com/）
  Twitter : @assialiholic

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