justify-contentとalign-itemsを組み合わせ、荷物を指定位置へ運ぼう。CSS Flexboxの配置を直感的に学べる60秒プログラミングゲームです。
このゲームについて
1回のプレイ時間の目安は約1分です。主な操作は「タップ・クリック・矢印キー・Enterキー」です。短いプレイの中でルールを理解し、結果を見ながら繰り返し挑戦できる構成です。
プレイ中は「justify-contentが主軸方向の配置を決めること」「align-itemsが交差軸方向の配置を決めること」「flex-start・center・flex-endを組み合わせた9方向のレイアウト」を、説明だけでなく実際の操作と結果を通して確認できます。
ルールとゲームの仕組み
Flexboxファクトリーでは、画面の指示と結果を見ながら操作を進めます。特に「注文カードに表示されたターゲット位置を確認します。」が基本となり、操作に対する結果を確認しながら次の手順を判断することが重要です。
遊び方
- 注文カードに表示されたターゲット位置を確認します。
- 横方向のjustify-contentと縦方向のalign-itemsをそれぞれ選びます。PCでは矢印キーでも変更できます。
- 箱がターゲットに重なったら出荷ボタンを押します。60秒以内に12件の完了を目指します。
攻略・プレイのコツ
- 最初のプレイではスコアだけを追わず、「注文カードに表示されたターゲット位置を確認します。」という基本操作を確実に行い、結果がどう変化するかを確認してみましょう。
- 「justify-contentが主軸方向の配置を決めること」を意識してプレイすると、正解・失敗の理由が分かりやすくなり、次の判断を改善しやすくなります。
- 1回の目安は約1分です。結果画面を見たら、前回と違う操作や順番を1つ試して再挑戦すると、上達のポイントを見つけやすくなります。
このゲームで身につくこと
- justify-contentが主軸方向の配置を決めること
- align-itemsが交差軸方向の配置を決めること
- flex-start・center・flex-endを組み合わせた9方向のレイアウト
正解だけを覚えるのではなく、操作した内容と画面の変化を見比べながら、なぜその結果になったのかを考えてみてください。ゲームを繰り返すことで、知識と判断を結び付けやすくなります。
こんな人におすすめ
CSSやWeb制作をこれから学びたい小学生・中学生・高校生・プログラミング初学者におすすめです。気軽に1回遊んだあと、結果を確認しながら繰り返し挑戦してみてください。
よくある質問
Flexboxファクトリーは無料で遊べますか？
無料で遊べるブラウザゲームです。ゲームページを開けば、そのままプレイを始められます。
スマートフォンやパソコンでも遊べますか？
ブラウザ向けに公開しています。主な操作は「タップ・クリック・矢印キー・Enterキー」です。端末に合った操作方法でプレイしてください。
1回のプレイ時間はどれくらいですか？
プレイ時間の目安は約1分です。短時間でルールを確認し、結果を見ながら繰り返し挑戦できます。
このゲームでは何を学べますか？
プレイを通して「justify-contentが主軸方向の配置を決めること」「align-itemsが交差軸方向の配置を決めること」「flex-start・center・flex-endを組み合わせた9方向のレイアウト」といった考え方を、操作と結果を結び付けながら確認できます。
