このコースで身につくスキル
- -グローバルCSSの役割とコンポーネントCSSとの違いを理解する
- -CSS変数・カスケード・@layer の仕組みを説明できる
- -CSS変数を使ったダークモード対応の仕組みを読み解ける
- -clamp() を使ったレスポンシブデザインを書ける
1
グローバルCSSとは何か
なぜ「アプリ全体に適用されるCSS」が必要なのか。コンポーネントCSSとの違いと、グローバルCSSの役割を理解します。
2
カスケードと詳細度
同じ要素に複数のスタイルが当たったとき、どれが勝つのか。CSSの優先順位ルールを理解します。
3
CSSリセットとベーススタイル
ブラウザごとに違うデフォルトスタイルを揃える「CSSリセット」と、サイト全体の土台となるベーススタイルを学びます。
4
CSS変数（カスタムプロパティ）
色やサイズを1箇所で管理できる「CSS変数（カスタムプロパティ）」の書き方と使いどころを学びます。
5
ダークモード
CSS変数を切り替えるだけでダークモードを実現する仕組みを学びます。
6
clamp() でレスポンシブ対応
メディアクエリを使わずに、画面幅に応じてフォントサイズや余白を滑らかに変化させる clamp() を学びます。
7
@layer で整理する
CSSの読み込み順による上書き問題を @layer で解決する方法を学びます。
8
まとめ
コースで学んだ内容を振り返り、グローバルCSSの全体像を確認します。