【レビュー＆解説】脱初心者できる「CSS設計」を学ぼう。おすすめ本とその内容を紹介

2024年3月12日

HTMLとCSSの仕組みはわかった人へ

簡単なコーディングもできるようになった。

レスポンシブサイトも作れるようになった。

flexboxもmarginもgridも覚えた。

ドットインストールやprogateのHTML講座を終えて初心者マークはとれたけど、実践的なコーディングの自信がない…そんなお悩みを持つ初心者の方が中級者になるための一歩としておすすめの本を紹介します。

「Web制作者のためのCSS設計の教科書」と「CSS設計完全ガイド　～詳細解説＋実践的モジュール集」「ざっくりつかむ CSS設計」の３冊です。

リンク

この3冊をもとに、CSS設計とはどんな概念なのか、なぜCSS設計がWebコーディングに必要なのかを、具体的に説明していきたいと思います。

この記事を書いているのは、Webデザイナー歴17年の現役フリーランスです

初心者を脱却できる、CSS設計の考え方

どの本にも共通するのが「CSS設計」という言葉。これは

保守しやすい
再利用しやすい
拡張しやすい

「ちゃんとしたCSSを書く」ためのプロの考え方をわかりやすく解説した本です。

CSSというのは簡単に扱える代わりに許容範囲が広すぎて、サイトを修正・拡張すればするほどカオスになっていくものです。

その道何十年という人でも（この本の著者でさえも）100%完璧なCSSのコードを書いたと言えることはないそう。

私も15年以上CSSとお付き合いしていますが、満足できるコードはいまだにないかも

制作者毎にオリジナルのclassがあったり、divでのブロック分けに独自の組み方があったり、CSSはプログラム言語に比べて力技が効きやすい分、カオス感は大きいです。

また、Webサイトの公開後は、オリジナルコードがそのままの状態であることは少なく、常に更新作業を加えていくのが普通です。

更新する人が同一人物であることはこれまた少ないので、複数の手が入ったCSSはさらに複雑で扱いづらいコードになっていきます。

そんな悪夢にならないよう、後々も拡張しやすいコードを最初から意識して作りましょう。というのがCSS設計のいわんとしていることです。

設計なんて初心者には難しいのでは？と思うかもしれません。全くそんなことはないのでご安心を。

逆に最初にCSS設計の知識を身につけることで、あなたのコードは遠回りすることなく、無駄の少ない綺麗なコードを書くことができるようになります。絶対保証します。

初心者卒業に最適なやさしい解説本「CSS設計の教科書」

まずは、「Web制作者のためのCSS設計の教科書」から読んでみてください。

例えば、CSS初心者の方はこんな小さなお悩みはありませんか？

<h1>タグを赤色にしたいけれど、h1にスタイルをつけるべきか。classを使うべきか。

<h1>タイトル</h1>

/* css */
h1{
  color:red;
}

<h1 class="title">タイトル</h1>

/* css */
h1.title{
  color:red;
}

<h1 class="title">タイトル</h1>

/* css */
.title{
  color:red;
}

どの書き方が後々の保守に良いか、この本が教えてくれます。

また、例えばこんなパターンはどうでしょうか。同じ形で色が違うボタンを数種類作成したい場合です。

<a href="/" class="btn-blue">青いボタン</a>
<a href="/" class="btn-yellow">黄色いボタン</a>
<a href="/" class="btn-red">赤いボタン</a>

/* css */
.btn-blue{
  color:#fff;
  padding:10px;
  border-radius: 5px;
  background: blue;
}
.btn-yellow{
  color:#fff;
  padding:10px;
  border-radius: 5px;
  background: yellow;
}
.btn-red{
  color:#fff;
  padding:10px;
  border-radius: 5px;
  background: red;
}

<a href="/" class="btn btn-blue">青いボタン</a>
<a href="/" class="btn btn-yellow">黄色いボタン</a>
<a href="/" class="btn btn-red">赤いボタン</a>

/* css */
.btn{
  color:#fff;
  padding:10px;
  border-radius: 5px;
}
.btn-blue{
  background: blue;
}
.btn-yellow{
  background: yellow;
}
.btn-red{
  background: red;
}

下の書き方の方が、将来的に拡張がしやすいのがわかると思います。

このように実際にコーディングした時に、どこまでclassをつけるべきか、どのような付け方をするべきかといった初心者が悩みがちなポイントもCSS設計を意識することで、ストレスなくコーディングを進めることができるようになってきます。

また、世界中には著名な制作者たちが考えたCSS設計の手法がすでに確立されています。

本書では「OOCSS」「SMACSS」「BEM」といった世界的に代表的な手法とその書き方を解説しています（googleコンソールで他人のコードを覗いてみると、ほとんどのコーダーがこれらの手法を使っているのがわかります）

これらの手法を元にCSSを組み立ててみると、決められたルールに乗っとったコーディングができるので、余計な思考をすることなく、早いコーディング技術を身につけることができるようになるというわけです。

特にclassの命名規則というのは初心者がつまづきやすいポイントですが、CSS設計にはclass名の付け方も明記されていますので、そのルールに則ってコードを打つだけで、class名を考えるという余計な時間が一切なくなります。

初心者がこの本を手に取ることで、確実に自分のコーディングレベルがあがるのを感じることができるはずです。

