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」!でした。

Flexboxを使う際に役立つ便利なサイトをまとめた記事はこちら

Flexboxを使う際に役立つ便利なサイト4選
こんにちは。 今回はFlexboxを使う際に役立つ便利なサイト4選です。 Flexboxを使うと複雑なレイアウトもシンプルなコードで実装できる...

この記事を読んだ人はこんな記事も読んでいますよ