復習にもオススメ!ゲーム感覚でCSSのセレクタを学べる「CSS Diner」 | Select *
Web Webサービス Web制作

復習にもオススメ!ゲーム感覚でCSSのセレクタを学べる「CSS Diner」

css-diner3オハヨウゴザイマス!
Webアプリケーションエンジニアの@deepblue_willです。

Webと切っても切れないのがCSSです。CSSではセレクタと言われるものを記述してレイアウトやデザインをしていくわけなんですが、これが意外と曖昧に覚えている方もいるんではないでしょうか?そんなCSSのセレクタをゲーム感覚で力試しできるWebサービスがあるので紹介します。

CSS Diner

CSS Diner – Where we feast on CSS Selectors!

テーブルの上に動いている物体に合致するようにセレクタを書いていくWebサービスです。
右側にHTMLが提示されているので、それを踏まえてセレクタを書いていきます。
css-diner2

分からない場合、右側をみればヒント(ほぼ答え)が書いてあります。
css-diner

すべてクリアすると「貴方はCSSの神です!」と褒められますよ!
css-diner3

最後に

そこそこ分かっているつもりで挑んでみたんですが、結構わからないのがあってちょっと凹みました。
擬似要素あたりは結構あやふやな部分があるのは重々承知だったのですが、
+*を完全に忘れてました。
普段使ったことないからなー。

こんなかんじに、新しい発見もあると思うので、CSSに慣れた方でも是非やってみてください。

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)