スキルアップカレッジ CSS 設計とコンポーネント指向
公開日：
コース概要
「書き足すたびに、どこかが崩れる」——CSS を書き続けていると、多くの人が一度はぶつかる壁です。本コースは、その原因を「書き方の下手さ」ではなく「名前と責任範囲を決めていないこと」だと捉え直すところから始めます。詳細度とカスケードの整理、役割にもとづく命名規則、CSS カスタムプロパティによる値の一元管理、CSS Grid を使った 2 次元レイアウト、部品として設計するコンポーネント指向、ユーティリティファーストという選択肢、小さなデザインシステムの構築、そして既存 CSS のリファクタリングまでを 8 レッスンで体系的に学びます。HTML と CSS の基礎を身につけた方が、増えても壊れない CSS へと進むための続編です。
学習の流れ
レッスン 1 と 2 で土台を整えます。CSS がなぜ壊れるのかを詳細度とカスケードの視点から整理し、見た目ではなく役割で名前を付ける発想へと進みます。レッスン 3 と 4 では、値と配置という 2 つの技術要素を扱います。CSS カスタムプロパティで値を一元管理し、CSS Grid で 2 次元のレイアウトを組めるようにします。レッスン 5 から後半に入り、部品として設計するコンポーネント指向を学びます。レッスン 6 では対照的な設計思想であるユーティリティファーストを取り上げ、どちらが正しいかではなく何を優先するかで選ぶという視点を持ちます。レッスン 7 では、ここまでの要素を統合して小さなデザインシステムを組み立てます。最後のレッスン 8 で、実際の現場でぶつかる「既存の CSS をどう整理するか」という保守とチーム運用の課題に取り組みます。前半（レッスン 1〜4）は「整理と土台」、後半（レッスン 5〜8）は「設計と運用」という二部構成です。
このコースで学べること
- ✓ 詳細度とカスケードの仕組みを理解し、!important に頼らずに優先順位を制御できる
- ✓ 見た目ではなく役割にもとづいてクラス名を設計できる（BEM の考え方を含む）
- ✓ CSS カスタムプロパティで値を一元管理し、同じ値の重複を防げる
- ✓ CSS Grid の基本を理解し、Flexbox との使い分けができる
- ✓ 部品として再利用できるコンポーネントを設計できる
- ✓ ユーティリティファーストという選択肢を理解し、状況に応じて設計方針を選べる
- ✓ 小さなデザインシステム（デザイントークン・部品カタログ）を構築できる
- ✓ 既存の CSS を安全にリファクタリングし、チームで保守できる構造に整理できる
対象者
HTML と CSS の基礎（セレクタ・ボックスモデル・Flexbox）を学び終えた方。書き足すたびにほかの場所が崩れるという経験をしたことがある方。複数人で 1 つのサイトを触る場面が増えてきた方。制作会社やデザイナーと共通の言葉で話したいと考えている方
講師紹介
片桐 遼（かたぎり りょう）
フロントエンドエンジニア／デザインシステム設計
受託の Web 制作会社でマークアップとフロントエンド実装を 6 年経験。あるとき、1 ファイル 8,000 行に膨れた CSS の改修を任され、どこを触ると何が壊れるか誰にもわからない状態に直面した。その後、事業会社に転じて 7 年、自社サービスのデザインシステムを立ち上げ、デザイナー 4 名・エンジニア 12 名が共通の部品を使う体制を設計した。最初に作ったルールは細かすぎて誰も守らず、半年で作り直した経験を持つ。2025 年から複数社のフロントエンド設計を支援している
受講される方へのメッセージ
「CSS が壊れるのは、書き方が下手だからではありません。名前と責任範囲を決めていないからです。私は 8,000 行に膨れたスタイルシートの前で、どこを触ると何が壊れるかわからない恐怖を味わいました。そのあと、デザインシステムを一から作り、最初のルールが細かすぎて誰にも守られず、半年で作り直しもしました。うまくいった話だけをお伝えするコースではありません。壊れた経験と、作り直した経験の両方から、増えても壊れない CSS の考え方をお届けします。守られないルールは、ルールのほうが悪いのです」
レッスン一覧
-
1
なぜ CSS は壊れるのか——詳細度とカスケードを整理する
CSS が破綻していく典型的な経過、詳細度の数え方、カスケードと適用順、!important に頼るとどうなるか、強さで勝とうとしないという原則を学ぶ
-
2
名前の付け方——役割で名付ける
見た目由来の名前が破綻する理由、役割で名付ける発想、BEM の考え方（Block・Element・Modifier）、命名の粒度を学ぶ
-
3
カスタムプロパティ——値を一元管理する
CSS 変数の書き方とスコープ、色・余白・文字サイズをまとめる方法、同じ値を 2 回書いたら変数にする判断、テーマ切り替えへの応用を学ぶ
-
4
CSS Grid——2 次元のレイアウトを組む
Flexbox との使い分け（1 次元と 2 次元）、行と列の定義、領域への名前付け、Flexbox との併用を学ぶ
-
5
コンポーネント指向——部品として設計する
部品は置かれる場所を知らないという原則、余白を外側が持つか内側が持つか、状態の表現、ボタン・カード・フォームを部品として組む方法を学ぶ
-
6
ユーティリティファーストという選択肢
ユーティリティクラスの発想、Tailwind CSS が広めた考え方、BEM 的な設計との比較、混ぜて使うときの線引きを学ぶ
-
7
小さなデザインシステムを作る
デザイントークン（色・余白・文字・角丸・影）の決め方、部品カタログという発想、デザイナーとの共通言語、ルールと運用の設計を学ぶ
-
8
保守できる CSS へ——リファクタリングとチーム運用
既存の CSS を整理する順序、消してよい CSS の見分け方、レビューで見るべき点、新しく入った人が迷わない構造、修了後の学習方向を学ぶ
-
✓
総復習テスト
全レッスンの内容を振り返るテスト
このコースの用語集（65語）
- 暗黙のグリッド
- `grid-template-columns` などで定義した行数を超える要素が入ったとき、CSS Grid が自動的に生成する行や列のこと。高さは `grid-auto-rows` で調整できる。
- ID セレクタ（あいでぃー せれくた）
- `#header` のように ID を指定するセレクタ。詳細度の計算では「ID の列」に数えられ、クラスをいくつ重ねた指定よりも強くなる。
- 値の重複
- 同じ色や余白の値が CSS の複数の場所に別々に書かれている状態。名前の重複より見つけにくく、変更のたびに探す手間が生まれる。
- 1 次元と 2 次元
- レイアウト技術を分類する視点。1 方向への並びに強い技術と、行と列を同時に扱える CSS Grid の役割分担を表す言葉として使う。
- カスケード（かすけーど）
- 複数の CSS ルールが同じ要素にぶつかったとき、`!important`・詳細度・ソース順の順番で、どのルールを適用するか決める仕組み。
- 疑似クラス（ぎじくらす）
- `:hover` や `:disabled` のように、要素の状態や位置にもとづいてスタイルを適用するセレクタ。詳細度の計算ではクラスの列に数えられる。