YORIMICHI PLAYLIST
HOW TO PLAY
操作方法と目標
- 操作方法
- コード入力欄へCSSプロパティと値を入力します。正しい配置になると「次へ」が有効になります
- 目標
- CSSのプロパティと値を書き、色の付いたカエルを同じ色の蓮の葉へ配置して全24レベルを進めます
ABOUT THE GAME
コードを書いて、
配置を目で確かめる。
『Flexbox Froggy』は、Thomas Parkが制作したCSS flexboxの学習ゲームです。各レベルでは、池にいるカエルと蓮の葉の位置が示されます。コード欄へ指定されたCSSプロパティを入力し、カエルを同じ色の葉へ配置すると次のレベルへ進めます。
WRITE, MOVE, MATCH
justify-contentを書き、
右の葉へカエルを運ぶ。
レベル1は、横方向の配置を決めるjustify-contentを扱います。公式の日本語説明はflex-start、flex-end、center、space-between、space-aroundを示し、flex-endを入力するとカエルが池の右側へ移動します。
実プレイ撮影：寄り道プレイリスト編集部／制作：Thomas Park／画像：CC BY 3.0
CSSの入力が池の配置へそのまま反映される
コード欄へ入力した内容は、右側の池にある要素の配置へ反映されます。作者の制作記事は、CSSコードを書いてカエルを蓮の葉へ運ぶことを本作の目標として説明しています。
24レベルでflexboxの主要プロパティを扱う
公式ソースには24レベルが収録されています。justify-contentから始まり、align-items、flex-direction、order、align-self、flex-wrap、flex-flow、align-contentへと扱うプロパティが増えます。
日本語表示と三つの難易度を選べる
公式Web版は日本語表示に対応しています。設定では、説明付きのBeginner、説明を外すIntermediate、説明を外してレベル順も変えるExpertを選択でき、色覚多様性に配慮した表示も切り替えられます。
PLAY NOTES
プレイ時の補足
- 規模・難易度
- 全24レベルで、説明付きのBeginner、説明なしのIntermediate、説明なしでレベル順も変わるExpertを選べます。固定の所要時間目安はありません
- 言語・対応環境
- 日本語と英語を含む複数言語に対応します。HTML5、CSS、JavaScript対応ブラウザ向けで、CSS入力のためキーボードを使える環境が適しています
- 料金・保存
- 公式Web版は無料でアカウント不要です。現在のレベル、入力した回答、解決済みレベル、表示設定をブラウザのlocalStorageへ保存します
CSSを一行書き、
カエルを葉へ運ぶ。
2026年7月25日に公式Web版、作者の制作記事、公式リポジトリを確認しました。画像2枚は編集部が公式standalone日本語版で撮影したゲーム中画面です。 情報元：Flexbox Froggy公式Web版（日本語）、Thomas Parkによる制作記事、Flexbox Froggy公式リポジトリ、Flexbox FroggyコードのMITライセンス、Flexbox Froggy画像のCC BY 3.0表記、Creative Commons Attribution 3.0
STREAMING INFO
配信・動画投稿について
公式リポジトリはコードをMITライセンス、画像をCC BY 3.0で公開しています。配信、動画投稿、収益化でゲーム画像を扱う場合は、作品名、Thomas Park、公式URL、CC BY 3.0へのリンクを表示し、各ライセンスの条件を守ってください。ページ下部の第三者広告やリンク先素材は対象外のため映さないでください。専用の配信ガイドラインは確認できませんでした。
READER COMMENTS
Flexbox Froggyのコメント
遊んだ感想や、これから遊ぶ人へのおすすめポイントを共有できます。
コメントを読み込んでいます…