私も初心者の時この本に出会っていたらあんな粗末なコードを量産しなかったのに…

さらに詳しくCSS設計が学べるのが「CSS設計完全ガイド」

そしてCSS設計で読んで欲しいもう一冊は、「CSS設計完全ガイド」です。

リンク

こちらは最初に紹介した「CSS設計の教科書」よりさらに踏み込んだ解説書で、より細かいコードが載っています。

前者同様、「SMACSS」「BEM」といった有名なCSSの手法をより細かく扱っていて、すぐにでも実践に使えそうなコード例がたくさんありますので、自分の気に入ったものやできそうなものをどんどん取り入れていくといいです。

特に著者オリジナルの手法でもある「PRECSS」は、いわばCSS設計手法のいいとこ取りをしたもので、非常にわかりやすいです。私もたまに使います。

個人的には具体的な分わかりやすく、ずっと手元に置いておきたいのは「CSS設計完全ガイド」の方です。が、解説が少々難解なのでコーディング中級者以上向きかと思います。初心者がいきなり読んでも知識が追いつかないかも。

なので、脱初心者をしたい方は、まずは「CSS設計の教科書」の方を強くおすすめします。

コーダーが悩みやすい現場の問題を解説した「ざっくりつかむCSS設計」

リンク

上記で紹介した２冊でCSS設計の基本的な考え方や書き方はマスターできると思うのですが、実際の現場で起こりがちの問題に対して上手に進める方法をまとめたCSS設計の本がこちらの「ざっくりつかむCSS設計」です。

2021年発行なので今回紹介する3冊の中では一番新しく、最新の現場事情にのっとって書かれています。

良書なのですが、実務経験のない初心者がいきなり読んでも挫折しやすいと思うので、現場で困ったことが起きてしまった時に読んで欲しい一冊かも。

CSS設計の初心者は先に「CSS設計の教科書」を読んでからの方が理解がしやすいと思います。「CSS設計の教科書」は本当にわかりやすいので。

この本の特徴は、現場でのコーダーの悩みに親身に答えてくれるところにあります。

例えば、コーダーの実務での悩みとして、

デザイナーと連携する時に起きる問題
作ったHTMLをCMSに導入する時に起きる問題
プロジェクトチームの一員となった時に起きる問題

があります。

HTML/CSSの実装というのは、それ単体では成り立ちません。ただデザイナーが作ったものを機械的にHTML化するのではなく、デザイナーの意図を読み取らないと使い物にならなかったり、CMSに導入した時に崩れないものを考えなければいけません。その様な考え方のコツを教えてくれます。

また、この本の良いところは、初心者Webコーダーがつまづきやすいポイントを拾ってくれているところ。

上記の2冊はオーソドックスなレイアウトをCSS設計でどういうコードにするか、という実例が多数まとめられていますが、この本はもうちょっと現場にいる初心者に寄り添ったあるあるな悩みを解説しています。職場の先輩と会話しているような感じ。

例えばclassの名付け問題とかブロックの入れ子問題など。

特に大きく取り上げているのが、余白問題です。タイトルとセクションの間とか、ブロックとブロックの間のスペース、あれ。余白ってCSSで設定しても、意外とうまく使えないじゃないですか。レイアウトによっておかしな空間になったりとか。その度に独自のmarginを当てると設計の理念から崩れていってしまうし、悩ましいんですよね。

そんな余白問題に、筆者が独自の考え方を述べています。余白で悩むのは自分だけじゃないとわかって嬉しい。

余白についてこんなに長々と解説している書籍はみたことがない

CSSに正解はない

CSS設計の考え方やコードの書き方はWeb上にもたくさん情報はあるのですが、ポイントを丁寧にわかりやすくまとめているこの3冊を読むことで、正しい知識を過不足なくしっかりと手に入れることができます。

CSS設計とは手法であり、ルールではありません。この手法の通りにコードを組まなかった、命名規則を守らなかったからといってエラーになるという類のものではありません。

実際、今回紹介した本でも、これが唯一の正解！というコードではなく、方法のひとつとして解説をしているものが多いです。なのでまずは失敗を恐れずにコードを作ってみること。最初は写経でも構いません。実際にコードを書けば書くほど絶対に上手く早くなっていきます。

がんばって初心者を脱出しましょう！

どのCSS設計を使えばいいのか

CSS設計を一通り勉強すると、CSS設計にはいくつかの手法があるのがわかります。

代表的な手法が

・BEM

・OOCSS

・SMACSS

・FLOCSS

です。それぞれCSS設計の根幹としての仕様は同じですが、クラス名や構築のルールが違うので、どれかひとつのCSS設計を採用してチームで共有するというやり方が一般的です。

もしチームでのコーディングに参加するのであれば、それぞれの特徴や書き方についてベースを学ぶ必要があります。

書き方については、これまでに挙げた３冊（特に最初の２冊）を読めば、学習としては十分です。

また、乱暴な言い方をすると、完全に個人でCSSコーディングしその後も誰の手も入らないのであれば、ごちゃまぜのCSSでも問題となるわけではありません。（自分でルールを把握さえしてれば）

その他のCSSやHTML、Webコーディングに関する記事はこちら

CSS設計以外にも、中級Webコーダーになるために覚えるべき事項をまとめてありますので、ぜひ読んでみてください。