他のCSS本とはかなり異なる!現在、主流の実装・設計方法が徹底解説された良書 -CSS設計完全ガイド

私のCSSはこのままでいいのだろうか、他の人はどのように取り組んでいるのか、CSSのスキルアップを考えているWeb制作者・デベロッパーに、ぜひ手に取ってほしい一冊を紹介します。

本書ではCSSのさまざまな設計手法を解説するだけでなく、最適解となるコードに至るまでの思考プロセスも非常に詳しく解説されています。デベロッパーの頭の中で考えていることが言語化されており、自分のCSSを見直したい人、より効率的なCSS開発を探究している人にお勧めです。

本のキャプチャ

本書は、CSSの中・上級者向けの内容をていねいに詳しく解説したものです。初心者向けのブログやお店ページの例などは一切なく、モジュールベースのコンポーネントやレイアウトが主体で、プロジェクトレベルのCSS設計について解説されています。

本のキャプチャ

CSS設計完全ガイド
~詳細解説+実践的モジュール集
ISBN 978-4-297-11173-1
[Amazonでみる]
[楽天でみる]

著:
半田 惇志
出版社:
技術評論社
発売日:
2020/2/27

B5変形判でページ数はなんと512ページ! もうちょっとした鈍器w
Kindle版も発売されています!

本書の大きな特徴の一つは、説明が非常にていねいで詳しいことです。
例えば、classの命名。

誌面のキャプチャ

予測できる、再利用できる、保守できる、拡張できる、といった解説だけでなく、アバウトページのサービス紹介で画像とテキストのモジュールだと、aboutやserviceという文字が必要なのか、imageとtextだとそれらに用途が限定されないか、mediaだと汎用性があるのか、といった思考のプロセスがすべて文字で解説されています。
もちろん、CSSのコード解説も非常に充実しています。

そんな紙面をキャプチャで少しだけ紹介します。

誌面のキャプチャ

本書は9章構成で、CSSの設計について基礎から実践的なテクニックまで詳しく解説されています。1章でCSSの現状をしっかり認識しておきましょう。

誌面のキャプチャ

CSS自体は簡単ですが、扱うページ数や要素が増えるにつれ、複雑になり、管理しきれなくなり、難しくなります。その解決策が、CSS設計です。
複数のメンバーで制作するコード、将来の自分が修正するコードの最適解です。

誌面のキャプチャ

2章では、CSS設計に必要な基礎知識と実践を学びます。特に詳細度の管理は、CSS設計で欠かせない重要なポイントなので、あやふやな人は復習も兼ねてしっかり身につけておきましょう。

誌面のキャプチャ

CSSを記述する際、最初に行うべきことはベーススタイルの整理です。ブラウザに備わっているデフォルトのスタイルを理解した上で、リセットやノーマライズを採用するのが一般的な方法です。
当ブログでも特集記事があるので、参考にしてみてください。

誌面のキャプチャ

「よいCSSとは何か」目指すものが漠然としていると迷いが生じてしまうので、はっきりさせておきましょう。

  • 予測できる
  • 再利用できる
  • 保守できる
  • 拡張できる
誌面のキャプチャ

3章では、CSSのさまざまな設計手法が解説されています。OOCSS、SMACSS、BEMなど、モジュールベースの設計です。

誌面のキャプチャ

それぞれの概要や利点や具体的なコードが掲載されています。使用したことがない人でも、どのような感じか一目で分かると思います。

誌面のキャプチャ

また、4つ目として著者が開発した「PRECSS」も。本書ではこれらの4つの設計手法を使用して、実装テクニックが解説されています。
参考: CSSの新しい設計思想 PRECSSを作りました

誌面のキャプチャ

4章からは実践的なコードです。まずは、レイアウト設計として、使用するCSSリセット・ベーススタイルに、前述の設計手法を使用して実装します。レイアウトは、ヘッダ・フッタ・コンテンツ(1カラム・2カラム)です。

誌面のキャプチャ

5章は、ボタン・アイコン・ラベル・見出しといった最小モジュールの実装。

