Diner」をご紹介TwitterFacebookGoogle+はてブPocketroom9(ルームナイン)にお越し頂きありがとうございます。Qtaro(@Daisuke_9taro)です。先日colissさんで、CSSのお勉強ができちゃう「ちょっと面白いゲーム」が紹介されていたので、実際にやってみた感想踏まえ紹介したいと思います。最近はHTMLやCSSのようなWebの知識がそんなにない方でも、WordPressなんかのブログシステムを利用することで自分好みにカスタマイズすることが容易に出来るようになりました。ある程度弄れるようになってきたときに、一つ壁となるのがこのゲームで学べるCSSの「セレクタ」かなと思います。「要素の調査」できるようになったけど、実は意味は良く分かってない。触りたいところはあるのに、CSSのどこに書いているのかいつも中々探せないそんな方はこのゲームで遊びながら「セレクタ」勉強してみると自分のブログのカスタマイズが更に捗るかもですよ♪では早速以下よりどうぞ。実際にプレイするには以下のサイトに飛んでください。Diner【遊び方】「セレクタ」をひたすら書いていくだけ!!やり方についてはcolissさんの記事でも紹介されていますが、特に難しいことはなく、画面内で動いている要素を選択するセレクタを書いて、「enter」ボタンをクリック。正解したら次の問題に進みます。問題は全部で「26問」得点や制限時間はナシ問題は全部で「26問」。制限時間はありません。間違えても別に減点されるとかもなく、ただただ小憎たらしくリンゴや弁当がプルプルっと震えるだけです。ちなみにこのときプルプル震えるのが「自分が記述したセレクタで選んでいる要素」なので、間違えても「あー今自分はこれを選ぶセレクタを書いているのかぁ」という勉強にもなりますね。CSS初心者の方はまず「10問」クリア目標で!!画面右側に問題の一覧も書かれているんですが、実際にやってみた感想としては、CSSこれから勉強するぞという方に関しては、まず「10問」クリアが一つのゴールかなと思います。そこから先はもう一段階レベルが上がります。最後の方はCSS3から導入された割と新しめのセレクタが登場するので、「昔ちょっとCSS触っていたよ〜」という人でも「え、CSS3ってこんなセレクタあるんだ??」となるかもしれません。CSS3のセレクタを覚えたい(復習したい)中級者の方も遊んでみると良いと思いますよ。今回の記事は以上です。2010年から4年間都内で会社員した後、2014年に地元秋田に戻りフリーランスに。秋田のローカルメディアCLOCKNOTE運営中。最近はLampというおでかけWebアプリ開発してます。2018.1.5【何ができるの?】5000円は安すぎ...。【1巻以降も意外と読めた!!】全部0円。最近落とした無料で読めるKindleマンガまとめWordPressテーマ「ALBATROSS」使用中このブログで利用中のレンタルサーバーWordPressをご利用の方で「ブログの表示が遅い」「管理画面が重い」とお悩みの方にはこのブログでも使用しているエックスサーバーがおすすめです。他のサーバーからの移転は以下のエントリーを参考にどうぞ。ZG」愛用中!MacをメインPCとして使い続けてきている管理人ですが、出来るだけお得に高性能なPCを手に入れるべくドスパラでWindowsの「ゲーミングPC」を購入しました。オンラインゲームを綺麗なグラフィックでサクサク快適にプレイしたい方はもちろん、一眼レフカメラで撮影したRAW現像や動画編集等の重たい作業にストレスを感じている方にもおすすめですよ。