CSSの「なぜ効かない？」をゲームにする
CSSを書いていると、同じ要素に複数のスタイルが指定されて「なぜこちらが優先されたのか分からない」と感じることがあります。SELECTOR BATTLEは、CSSセレクタ同士の勝敗を予想しながら詳細度の考え方を覚える学習ゲームです。
基本ルールのイメージ
画面に複数のセレクタとHTML構造を表示し、「最終的にどの色になるか」「どの指定が適用されるか」を選びます。回答後に結果だけでなく、どの条件で優先されたのかを視覚的に確認できる構成を目指します。
学習テーマ
- 要素セレクタ・クラス・IDの違い
- 複合セレクタと詳細度
- 同じ詳細度だった場合の指定順
- 継承されるプロパティの考え方
- 後半では!importantなど混乱しやすい指定も扱う
想定ユーザー
CSSを書けるようになってきたものの、セレクタの優先順位で混乱することが多い初心者〜初級者を主な対象にします。
既存ツールとの違い
CODE LAB : HTML & CSSの総合的な学習とは分け、SELECTOR BATTLEはCSSの詳細度・優先順位だけを短時間で反復する専門トレーニングとして位置付けます。
研究ステータス
現在はNEXT EXPERIMENTS段階です。問題の難易度、初心者向け解説、対戦風の演出が学習の邪魔にならないバランスを研究します。