誌面のキャプチャ

モジュールなので、当然拡張します。例えば、ボタンは矢印付きボタン・大ボタン・色違いボタンといった具合です。拡張できることを前提としたボタンの実装です。

誌面のキャプチャ

6章は、いくつかの要素からなる複合モジュール。例えば、画像と小見出しとテキストから構成されたカード・ナビゲーション・テーブル・リスト・料金表・ページャー・FAQなどです。これらももちろん、基本的があり、拡張パターンやバリエーションがあります。

誌面のキャプチャ

7章はモジュールの再利用で、ここまでに作成したモジュールを組み合わせて新たなモジュールを作成します。
CSSがさらに面白くなるのは、ここからです。
ボタンを組み合わせた水平ボタンリスト、ボタン内の文字数は、スペースはどうやる、2個の場合3個いやそれ以上、考えることも実装も複雑さが増していきます。

誌面のキャプチャ

8章はCSS設計をより活かすためのスタイルガイド。実装したモジュールを効率よく管理・運用するためには欠かせません。本書ではスタイルガイドを生成するツールを使用した作成方法が解説されています。

誌面のキャプチャ

最後の9章では、CSS設計に限らず、CSSを記述する時に役立つツールや技術が解説されています。

CSS設計完全ガイドの目次

  1. CSSの歴史と問題点
    CSSの始まり
    CSSの問題点
    複雑化するWeb開発
    解決策として生まれたCSS設計
    CSS設計とデザインシステムとの連携
  2. CSS設計の基本と実践
    【CSS設計の前に】CSSの基本 詳細度とセレクター
    CSS設計の前に】リセットCSS
    【CSS設計の前に】英単語を結合する方式の名前
    よいCSS設計が目指す4つのゴール
    CSS設計の実践と8つのポイント
    モジュールの粒度を考える
    CSS設計の必要性
  3. さまざまな設計手法
    本Chapterの前提
    OOCSS
    SMACSS
    BEM
    PRECSS
  4. レイアウトの設計
    Chapter 4~Chapter 7のコードの前提
    本Chapterで扱うサンプル
    ヘッダー
    フッター
    コンテンツエリア
  5. CSS設計モジュール集① 最小モジュール
    本Chapter以降のモジュール集の進め方
    最小モジュールの定義
    ボタン
    アイコン付き小ボタン
    アイコン
    ラベル
    見出し
    注釈
  6. CSS設計モジュール集② 複合モジュール
    複合モジュールの定義
    メディア
    カード
    テーブル(水平)
    テーブル(垂直)
    テーブル(交差)
    ページャー
    タブナビゲーション
    CTA
    料金表
    FAQ
    アコーディオン
    ジャンボトロン
    ポストリスト
    順序なしリスト
    順序ありリスト
  7. CSS設計モジュール集③ モジュールの再利用
    最小モジュールを利用した複合モジュールの作成
    最小モジュールと複合モジュールの組み合わせ
    複合モジュール同士の組み合わせ
  8. CSS設計をより活かすためのスタイルガイド
    スタイルガイドとは
    なぜスタイルガイドが必要か?
    スタイルガイドを作成する
    スタイルガイドを作成する方針のまとめ
  9. CSS開発に役立つその他の技術
    CSS開発を効率化する,ミスを減らす
    人による差異をなくす
    リファクタリングのヒントを得る
    CSSを軽量化する
    HTML開発を効率化する
    開発にまつわるタスクを自動処理する

CSSに限らず、本書のように制作時の思考プロセスまでをくわしく解説している書籍はあまりないと思います。また、解説も非常に分かりやすいので、CSSの知識が最低限あれば心配はいりません。
CSSを本格的に身につけたい人にお勧めします。

本のキャプチャ

CSS設計完全ガイド
~詳細解説+実践的モジュール集
ISBN 978-4-297-11173-1
[Amazonでみる]
[楽天でみる]

著:
半田 惇志
出版社:
技術評論社
発売日:
2020/2/27

献本の御礼

最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

sponsors

top of page

©2020 coliss