Abstract Archives

ブックレビュー: Web 制作者のための CSS 設計の教科書

1. はじめに

 「Web 制作者のための CSS 設計の教科書」は,株式会社サイバーエージェントでエンジニアとして活躍されている谷拓樹氏によって執筆された技術書です。本記事では,「Web 制作者のための CSS 設計の教科書」から何を得られるかを各章ごとに要約しています。「Web 制作者のための CSS 設計の教科書」の購入を検討されている方の参考になれば幸いです。

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

「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」CSS設計の教科書が登場!コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説。「セレクタが複雑になってしまう……」「オブジェクト指向CSSってな...

2.「第 1 章 CSS における設計とは」

 「第 1 章 CSS における設計とは」では,Google でエンジニアとして活躍されている Phil Walton 氏 が提唱している理想的な CSS の解説と CSS のアンチパターンが示されています。

 示されているアンチパターンの中には,自分がコーディングしているソースコードと酷似するものもあり,自分自身の CSS が Phil Walton 氏の提唱する理想的な CSS とかけ離れているかがわかります。

3.「第 2 章 CSS の基本を振り返る」

 「第 2 章 CSS の基本を振り返る」では,CSS セレクタの詳細度とアンチパターンが示されています。また,CSS セレクタの解析ツールとして Specificity Calculator が紹介されています。

 章名は “基礎を振り返る” となっていますが,CSS のプロパティに関する解説ではないので注意が必要です。また,CSS セレクタの詳細度を十分に理解している人は読み飛ばしても大丈夫だと思います。

4.「第 3 章 コンポーネント設計のアイデア」

 「第 3 章 コンポーネント設計のアイデア」では,CSS 設計において広く知られている以下の手法を解説しています。

 Amazon のレビューでも述べられている通り,FLOCSS に関する記述は少なめです。そのため,FLOCSS を学びたい方は「柴犬でもわかる FLOCSS」を参照されることをオススメします。

柴犬でもわかる FLOCSS

筆者の考案したCSS設計手法・FLOCSS(フロックス)についての書籍。FLOCSSの基本的な考え方から、応用、よくあるパターンの解説など。 第1章 FLOCSSの概要 第2章 ComponentかProjectか 第3章 Layoutの扱い 第4章 FLOCSSの命名規則 第5章 FLOCSSのアレンジ

5.「第 4 章 コンポーネント設計の実践」

 「第 4 章 コンポーネント設計の実践」では,SOLID CSS と頻出するコンポーネントの設計・実装が解説されています。頻出するコンポーネントとして,以下の 8 つが例として挙げられています。

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

 「第 5 章 CSS プリプロセッサを用いた設計と管理」は,Sass の概要と特徴,マルチクラスとシングルクラスについて記述されています。

 Sass に関しては,@import@extend に関する簡易的な解説のみが記述されています。Sass について学びたい場合は,平澤隆氏の「Web 制作者のための Sass の教科書」をオススメします。

Web 制作者のための Sass の教科書

CSSをより便利に、効率的に書ける「Sass(サス)」の解説書を、最新のコーディング環境にあわせて大幅刷新!Sassは導入が面倒そう。はじめたいけどあと一歩が踏み出せない。CSSを今よりも効率的に書きたい。こうした方がSassを導入するきっかけとなり、ひと通りSassの機能を...

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

 「第 6 章 コンポーネントの運用に必要なツール」では,CSS の設計・実装を支援するツールを紹介しています。

 Google が公開している HTML/CSS Style Guide は目を通すことをオススメします。原著は英語ですが有志の方が日本語訳版を公開しているので,英語が苦手な方は日本語訳版を参照してみてください。

8.「第 7 章 Web Components の可能性」

 「第 7 章 Web Components の可能性」では,W3C が策定している Web Components に関する解説と考察が記述されています。

 Web Components を活用することで CSS のスコープやカプセル化を実現することが可能になるようです。しかし,MDN のドキュメントを参照する限りブラウザサポートは完全ではないようです。そのため,Web Components が普及するには少し時間がかかりそうです。

9. おわりに

 ここまで「Web 制作者のための CSS 設計の教科書」のレビューを記述してきました。この技術書は,拡張性や保守性が高い CSS をコーディングしたい中級者以上の人にオススメです。しかし,この技術書は CSS の基礎知識がある前提で執筆されているため,CSS が全くわからない初心者の人にはオススメできません。CSS 初心者の人は,Mana 氏が執筆した「1 冊ですべて身につく HTML & CSS と Web デザイン入門講座」などで CSS の基礎を学んだ後に購入されることをオススメします。

1 冊ですべて身につく HTML & CSS と Web デザイン入門講座

Webサイト制作に必要な知識がすべて身につく! 今のWebサイトの作り方が一気に学べる! ・知識ゼロから体系的に学べる! HTMLとCSSの基本 ・最新の技術に対応! レスポンシブ、Flexbox、CSSグリッド ・手を動かしながら学べる! プロの現場で役立つテクニック ・コード...

管理者

Dutch
コンピュータサイエンスを専攻している大学院生です。研究の合間に,アニメを観たりブログサイトを運営しながら生きています。

目次