コンテンツへスキップ

CSS 設計の判断基準を、
体系的に身につける

¥1,500

この本を読み終えたとき

Before

  • Component と Project の違いが分からない
  • 修正するたびに !important に頼る
  • ダークモード対応で CSS が崩壊する
  • テンプレートを使っても人によって書き方がバラバラ

After

  • 「なぜそこに書くか」を自分の言葉で説明できる
  • @layer で詳細度の問題から解放される
  • Theme 層の切り替えだけでダークモードが完結する
  • チーム全体の CSS が一貫する判断基準を共有できる

目次

ch0 mFLOCSS とは何か 無料
ch1 なぜ今、CSS 設計を学ぶのか 無料
ch2 8 層の設計根拠
ch3 実案件の判断 Q&A
ch4 リファレンス実装ハンズオン
ch5 設計の進化と展望

まずは無料パートから

ch0 と ch1 は無料で読めます。
mFLOCSS の設計思想と「なぜ今、CSS 設計を学ぶのか」を体験してください。

無料で読み始める（Zenn）

有料パートで得られるもの

8 層の設計根拠の詳細

なぜ Tokens と Theme を分けるのか、なぜ Animation を独立させるのか。各層の設計判断の「なぜ」を深く解説します。

実案件の判断 Q&A 7 ケース

「このスタイルはどの層に書く？」という実務で頻出する判断を、具体的なコード例とともに 7 つのケースで解説します。

リファレンス実装の全コード解説

oklch カラースケールの設計、Tokens-Theme の 3 層参照チェーン、各層の全実装コードを解説します。

書籍を購入する（¥1,500）

著者

Shunei / しゅんえい

Systems Architect / Web Engineer。20年のミッションクリティカルなシステム開発で「仕組みで品質を担保する」設計力を体得。堅牢な設計思考を Web に移植し、FLOCSS をモダン CSS で再設計した「mFLOCSS」を提唱。「作る」から「設計する」へ——コードより「なぜそう書くか」を大切にする。

X (@shunei_web)

よくある質問

Q: FLOCSS を知らなくても読めますか？

読めます。ch0 と ch1 で CSS 設計の基礎と mFLOCSS の全体像を解説しているため、FLOCSS の知識がなくても理解できます。FLOCSS を知っている方は、より深く「なるほど」と感じられるはずです。

Q: Sass は必要ですか？

不要です。mFLOCSS はブラウザが直接解釈する Pure CSS だけで構築されています。Sass も PostCSS も必要ありません。

Q: 内容の更新はありますか？

あります。CSS の進化や読者のフィードバックに応じて、内容を更新していきます。一度購入すれば、更新版も追加料金なしで読めます。

書籍を読む（Zenn Books） まずはスターターを試す