「Web制作者のためのCSS設計の教科書」を読んでみました

2014年8月20日(水)
阿部 正幸

「Web制作者のためのCSS設計の教科書」を読んでみましたので、書籍の概要と、感想を紹介します。

Web制作の仕事について

デザイナーがデザインした画面を、マークアップエンジニアがコーディングをしてサイトを公開する。

Web制作という観点から見るとこれで完了かもしれませんが、Webサイトは「いったん完成すればそれで終わり」ではありません。サイト公開後にターゲットユーザーをそのサイトに集客し、サイトオーナーのビジネスを儲けさせるために、運用をしなくてはいけません。運用フェーズに入ると、様々な改修や、新規キャンペーンサイトなどが追加になるかと思います。もちろんサイト公開前にも、「ちょっとココの色変えて」など言われることもあるでしょう。CSSの設計が悪いと、サイト改修を重ねるうちに思わぬところで見た目が崩れて、その修正に余計に工数がかかることになります。皆さん一度はこのような経験をされているのではないでしょうか。

本書は、これらの問題を解決するための思考を学ぶための書籍と言えるでしょう。10年間CSSコーディングに取り組んできた著者が、「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」CSSを分かりやすく説明しています。「CSS設計の考え方」についての書籍ですので、「CSSを使ってグラフィックが描けます」「こんな表現ができます」といったテクニックの紹介はありません。

書籍の構成(目次)

第1章 CSSにおける設計とは

よりよいCSSの設計の指標である「予測しやすい」「再利用しやすい」「保守しやすい」「拡張しやすい」ことについて、Googleのエンジニアであるフィリップ・ウォルトン氏のブログ記事から引用し解説されています。

第2章 CSSの基本を振り返る

CSSの基本であるセレクタと詳細度の解説です。CSSが破綻する主な原因として、セレクタが複雑になってしまうことがあげられます。コンポーネント設計を考える上でも重要なポイントとなるため、正しく理解している必要があります。

第3章 コンポーネント設計のアイデア

著名な開発者達が考えたCSS設計のアイデアの説明です。下記の設計アイデアが紹介されています。

  • [OOCSS]オブジェクト思考プログラミングの概念を取り入れたCSS。
  • [SMACSS]OOCSSのコンセプトをベースに作られたフロントエンドに関するガイドライン。
  • [BEM]フロントエンド開発手法で使われている命名規則。
  • [MCSS]ロシアのSNS開発チームが作ったCSSの構成システム。Multilayer CSSの略。
  • [FLOCSS]上記に挙げた設計アイデアをヒントに、筆者が作成を続けているガイドライン。

第4章 コンポーネント設計の実践

第3章で取り上げたCSS設計の考え方を元にした、実践的なコーディング手法についての解説です。

第5章 CSSプリプロセッサを用いた設計と管理

CSSにプログラミング言語のような機能を与える、スタイルを簡潔に書く、といったことを可能にするCSSプリプロセッサのSassを使った管理方法や、注意点が紹介されています。

第6章 コンポーネントの運用に必要なツール

コンポーネントを運用する中で、それを手助けするツールの紹介です。Grunt.js(タスクランナー)、CSSO(CSS最適化ツール)、CSSComb(CSSプロパティ並び替え、記述フォーマットの整理)、CSS Lint(CSSチェックツール)など。

第7章 Web Componentsの可能性

Web Components は、コードのカプセル化やスコープなどが実現できる今後のWebアプリケーション開発に欠かせない技術です(現在W3Cで仕様策定が進行中)。Web Componentsについての簡単な使い方や、Googleが開発しているUIコンポーネントツールのPolymerの紹介。

書籍を読んでみて

HTML5の普及に伴い、HTML5でWebアプリケーションを構築することが、今後ますます増えると考えています。効率的にWebアプリケーションを構築するためにも、CSS設計をきちんとすることが求められる時代です。そのためには、コンポーネント設計が必須となります。本書ではCSSコンポーネントの設計についても、多く語られています。

さらに、昨今注目を集める、Web Componentsなどの紹介も折り込まれています。Web Componentsは、これまでのWeb制作手法を大きく変える制作手法です。現在W3Cで仕様策定が進んでおり、今後のWeb標準となる予定で、Web制作をする者として見逃せない技術だと私も注目しています。

「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」コンポーネントやCSSプリプロセッサを意識した設計・管理のために、皆さんにもぜひ一度読んでほしいと思う一冊でした。

この記事のもとになった書籍
Web制作者のためのCSS設計の教科書

谷 拓樹 著
価格:2,200円+税
発売日:2014年07月24日発売
ISBN:978-4-8443-3635-8
発行:インプレスジャパン

Web制作者のためのCSS設計の教科書

コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!「セレクタが複雑になってしまう……」「オブジェクト指向CSSってなに?」「考え方はわかったけど、どう組めばいいの?」そんな人のバイブルになるのが、この本です。破綻しやすいCSS、セレクタのリファクタリングなどの基本から、OOCSS、SMACSS、BEMなどのコンポーネント設計のアイデア、実際によくあるパターンのコードの組み方までを丁寧に解説。また、注目されはじめた「Web Components」についても説明します。

Amazon詳細ページへImpress詳細ページへ

KDDIウェブコミュニケーションズ エバンジェリスト

システム開発会社で、大規模なシステム開発を経験後、Web制作会社でプログラマー兼、ディレクターとして従事。その後、KDDIウェブコミュニケーションズに入社、CPIブランドのプロダクトマネージャーに就任。ACE01、SmartReleaseをリリース後、現職の「エバンジェリスト」として、Web制作に関する様々なイベントに登壇しつつ、CPIスタッフブログを運営する。

KDDIウェブコミュニケーションズ エバンジェリスト
HTML5fun 理事
CPIスタッフブログ 編集長

連載バックナンバー

開発言語書籍・書評

ブック・インサイド『Python機械学習プログラミング』―単純な例でADALINEのイメージをつかむ

2016/9/16
今回も前回に引き続き、書籍『Python機械学習プログラミング』の2章の内容についてより分かりやすく理解するためのヒントを解説していきます。今回は、ADALINEのイメージがつかめるように、ADALINEのシンプルな例を取り上げます。
開発言語書籍・書評

ブック・インサイド『Python機械学習プログラミング』―パーセプトロンを読み解く

2016/8/8
前回は、書籍『Python機械学習プログラミング』を読むために必要な知識、読み方等について説明しました。今回は、2章の内容についてより分かりやすく理解するためのヒントを解説していきます。
開発言語書籍・書評

ブック・インサイド―『Python機械学習プログラミング』学び方ガイド

2016/6/30
本記事では、書籍『Python機械学習プログラミング』を読むために必要な知識、読み方等について説明します。

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています