ゲーム感覚で CSS3 の Flexbox を楽しく学ぼう

7 years ago

ゲーム感覚で CSS3 の Flexbox を楽しく学べるサービスがあったので紹介します.

ちなみに私は, 毎日それぞれ３回ずつクリアするのを一週間続けて, 手足のように Flexbox を使ってレイアウトを組めるようになりました. やっぱりゲームで学ぶのが一番楽しくて楽です!!

今まで漠然と Flexbox を使っていた方はこれから紹介するゲームで定着させてみてはいかがでしょうか.

Flexbox Froggy - CSS flexbox学習ゲーム

カエルの位置合わせゲームです.

Flexbox の様々なプロパティを使って対応する色の葉っぱの位置にカエルを動かすことで
ステージをクリアしてきます.

左側に解説とコードを入力する場所が, 右側にはカエルが表示されています. なんと日本語に対応しているので普通に読みながらやれば初心者の方でも手軽に Flexbox について学べます.

こちらはなんと Flexbox を使って Tower Defense を楽しめるゲームです. 大砲の配置を Flexbox のプロパティを使って移動させて出現する敵を倒すことでステージクリアです.

面白すぎるので, もっとステージ増やして欲しいんですよねぇ