今回の課題

CSS変数へんすうを使つかって、背景はいけい色いろと文字色もじいろを変数へんすうで管理かんりしよう！

📖 解説を見る

🌙 ダークモードって何なに？

背景はいけいを黒くろ・文字もじを白しろにした「暗くらいテーマてーま」のデザインです。

✏️ CSS 変数へんすうを使つかうと簡単かんたん！

:root {
  --bg: white;
  --text: #1e293b;
}

body { background: var(--bg); color: var(--text); }

.dark {
  --bg: #0f172a;
  --text: #e2e8f0;
}

⚠️ ポイント：
・--変数名 で色いろなどをまとめて管理かんりできる
・var(--変数名) で呼よび出だす

ヒントを見る

:root に --bg と --text を定義して、body で var() を使おう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: ライトモードとダークモードの2つのスタイルを作つくって比くらべてみよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: --accent 変数へんすうでボタン色いろも一括管理いっかつかんりしよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: 好すきな色いろのテーマを3つ作つくろう！（ブルー・グリーン・パープルなど）（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

クエスト21：ダークモードを作ろう