CSS Flexbox & Grid プレイグラウンド

CSS Flexbox & Grid プレイグラウンドとは？

CSS Flexbox & Grid プレイグラウンドは、CSS の 2 大レイアウトモデルを学んだり試作したりするための無料のビジュアルサンドボックスで、フロントエンド開発者・学習者・デザイナー向けです。モード切り替えで Flex か Grid を選び、シンプルなドロップダウンと数値入力でコンテナーのプロパティを設定します。Flex モードでは flex-direction、flex-wrap、justify-content、align-items を制御し、Grid モードでは列数と行数（repeat(n, 1fr) として描画）に加えて justify-items と align-items を指定します。gap 値とアイテム数は両モードに適用されます。番号付きタイルのライブプレビューで配置や間隔の挙動がはっきり分かり、完全な .container の CSS ルールが生成されるのでコピーできます。flex や grid の設定が実際にどう見えるかをプロジェクトに貼り付ける前に確認したいときに役立ちます。

CSS Flexbox & Grid プレイグラウンドの使い方

1. モード切り替えで Flex か Grid を選び、どのレイアウトモデルを作るか決めます。
2. Flex モードでは、ドロップダウンから flex-direction、flex-wrap、justify-content、align-items を設定します。
3. Grid モードでは、列数と行数、さらに justify-items と align-items を設定します。
4. 「設定」を開いて gap（px 単位の間隔）とプレビューに表示するアイテム数を変更します。
5. 各プロパティを変えるたびにタイルのプレビューが並び替わるのを確認します。
6. 生成された .container の CSS ルールをコピーしてスタイルシートに貼り付けます。

使用例

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

よくある質問

ここでの Flexbox と Grid の違いは？

Flex モードはアイテムを 1 つの軸に沿って配置し、flex-direction、flex-wrap、justify-content、align-items を扱えます。Grid モードは grid-template-columns と grid-template-rows（repeat(n, 1fr) と記述）に justify-items と align-items を加えて、二次元のグリッドにアイテムを並べます。切り替えで両モードを比べ、同じ配置が各モデルでどう処理されるか確認できます。

gap 値は何をしますか？

gap は CSS の gap プロパティを通じて、Flex でも Grid でもすべてのアイテム間の間隔をピクセル単位で設定します。大きくするとタイルが離れ、0 にするとぴったり並びます。プレビューと生成 CSS の両方が即座に更新されます。

Grid では justify-content と align-items の書き方が違うのはなぜ？

Grid は justify-items と align-items に start、end、center、stretch のキーワードを使い、Flex は flex-start と flex-end を使います。ツールは現在のモードに応じて正しいキーワードを出力するため、コピーした CSS は常に有効です。

表示するアイテム数を変えられますか？

はい。「設定」を開いてアイテム数を変えると、番号付きのプレビュータイルを増減できます（最大 24 個）。これは画面上のデモにのみ影響し、生成される CSS はアイテムそのものではなくコンテナーを記述します。

データはどこかにアップロードされますか？

いいえ。プレイグラウンドはすべて JavaScript でブラウザ内で動作するため、設定や生成された CSS がサーバーに送信されることはありません。プライバシーが保たれ、ページの読み込み後はオフラインでも使えます。