CSS3のFlexboxをゲーム感覚で学べるサイト「Flexbox Froggy」!

2015/12/28

こんにちは。
今回はCSS3のFlexboxをゲーム感覚で学べるサイト「Flexbox Froggy」!です。

ゲームをしながらCSS3のFlexboxを身につけられるサイトを紹介します。

CSS3のFlexboxをゲーム感覚で学べるサイト「Flexbox Froggy」!

Flexbox Froggy

flexbox-froggy

http://flexboxfroggy.com/

 

「Flexbox Froggy」の使い方

flexbox-froggy2

Flexboxプロパティを使って、カエルを葉の上に乗せるゲームです。
画面左の上側のヒントを見ながら、下のCSSのぬけた箇所を埋めていきます。
全部で24問あります。
だんだんレベルが上がり難しくなってきますよ!
ある程度、Flexboxを理解している人も挑戦してみてもいいかもしてませんね。

 

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

 

いかがでしたか。「Flexbox Froggy」でFlexboxを勉強してみてはどうでしょうか。
以上でCSS3のFlexboxをゲーム感覚で学べるサイト「Flexbox Froggy」!でした。

topへ戻る