flexboxfroggy

Flexbox Froggyは、Thomas Park氏が作成したブラウザベースの教育用ゲームで、CSSフレックスボックスレイアウトを魅力的かつ実践的な方法で学べます。このゲームは、24の段階的に難易度が上がるレベルで構成されており、プレイヤーはflex-direction、justify-content、align-items、flex-wrap、align-content、flex-flow、orderなどの正しいフレックスボックスCSSプロパティを記述して、カエルのキャラクターを対応するスイレンの葉の上に配置する必要があります。 各レベルでは、新しいフレックスボックスの概念が簡単な説明と視覚的なプレビューとともに紹介されます。プレイヤーはエディターペインにCSSコードを入力し、カエルが所定の位置に移動するのを見ながら即座にフィードバックを得られます。このゲームはflexboxfroggy.comで完全にブラウザ内で動作し、インストールは不要です。 このプロジェクトは、MITライセンス（コード）とクリエイティブ・コモンズ表示3.0（画像）の下でオープンソースとして公開されています。コミュニティの貢献者によって50以上の言語に翻訳されており、中国語（簡体字および繁体字）、日本語、韓国語、スペイン語、フランス語、ドイツ語、ロシア語、アラビア語などが含まれます。翻訳はGitHubリポジトリを通じて管理されており、貢献者はプルリクエストを介して新しい言語を追加できます。 Flexbox Froggyは、フロントエンド開発のチュートリアル、コーディングブートキャンプ、CSS学習リソースで広く参照されており、フレックスボックスレイアウトを習得するためのアクセスしやすい入門ポイントとして利用されています。ソースコードは静的サイトであり、セルフホスティングやオフラインでの使用に適しています。