CSS変数（カスタムプロパティ）
第07回 • 40枚
ナレーション
第07回 スライド1: CSS変数（カスタムプロパティ）の世界へ
前回の復習
- PWAの基本概念（Web + Nativeの融合）
- Service Workerとオフライン対応
- プッシュ通知とインストール機能
今回のテーマ
「CSS変数（カスタムプロパティ）の基礎」
これまでの学習
- HTML: ページ構造
- CSS: スタイリング基礎
- レイアウト手法
CSS変数とは
値を変数として定義し、再利用できる仕組み
mindmap
root((CSS変数))
基本概念
値の変数化
再利用可能
一元管理
メリット
メンテナンス性向上
動的変更
JavaScript連携
活用場面
色の統一
サイズ管理
ダークモード
テーマ切替
主なメリット
- 値の一元管理
- メンテナンス性向上
- 動的なスタイル変更が容易
- JavaScriptとの連携
なぜ必要なのか
- サイト全体で統一した色やサイズを使用
- 変更時は1箇所を修正するだけ
- ダークモード実装などに最適
今回の目標
CSS変数の定義・使用方法をマスター
1/40