Flexbox Froggy（フレックスボックスフロギー）とは
Flexbox Froggy は、CSSのFlexbox（フレックスボックス）というレイアウト技術を、ゲーム形式で楽しく学べるWebツールです。
カエルをハスの葉に誘導するために、CSSコードを使って配置や整列のルールを指定します。
遊びながらFlexboxの基礎が身につくので、初心者には特におすすめ！
主な機能・特徴
| レベル制（ステージ制）で進む形式 | 初級から徐々にステップアップできるレベルが用意されており、使うFlexboxのプロパティ（例：justify-content、align-items など）が段階的に増えていきます。レベルごとにヒントも記載されています |
| インタラクティブな学習 | 実際にコードを書いてすぐに結果（カエルがハスの葉に移動するか）を確認できるので「試してみる → どう変わるか見る」の繰り返しで理解が深まる |
| 視覚的フィードバック | カエルとハスの葉の位置が画面で見えるので、どのCSSの設定がどう働くかが直感的に分かる。レベルが上がると少しずつ複雑な配置も出てきます |
使い方（学び方/遊び方）
インストール、ログイン不要ですぐにプレイして学べます。
①レベルの設定
レベルは任意で選んで始められます。
画面にカエルとハスの葉が表示され、「どのようなCSSを書けばカエルを葉に移動できるか」という課題やヒントが表示されます。
②CSSを記述
指定されたプロパティ（justify-contentやalign-itemsなど）を入力して、カエルを正しい場所へ移動させます。例えば「中央に寄せる」「右端へ寄せる」などの指示があります。
③レベルのクリア／次のレベルへ
正しくカエルを葉に導ければ、カエルがその場でぴょこぴょこ喜びます！
「次へ」ボタンが押せるので、次のレベルへ進めます。
徐々に難しくなっていきます。
活用例
- CSSのFlexboxをこれから学ぼうとしているとき。
教科書だけではイメージが湧きにくいプロパティをゲームで動かして理解するのに向いています - Webサイトレイアウトの調整で、アイテムの配置・中央寄せ・余白（スペース）の使い方などを練習したいとき
- コーディングスクール・ワークショップなどで、参加者が手を動かしながら学べる教材として使う
注意点
※このゲームでは基本的なプロパティが主に学べますが、細かい設定や複雑なレイアウトなどは含まれていません。学習のスタートとしては良いですが、それだけでは十分でない部分もあります
※画面サイズが小さいと入力欄などが使いにくいことがあります。できればパソコン／タブレットで使うと操作しやすいです
related site
