CSSのセレクタをゲーム感覚で学べるサイト「CSS Diner 」!

2015/04/06

こんにちは。
今回はCSSのセレクタをゲーム感覚で学べるサイト「CSS Diner 」!です。

CSSに自信がない方や初心者がやってみるといいんじゃないかと思います。

CSSのセレクタをゲーム感覚で学べるサイト「CSS Diner 」!

CSS Diner

css-diner

http://flukeout.github.io/

 

CSS Dinerのやり方

css-diner2

上のイラストの下駄の上の動いている部分だけをセレクタで指定します。
イラストの下のHTML ViewerのHTMLを見ながら、CSS Editorの所にセレクタを記述して[enter]を押します。
正解だと次の問題にいき、問題を解いていくとレベルが上がり、徐々に難しくなってきます。
レベル26まであり、エンディングもありますので、是非クリアしたいですね!

 

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

 

いかがでしたか。けっこうおもしろいので、一度やってみてはどうでしょうか。
以上でCSSのセレクタをゲーム感覚で学べるサイト「CSS Diner 」!でした。

Related Post

topへ戻る