ゲームで学ぶCSS：Flexbox FroggyとGrid Garden

まずFlexbox Froggyで軸に沿った配置を練習し、次にGrid Gardenでグリッド線の間に要素を配置する練習をしましょう。各ゲーム演習の後には、そのアイデアを小さなページで再現してみてください。特定のレベルの答えを覚えるのではなく、レイアウトが変わっても宣言が機能する理由を説明できるようになることが、有益な成果となります。

ゲームでCSSを学び、実践する方法

このコースは、2つのゲームと3つのオリジナル演習を組み合わせたものです。簡単なCSSルールを理解でき、視覚的なフィードバックを求める人に適しています。これは完全なWeb開発コースではありません。実際のインターフェースでは、読みやすいコンテンツ、レスポンシブな動作、キーボード操作、そして様々なテキスト量でのテストも必要となります。

質問に合った演習を選択してください

これらのゲームはCodepipによるものです。Cozcadeは、各ゲームに対応するガイドへのリンクを提供しています：Flexbox Froggyとガイド、Grid Gardenとガイド。オリジナルのFroggyとGrid Gardenのページには、作者による独自のバージョンが掲載されています。ここのコード演習を行う際は、キーボードを使用してください。

まず、プロパティを選択する前に軸に名前を付けてください。

Flexboxには主軸と交差軸があります。flex-directionは主方向を設定し、justify-contentはアイテムをその主軸に沿って配置します。align-itemsは交差軸に関するものです。通常の左から右への行では、主軸は水平です。方向を列に変更すると、主軸は垂直になります。これらの定義については、MDNのFlexbox入門で説明されています。

Froggyで宣言を試す前に、アイテムの移動方向を指定してください。次に、現在の主軸との関連でその方向を指定します。これにより、誤った回答が具体的な質問に変換されます。つまり、間違ったプロパティ、間違った値、または間違った軸を選択したのかが分かります。

練習問題1：グループを右端に移動

コンテナ内に3つの小さなアイテムを作成します。これはオリジナルの練習問題であり、ゲームのレベルや解答をコピーしたものではありません。

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

目標は、3つのアイテムの順序を変えたり、各アイテムに個別の余白を与えたりせずに、3つのアイテムをまとめて右端に移動することです。結果を予測し、コンテナにjustify-content: flex-endを追加します。

次に、justify-content: space-betweenと比較します。最初の選択肢はグループを移動し、2番目の選択肢はアイテム間の利用可能なスペースを分配します。狭いコンテナと広いコンテナの両方で試してください。互いに近い位置にある3つのボタンの場合、どちらの選択肢を選ぶべきか説明してください。1つの値を覚えるよりも、目に見える結果の方が重要です。

演習2：同じ命令を維持し、軸を変更します。

そのコンテナを再利用し、flex-direction: columnを追加し、height: 12remを設定し、justify-content: flex-endを維持します。アイテムは下方向に集まります。宣言は「右へ移動」コマンドにはならず、変更した主軸に沿って動作します。

次に、align-items: flex-startを追加します。追加前と追加後の配置を比較してください。左から右への方向を指定すると、アイテムは交差軸上で左方向に整列します。宣言を削除し、デフォルトの伸縮動作を再度確認してください。

「ただ動くだけ」という表現を使わずに、両方の変更について簡潔に説明してください。例えば、軸、空きスペース、配置対象のグループを特定してください。結果を説明できない場合は、例を2つのアイテムに絞り、一度に1つの宣言のみを変更してください。これはゲームに取り入れるべき習慣です。

次に、グリッドトラックとその境界線を区別しましょう。

グリッド配置では、行と列を囲む線を使用します。5つの列には6本の境界線があります。列3から列5までに配置されたアイテムは、3列ではなく2列にまたがります。トラック、セル、線の違いについては、MDNのグリッド入門を参照してください。

Grid Gardenでは、配置を試す前に開始境界と終了境界を確認してください。スペースの数え方が分かりにくい場合は、自分のページに境界を描画またはラベル付けしてください。

練習問題3：カードを2本の線の間に配置します。

5列のボードを作成し、カードを1枚配置します。

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

ページを開く前に、カードがどこに表示されるかを予測します。次に、列の配置だけを変更して、カードがボード全体に広がるようにします。上記の5つの列を明示的に指定すると、grid-column: 1 / 6 は最初の境界から最後の境界まで届きます。

最後に、テキストをより長い文章に変更し、ブラウザの幅を狭めます。カードの高さが固定されているため、内容に適さなくなる場合でも、配置ルールは正しいままです。ゲーム形式の練習問題を解くことでレイアウトの一部を学ぶことができますが、使いやすいページを作成するには、内容も確認する必要があります。

ゲームの進行状況は、習熟の証明ではなく、フィードバックとして活用してください。

練習問題が成功したら、方向、アイテム数、利用可能な幅、テキストの長さのいずれか1つを変更してください。結果を見る前に予測してみましょう。アイデアを応用して変更点を説明できれば、単なる答え以上のことを学んだことになります。

ゲームに戻る際は、同じバージョンとブラウザ環境を使用していることを確認してください。Cozcade アカウントのお気に入りは、後でプレイしたいゲームを識別するためのものであり、ゲーム内のレッスン進行状況がデバイス間で引き継がれることを保証するものではありません。進行状況を確認する際は、保存されているサイトデータを削除しないでください。また、エクスポート機能は、そのゲームにエクスポート機能が提供されている場合にのみ使用してください。

マッチングガイドに進んでください。

軸と位置合わせの練習にはFroggyガイドを、配置問題にはGrid Gardenガイドを使用してください。その後、別の種類の練習をしたい場合は、学習ゲームをご覧ください。

上記の演習はこの記事のために作成されました。参照ページは2026年10月11日に確認済みです。記録されたゲームプレイチェックは、デスクトップ版の操作の一部のみを対象としており、全レベルのクリアやモバイル版コースの完全プレイは含まれていません。この記事は練習手順を示すものであり、資格取得のためのものではなく、ご自身のインターフェースのテストに代わるものでもありません。

Cozcadeでプレイできるゲーム

Flexbox FroggyGrid Garden