CSS
【CSS】ゲームしながらflexboxを学習できる「Flexbox Froggy」
2020年03月16日 8:00
おはようございます、hgmです✨
本日はCSSのflexboxを、ゲームしながら学習できるサイト「Flex Froggy」をご紹介します。
どのようなゲーム？
こちらはカエルたちをCSSを書いて助けてあげる、という可愛らしいゲームです。
flexboxはとても便利なのですが、プロパティ・値が多く覚えていないと使いづらいイメージがありました。
ところがこの「Flex Froggy」では、ゲーム感覚で全24ステージを進めることで覚えることができ、プロパティと値の説明があるので、知識のない方も安心して遊べます！
解説をみながら入力欄にCSSを書くと右側にあるカエルのアニメーションが動くので、flexboxの動きを確認できます。
筆者は24ステージを一気に進めたのですが、15分ほどかかりました。
まとめ
今回の「Flex Froggy」は楽しく学習できる点が素晴らしいなと思い、ご紹介させていただきました。
初心者の方はもちろん実際に使用されている方でも復習として遊べるので、一度試してみてはいかがでしょうか？
関連記事
この記事を書いた人
hgm
農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます！
