まとめ

01のコードをもう一度読んでみよう

レッスン01で「最初から全部理解する必要はありません」と紹介したグローバルCSSの構成を、もう一度見てみましょう。

/* 1. CSSリセット */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
 
/* 2. ベーススタイル */
body { font-family: system-ui, sans-serif; line-height: 1.6; }
 
/* 3. デザイントークン（CSS変数） */
:root { --background: #ffffff; --text: #171717; }
 
/* 4. ダークモードの色定義 */
.dark { --background: #171717; --text: #ffffff; }
 
/* 5. レスポンシブなサイズ定義 */
h1 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); }

今なら、すべての行が何をしているか、なぜそう書くのかを説明できるはずです。

身についたスキル

このコースを通して、以下のスキルが身につきました。

グローバルCSSの設計

• 役割の判断 — あるスタイルをグローバルCSSに書くべきか、コンポーネントCSSに書くべきか判断できる
• 構成の設計 — リセット → ベーススタイル → デザイントークン → テーマ の順で組み立てられる
• 詳細度の設計 — グローバルCSSの詳細度を低く保ち、コンポーネントCSSで上書きしやすい土台を作れる

モダンCSSの活用

• CSS変数 — :root で色やサイズを一元管理し、var() で参照できる
• ダークモード — CSS変数の値を .dark クラスで切り替える仕組みを読み解ける
• clamp() — メディアクエリなしで、画面幅に応じたフォントサイズや余白を設定できる
• @layer — CSSの優先順位をレイヤーで明示的に管理し、読み込み順に依存しない設計ができる

お疲れ様でした！このコースはこれで完了です。

ご意見・ご感想があれば、お気軽に X（Twitter） までお寄せください。