NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

CSSのセレクタを遊びながら学べる(かもしれない)CSS Dinerが楽しい

bell賞味期限切れコンテンツ

この記事は公開または最終更新から906日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

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!

 

TAGS