以前当ブログでも簡単にですが紹介させてもらったことがあり、カエルを移動させることで楽しくFlexboxについて学べるということで見かけた人も多いと思う「Flexbox Froggy」の日本語版が公開されていたのでご紹介します。説明が全て日本語になったことで、英語が苦手という人でもより学習しやすいと思います。
サイトは上のキャプチャのようになっており、ページ左側に問題・各プロパティや値の説明・エディタが、右側にカエルと蓮の葉のイメージがそれぞれ表示されています。
問題はカエルが蓮の葉に乗れるように助けてあげるというものになっており、それをFlexboxを使って助けていくことで、各プロパティや値がどのような動きになるのかを楽しみながら学習できるという内容になっています。
問題は全24問で最初は単純に1匹のカエルを助けるだけですが、どんどん進んでいくとキャプチャのようにカラーが異なるカエルをそれぞれカラーの違う蓮の葉に乗せてあげるというように難易度があがっていきます。
ただ、いずれの問題も「flex-directionを使って…」などのようにどのプロパティを使うべきなのかヒントをくれたり、そのプロパティで使える値を詳細付きで一覧化してくれてるので、これからFlexboxについて学ぶという人でも問題なく進めていけると思います。
また、値のヒントがないページだったとしても文章内にあるプロパティにhoverすればキャプチャのようにヒントを表示してくれます。
特にここ最近はこういったFlexboxをテーマにしたサイトやチュートリアルなど沢山見かけるので絶対これがいいとは言い切れませんが、個人的にはこれから学ぼうとしている人にはどのようなプロパティや値があり、それぞれどのような動きになるのかわかりやすくて良いのではないかなと思います。
また、これ以外でFlexboxを学べるサイトを探しているという場合は、以下で勉強したい・理解を深めたい時に参考になると思うものを幾つかまとめて紹介しているので、興味ある方はこちらもご覧になってみてください。