cssdiner

スタイルシートを作成する時は、HTMLの要素を選択してあれこれやるわけなんですが、この要素を選択する方法が実はいろいろありまして、中にはかなりマニアックな選択方法もあります。

それらを簡単なゲーム形式で遊びながら学べるサイトを教えてもらったので遊んでみたら結構面白かったので今日はそれを紹介しようと思います。

CSS Diner は先にも書いたように、簡単なゲーム形式でCSSのセレクタを勉強できるサイトです。

アクセスすると、テーブルのようなイラストとCSS Editor、HTML Viewer、そしてヒントが書かれた画面が現れます。

 

イラストの上にはお題が書かれていて、例えば「お皿の上のリンゴを選択して」みたいな感じで問題が出題されます(実際には英語で書かれていますが簡単な英語なので多分そこで悩むことは無いと思います)

解答は、CSS Editor の1行目(青く点滅している行)にセレクタのみ書きます。

例えばお皿を選択する問題なら「plate」とだけ打ってEnterを押せばOK。

間違えた場合、そのセレクタで選択される要素が「ブルブルっ」と震えて「選びすぎだよー」といった感じに教えてくれます。

また、そこで使うべきセレクタのヒントが右側に出ていますので、それも参考にしながら答えを入力していきます。

中にはかなりマニアックなセレクタも登場しますのが、だいたいはヒントを見ていればとけるはずです。

因みに全問クリアすると……CSSの神になれますw

ということで是非CSSの神を目指して頑張ってみてください。

CSS Diner – Where we feast on CSS Selectors!

 

コメントする