ゲームで遊びながらCSSのセレクタを学習することができる「CSS Diner」

ゲームで遊びながらCSSのセレクタを学習することができる「CSS Diner」

ゲームで遊びながらCSSのセレクタを学習することができる「CSS Diner」

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

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

スポンサードリンク

CSS Dinerの遊び方

CSS Dinerにアクセスします。

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

CSS Diner

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

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

あとがき

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です