CSSのセレクタがちょっとあやふやな人はやってみて! 楽しみながらCSSのセレクタを学ぶ -CSS Diner

ゲーム感覚で楽しみながら、CSSのセレクタを学ぶことが出来るオンラインコンテンツを紹介します。

サイトのキャプチャ

CSS Diner

遊び方は簡単!
お皿や料理などのアニメーションしている箇所をCSSのセレクタで指定していきます。

サイトのキャプチャ

L.1にセレクタを入力

1問目はお皿が二枚アニメーションしているので、右のHTMLを参考にしながら「plate」を入力。

サイトのキャプチャ

セレクタ入力後は「Enter」キー
間違うと、お皿がぶるぶる震えます。

正解すると、次の問題が表示されます。

サイトのキャプチャ

セレクタの問題は26問が用意されており、右上から全部の問題が一覧できます。

サイトのキャプチャ

top of page

©2017 coliss