← クエスト一覧

クエスト47：ダークモード切り替え

スライド 1 / 2

コーデ

💻 コード例

実行結果

今回の課題

CSS変数を使ってライト/ダークモードを切り替えられるページを作ろう！

📖 解説を見る

🌙 CSS変数でダークモードを作ろう！

--変数名 で CSS 変数を定義し、:root と .dark クラスで切り替えよう！

ヒントを見る

:root と .dark クラスで --bg-color と --text-color を切り替えよう！

📄 見本

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

💻 コードエディタ

あなたの出力

次へ →

🏠 ホームへ

れんしゅうもんだい

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

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

未挑戦

問題 1: ダークモード時のボタン色を変えよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: 新しいCSS変数 --border を追加しよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: transition をもっと遅く（0.5s）にしよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

コピーしました！