CSSの基本から理解を深め一つ上のスキルを身につける、他書とはひと味もふた味も異なるオススメの本 -CSS設計の教科書

その場限りのCSSを使うのではなく、CSSの基本からしっかりと理解を深め、運用期間が長くても安心して使えるCSS、大規模なサイトでも管理できるCSSを身につけたい人に役立つ一冊を紹介します。

単にコードを書くだけではなく、設計・管理・運用を考えた『ちゃんとしたCSS』が徹底的に解説された良書です。

本のキャプチャ

GoogleエンジニアのPhilip Walton氏によると、より良いCSSのゴールとして次の4つのポイントが重要です。

  • 予測しやすい
    記述したスタイルが他のスタイルに影響されず、期待通りの見栄えになる。
  • 再利用しやすい
    スタイルの定義が機能ごとに管理されており、似たUIの別のプロジェクトにも利用できる。
  • 保守しやすい
    スタイルを追加・修正した際に、既存のものに影響を与えない。
  • 拡張しやすい
    サイトの規模が大きく複雑になっても、対応できる。

参考:CSS Architecture翻訳版

これはCSSに限らず他の設計、プログラミング言語などにも言えることで、CSSにおいてこれらのことをどのように実践すればよいのか、本書で紐解かれています。

本のキャプチャ

Web制作者のためのCSS設計の教科書
[Amazonでみる]
[楽天でみる]

著:
谷 拓樹
出版社:
インプレスジャパン
発売日:
2014/7/24

AmazonではKindle版のCSS設計の教科書も扱ってます。お値段はかなりお得!

誌面のキャプチャ

そんな本書の中身を紙面のキャプチャで少しだけご紹介。

誌面のキャプチャ

第1章は「CSSにおける設計とは」。
Webデザインの世界では情報設計やUI設計からはじまり、フロントエンドでもJavaScriptの設計やこのCSSの設計が非常に重要な工程です。プロジェクトの初期から携わるのであれば後任が困らないコードを、運用から携わるのであればメンテナンスにつれてひどくならないコードを書くように、明日の自分、1ヵ月後の自分、1年後の自分が困らないような設計を意識します。

誌面のキャプチャ

メンテナンス効率を下げず、少ない工程で作業ができるCSSとは? やはり具体的な例がないと分かりにくいですよね。「破綻しやすいCSS」のサンプルを多数掲載し、どこが原因でどのように手を加えればよいのか的確なアドバイスが充実しています。

誌面のキャプチャ

第2章は「CSSの基本を振り返る」。
CSSの設計を考える上で大切なのは、CSSの基本であるセレクタと詳細度です。CSSが破綻してしまう原因の一つは、セレクタが複雑になってしまい管理しきれなくなってしまうことです。また、コンポーネントの設計をする上でも重要なポイントになるため復習を兼ねてしっかりと確認しておきましょう。

誌面のキャプチャ

第3章ではCSSのコンポーネント設計に関するさまざまなアイデアを見ながら、コンポーネント自体とその考え方から、メンテナンス性が高く再利用性も高いCSSを学びます。

誌面のキャプチャ

アイデアはOOCSS(オブジェクト指向CSS)をはじめ全部で5つ掲載されており、それぞれの概要だけなく、コードをベースに詳しい解説が行われています。

誌面のキャプチャ

命名規則やスタイルの上書きを防止するための強固な詳細度の使い方など、実装の経験を元に生まれたアイデアなので、非常に参考になるものばかりです。

誌面のキャプチャ

第4章からは、いよいよ実践です。

誌面のキャプチャ

コンポーネント設計のアイデアを元に、実際にどのように設計をし、コンポーネントを作成していくかを学びます。

誌面のキャプチャ

最初は多くのプロジェクトでよく利用するパターンをコンポーネント化していきます。

誌面のキャプチャ

ボタン、見出し、アイコン、画像とテキストなど、それぞれどういう条件のスタイルが必要とされ、どのような拡張性を考慮し実装していくのか、詳しいコード解説とともに学びます。

誌面のキャプチャ

スタイルシートのテクニック的な面も多く掲載されているので、非常に参考になります。

誌面のキャプチャ

グリッドのコンポーネント設計もプロジェクトに応じて、多くの方法が考えられます。

誌面のキャプチャ

最後は「汎用クラス」の定義。マージンをちょっとつけたい、フォントサイズを大きくしたい、カラーを変えたいなど、ユーティリティもしっかり設計しないと破綻の原因となってしまいます。

誌面のキャプチャ

第5章はCSSプリプロセッサを用いた設計と管理の方法で、Sassを使ってのCSSファイルの管理方法です。

誌面のキャプチャ

第6章ではコンポーネントの運用に役立つ便利なツールの紹介。CSSのコードの検証や記述の統一化、コードの最適化・軽量化、一貫したルールで運用するためのスタイルガイドなど。

CSS設計の教科書の目次

  1. CSSにおける設計とは
    CSS設計の重要性
    破綻しやすいCSS
  2. CSSの基本を振り返る
    CSSセレクタと詳細度
    セレクタのリファクタリング
  3. コンポーネント設計のアイデア
    CSSにおけるコンポーネント設計
    OOCSS (オブジェクト指向CSS)
    SMACSS (スマックス)
    BEM (ベム)
    MCSS (マルチレイヤーCSS)
    FLOCSS (フロックス)
  4. コンポーネント設計の実践
    コンポーネントをどのように作るか
    よくあるコンポーネントの設計・実装パターン
  5. CSSプリプロセッサを用いた設計と管理
    コンポーネントを個別に管理する
  6. コンポーネントの運用に必要なツール
    コンポーネントの運用
    スタイルガイドの作成方法
  7. Web Componentsの可能性
    HTML/CSSのコンポーネント化
    独自のコンポーネントを作る

CSS初心者用の解説は一切ありません、実務で既にCSSを使用しており、一つ上のスキルを身につけたい人にオススメしたい本です。

本のキャプチャ

Web制作者のためのCSS設計の教科書
[Amazonでみる]
[楽天でみる]

著:
谷 拓樹
出版社:
インプレスジャパン
発売日:
2014/7/24

献本の御礼

最後に、献本いただいたインプレスジャパンの担当者さまに御礼申し上げます。

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

top of page

©2018 coliss