模写修行メディア

【レビュー記事】CSS設計に関するおすすめの本はこの3冊で決まり!

CSS設計はコーディングの中でも中級者向けの内容で、ネットで学べるサービスや記事もあまりないので、書籍で勉強するのがベストです。

この記事では、『CSS設計の勉強といえばこれ!』といった人気の書籍2冊+2021年12月に出た書籍1冊の合計3冊を紹介します。

3冊とも実際に読んでレビューしています!CSSがある程度書けるようになったら、CSS設計の勉強は必須なので是非参考にしてみてください👍

gakuのアイコン

私たちが運営している、模写修行は、実践的なCSS設計の勉強もできる、数少ない教材です。少し難しいですが、実務レベルの練習ができるので、ぜひご利用ください。

模写修行でCSS設計は完璧!

さっそく練習する

無料教材もあり!

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターやってます 👆

この記事の目次

CSS設計の勉強におすすめの本3つを実際に読んでレビュー

この3冊を紹介します。

どれか1冊だけ読むなら『CSS設計完全ガイド』にしますが、3冊全て読むことをおすすめします。読む順番についても後半で紹介します。

【CSS設計入門】class名の決め方(命名規則)から具体的な書き方まで詳しく解説

↑このメディアにもCSS設計に関して、概要が学べるような記事があります。

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

Web制作者のためのCSS設計の教科書
Web制作者のためのCSS設計の教科書(2014年発売)
著者
著者はサイバーエージェントの谷 拓樹さんです。FLOCSSというCSS設計手法の考案者です。
  • CSS設計の概要や重要性
  • 有名なCSS設計手法の紹介と具体例
  • Sassを使った方法や運用に関して

このような内容になっています。まずは『CSS設計とは何か、なぜ必要なのか、どんな設計手法が有名なのか』を学ぶのに適した書籍です。

2014年発売で少し古い書籍ですが、CSS設計の考え方や有名な設計手法は変わっていないので、CSS設計の勉強をする点に関しては問題ありません。具体例に出てくるプロパティは若干古かったりもしますが、プロパティを学ぶための書籍ではないので、問題ないでしょう。

著者の谷拓樹さんが考案した、FLOCSSの紹介もあります。日本ではFLOCSSを採用している人は多い印象があります。

具体例がそこまで多くないので、個人的には入門書的な位置付けだと思っています。

CSS設計完全ガイド ~詳細解説+実践的モジュール集

CSS設計完全ガイド
CSS設計完全ガイド ~詳細解説+実践的モジュール集(2020年発売)
著者
著者は半田 惇志さんです。PRECSSというCSS設計手法の考案者です。

前述した『Web制作者のためのCSS設計の教科書』のより詳しいバージョンだと思うとイメージしやすいかもしれません。具体例も多く紹介されています。728ページもあるのでかなりの量です。

勉強を始めたての時期は、CSS設計の考え方や手法を学んでも、いざ自分で書こうと思うと悩む点がたくさんあります。そんな時にこの書籍を見返して、参考にするような使い方もおすすめです。

この記事では3冊紹介していますが、どれか1冊だけ選ぶなら、この書籍(CSS設計完全ガイド)です。ただ、いきなりこの書籍から入ると難しと感じる人は多いはずです。

ざっくりつかむ CSS設計

ざっくりつかむCSS設計
ざっくりつかむ CSS設計(2021年発売)
著者
著者はピクセルグリッドの高津戸 壮さんです。ピクセルグリッドはフロントエンドに特化した会社です。

2021年12月に発売された新しい書籍です。

CSS設計の書籍ですが、運用に関することも多めです。教科書的な書籍でもありますが、現場の事情も考慮した内容になっているので、現役でコードを書いている人からすると、共感できるポイントが多めです。

また、この書籍はCSS設計の勉強を始めて、実際に自分1人で書いてみた時につまづくポイントも多くカバーされていると感じました。『勉強をしていた頃にこの本があれば...』と思いました。

有名な設計手法の紹介は少なめなので、前述した2冊のうちどちらかは必須で読んだほうが良いです。

おすすめの読む順番

ざっくりつかむCSS設計

個人的におすすめの読む順番です。

  1. まずは『Web制作者のためのCSS設計の教科書』で概要を学ぶ
  2. 『CSS設計完全ガイド』で具体例も含めしっかり学ぶ
  3. 『ざっくりつかむCSS設計』で実務で悩むポイントを解決

イメージ的にこんな感じです。

とはいえ順番が変わっても大きな影響はないかもしれません。3冊読んだほうが良いのは間違いありません。

【駆け出しの方へ】独学に限界を感じてませんか?

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか?

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターは全員現役エンジニア 👆

CSS設計に正解はない!環境に合わせてカスタマイズは必須

CSS設計に唯一の正解はありません。

  • 管理画面のコーディング
  • メディアやブログのコーディング
  • 画像や細かい装飾が多めのLPのコーディング

例えば、これらでベストな書き方は変わることもあります。毎回90~100点を取れるように設計手法を使い分けても良いです。どんなサイトでも70~80点が取れるような決まった手法を使っても良いでしょう。

書籍で勉強することは大事ですが、そこに書いてあることをそのまま使うのではなく、自分の環境に最適化してカスタマイズすることはほぼ必須です。

初心者向けCSS設計手法を紹介!カオスなコードを卒業しよう!

↑僕たちが運営している、模写修行で採用しているCSS設計手法に関する記事です。有名な手法を参考にしつつ、初心者でもわかりやすいようにしたつもりです。

独学に限界を感じていませんか?

現役エンジニアによるメンタリングサービス作りました!

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

模写修行のトップページのスクリーンショット
模写修行

実務レベルを体験するためのコーディング練習教材