CSS設計はコーディングの中でも中級者向けの内容で、ネットで学べるサービスや記事もあまりないので、書籍で勉強するのがベストです。
この記事では、『CSS設計の勉強といえばこれ！』といった人気の書籍2冊+2021年12月に出た書籍1冊の合計3冊を紹介します。
💡 コーディングの練習なら模写修行！
この記事の目次
CSS設計の勉強におすすめの本3つを実際に読んでレビュー
この3冊を紹介します。
どれか1冊だけ読むなら『CSS設計完全ガイド』にしますが、3冊全て読むことをおすすめします。読む順番についても後半で紹介します。
【CSS設計入門】class名の決め方(命名規則)から具体的な書き方まで詳しく解説↑このメディアにもCSS設計に関して、概要が学べるような記事があります。
Web制作者のためのCSS設計の教科書
- CSS設計の概要や重要性
- 有名なCSS設計手法の紹介と具体例
- Sassを使った方法や運用に関して
このような内容になっています。まずは『CSS設計とは何か、なぜ必要なのか、どんな設計手法が有名なのか』を学ぶのに適した書籍です。
2014年発売で少し古い書籍ですが、CSS設計の考え方や有名な設計手法は変わっていないので、CSS設計の勉強をする点に関しては問題ありません。具体例に出てくるプロパティは若干古かったりもしますが、プロパティを学ぶための書籍ではないので、問題ないでしょう。
著者の谷拓樹さんが考案した、FLOCSSの紹介もあります。日本ではFLOCSSを採用している人は多い印象があります。
具体例がそこまで多くないので、個人的には入門書的な位置付けだと思っています。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズCSS設計完全ガイド ~詳細解説+実践的モジュール集
前述した『Web制作者のためのCSS設計の教科書』のより詳しいバージョンだと思うとイメージしやすいかもしれません。具体例も多く紹介されています。728ページもあるのでかなりの量です。
勉強を始めたての時期は、CSS設計の考え方や手法を学んでも、いざ自分で書こうと思うと悩む点がたくさんあります。そんな時にこの書籍を見返して、参考にするような使い方もおすすめです。
この記事では3冊紹介していますが、どれか1冊だけ選ぶなら、この書籍(CSS設計完全ガイド)です。ただ、いきなりこの書籍から入ると難しと感じる人は多いはずです。
CSS設計完全ガイド ～詳細解説＋実践的モジュール集ざっくりつかむ CSS設計
2021年12月に発売された新しい書籍です。
CSS設計の書籍ですが、運用に関することも多めです。教科書的な書籍でもありますが、現場の事情も考慮した内容になっているので、現役でコードを書いている人からすると、共感できるポイントが多めです。
また、この書籍はCSS設計の勉強を始めて、実際に自分1人で書いてみた時につまづくポイントも多くカバーされていると感じました。『勉強をしていた頃にこの本があれば...』と思いました。
有名な設計手法の紹介は少なめなので、前述した2冊のうちどちらかは必須で読んだほうが良いです。
ざっくりつかむ CSS設計おすすめの読む順番
個人的におすすめの読む順番です。
- まずは『Web制作者のためのCSS設計の教科書』で概要を学ぶ
- 『CSS設計完全ガイド』で具体例も含めしっかり学ぶ
- 『ざっくりつかむCSS設計』で実務で悩むポイントを解決
イメージ的にこんな感じです。
とはいえ順番が変わっても大きな影響はないかもしれません。3冊読んだほうが良いのは間違いありません。
CSS設計に正解はない！環境に合わせてカスタマイズは必須
CSS設計に唯一の正解はありません。
- 管理画面のコーディング
- メディアやブログのコーディング
- 画像や細かい装飾が多めのLPのコーディング
例えば、これらでベストな書き方は変わることもあります。毎回90~100点を取れるように設計手法を使い分けても良いです。どんなサイトでも70~80点が取れるような決まった手法を使っても良いでしょう。
書籍で勉強することは大事ですが、そこに書いてあることをそのまま使うのではなく、自分の環境に最適化してカスタマイズすることはほぼ必須です。
初心者向けCSS設計手法を紹介！カオスなコードを卒業しよう！↑僕たちが運営している、模写修行で採用しているCSS設計手法に関する記事です。有名な手法を参考にしつつ、初心者でもわかりやすいようにしたつもりです。
超実務向け！コーディングの練習が出来るサービス作りました 🎉
模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。
こんな方におすすめ！
- 実務のレベル感を知りたい
- プロの制作フローを学びたい
- 何を考えながらコードを書くのか知りたい
- 基礎学習中、もしくは終えたばかり
- CSS設計やSCSSを使った書き方を学びたい
模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。
他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。
コーディング教材の【模写修行】は他の教材と何が違うのか？嬉しい声もいただいています！
自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇
classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet
デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet
答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet
この記事を書いた人
Gaku / @gaku92014091
大学・大学院時代から個人で仕事をする。フリーランス歴11年 / 今は法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き！
3冊とも実際に読んでレビューしています！CSSがある程度書けるようになったら、CSS設計の勉強は必須なので是非参考にしてみてください👍