CSS Dinerは、ゲームで遊びながらCSSのセレクタについて学ぶことができるサイトです。

CSSを勉強し始めたばかりという方は、ぜひチャレンジしてみてください。

CSS Dinerの遊び方

CSS Dinerにアクセスします。

右側にHTMLが表示されるので、絵の中の動いている部分をセレクタで指定します。

例えば、最初の問題はお皿2枚を指定するので、「plate」と入力してEnterを押下します。

徐々に難易度が上がっていくので、どこまでいけるかチャレンジしてみましょう。

あとがき

ゲームをやっているうちに、入れ子になったHTMLの中で、どうやってセレクタを指定すればよいのか感覚が掴めてきますね。CSSを学び始めた頃にやると、楽しみながら効果的に学習できると思います。