tofu
テンプレート料金ドキュメントいつものAIツールを使う
無料で始める
  1. テンプレート
  2. 学びと子ども
  3. Flexbox Froggy

Flexbox Froggy

ウェブのレイアウトゲーム

CSSを書いてカエルをハスの葉に乗せながら、ウェブページの並べ方を学べます。

自分のものにする試してみる (作者のコピーを新しいタブで開きます)

「自分のものにする」には、先にサインインが必要です。Freeプランで持てるアプリは1⁠つだけなので、あなたのコピーがそのアプリになります。いつでも削除できます。
「試してみる」で開くのは作者のコピーで、あなたのコピーではありません。

Flexbox Froggy
作者
thomaspark
ライセンス
MIT
人気
GitHubのスター7383
使う機能
ブラウザだけ

できること

  • レイアウトのパズルになっているレベルを、ひとつずつクリアしていく
  • もうひとつのゲームで庭に水をやりながら、グリッドレイアウトを学ぶ
  • 中国語を含む、数十の言語に切り替える

こんな人にウェブページの作り方を学んでいる学生や初心者

自分のものにすると

  • あなた専用のコピーが、専用のアドレスで動きます。
  • アドレスを知っている人なら誰でも開けます。開ける人を限定することもできます。
  • 自分のコーディングエージェントで変更できます。

変更のアイデア

公開したら、下のどれかをコーディングエージェントに渡しましょう。

  • 最初に表示される言語を中国語にして

  • 中央に揃える練習だけのレベルを追加して

  • タイトルの横に、プログラミングクラブの名前を入れて

ソースコードとライセンス

Flexbox Froggyはオープンソースです。作者のthomasparkが、誰でも使って変更できるようにコードを公開しています。

ライセンスはMITです。作者の著作権表示を残せば、自由に使ったり変更したりできます。

あなたのコピーは、コピーした時点のバージョンです。作者があとから更新しても、自動では反映されません。

Tofuが使っているこのバージョン作者のオリジナルのコード

似ているアプリ

すべてのテンプレート
  • LOOPY原因と結果のシミュレーター再生ボタンを押すと、変化が雪だるま式に大きくなるか、落ち着いていくかがわかります。
  • Branching puzzles for Gitバージョン管理の練習場動く図を見ながらレベルをクリアして、Gitのブランチとマージを学べます。
  • Snap!ブロックで組むプログラミング言語ブロックをドラッグしてつなげるだけで、アニメーションやゲームが作れます。コードを打つ必要はありません。
tofu

作りたいアプリを言葉で伝えるか、エージェントが作ったアプリを持ち込むだけ。Tofuがオンラインにします。

どのコーディングエージェントでも使えます

プロダクト

  • 機能
  • 料金
  • セキュリティ
  • エージェントとコマンドライン

リソース

  • ドキュメント
  • ガイド
  • ブログ
  • アプリのデプロイ
  • コーディングエージェントの接続
  • データベース
  • サインインと認証メール
  • ドメイン
  • 決済
  • AIエージェント向け

比較

  • すべての比較
  • Tofu と自分で構築する場合の比較
  • AI アプリをオンラインにする方法

会社情報

  • Tofuについて
  • お問い合わせ

法的情報

  • 利用規約
  • プライバシーポリシー
  • ドメイン規約

© 2026 Tofu

trytofu.ai

英語版からの翻訳です。内容に違いがある場合は、英語の原文が優先されます。