デザイン

Flexbox と Grid レイアウト生成

横一列、縦一列、あるいは格子全体を視覚的に並べると、CSS がその場で更新されます。Flexbox と CSS Grid を切り替えながら、方向、配置、折り返し、列数と行数、間隔を設定し、番号付きのボックスで並びを確認できます。これらのボックスは実際の要素とまったく同じように動きます。中央寄せに必要なのが justify-content か align-items かを覚えていなくても、コントロールを変えればボックスが動いて答えがわかります。出力はコンテナクラス向けの整理されたコピー用 CSS で、すべてブラウザ内で計算されるため、スタイルシートやコンポーネント、Tailwind のレイヤーにそのまま貼り付けられ、内容がページの外に出ることはありません。

  • Flexbox と CSS Grid を切り替えても、組みかけのレイアウトは失われません
  • 方向、justify、align、折り返し、列数、行数、間隔をすぐに反映して確認できます
  • 番号付きボックスのプレビューが、各プロパティが実要素をどう動かすかを示します
  • コンテナクラスの整った CSS をコピーし、スタイルシートやコンポーネント、Tailwind に利用できます
  • すべてブラウザ内で計算するため、レイアウトの内容がアップロードされることはありません
工具/Flexbox と Grid レイアウト生成
display: flex
12px
5
5 個
1
2
3
4
5
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
クイック操作

概要

フロントエンドで毎日使う 2 つの CSS レイアウトシステムを 1 つのパネルにまとめました。用途に合うほうを選び、スタイルシートでプロパティ名を当てずっぽうに探すのではなく、目で見て調整できます。

  1. 01

    Flexbox と Grid を 1 か所に

    一次元の行や列に向く Flexbox と、二次元レイアウトに向く CSS Grid を切り替えられ、比較する際も同じ間隔と要素数を引き継げます。

  2. 02

    すべての配置プロパティを表に

    Flex の方向、justify-content、align-items、折り返し、align-content に加え、Grid の列数、行数、auto-flow、justify-items、align-items を、すべて素直なコントロールとして並べます。

  3. 03

    実要素のように動くプレビュー

    番号付きのボックスは各プロパティに実際の子要素と同じように反応するため、中央寄せ、分散、引き伸ばし、折り返しがひと目でわかります。

  4. 04

    出発点になるプリセット

    中央寄せの行、両端配置のバー、縦積み、折り返し行、グリッドといったよくある型をワンクリックで呼び出し、そこから微調整できます。

  5. 05

    整理されたコピー用出力

    CSS は 1 つのコンテナクラスだけを対象とし、対応する HTML 構造も並べて出力するため、スタイルシート、コンポーネント、試作に貼り付けやすくなっています。

  6. 06

    既定でローカルかつ非公開

    プレビューも生成される CSS の各行もブラウザ内で計算するため、未公開のレイアウトや社内 UI がサーバーに出ることはありません。

使い方

空のコンテナから使えるレイアウト CSS まで、数ステップで進められます。デザインを再現する場合も、プロパティ同士の関係を学ぶ場合も同じです。

  1. 01

    一行または一列なら Flexbox、列と行の両方を扱うなら Grid を選びます。

  2. 02

    目的に近いプリセットを選ぶか、既定の状態からコントロールを 1 つずつ調整します。

  3. 03

    主なプロパティを設定します。Flex なら方向と justify か align、Grid なら列数と行数です。

  4. 04

    間隔と要素数を、プレビューの余白と密度が必要な状態になるまで調整します。

  5. 05

    プレビューのボックスで並びを確認し、コンテナ CSS をスタイルシートやコンポーネントにコピーします。

詳細

Flexbox と Grid はほぼすべての現代的なレイアウトをカバーします。だからこそ視覚エディタは、実際の CSS を独自の名前で隠すのではなく、素直に対応づける必要があります。

  • Flex のコントロールは flex-direction、flex-wrap、justify-content、align-items、align-content に対応します
  • Grid のコントロールは repeat と 1fr で書くテンプレートの列と行、justify-items、align-items に対応します
  • 共有の間隔と要素数により、同じ内容を Flexbox と Grid で比較できます
  • プレビューは実際の flex と grid コンテナを使うため、配置、折り返し、分散が忠実に動きます
  • align-content は折り返しが有効なときだけ表示され、プロパティが実際に効く場面に合わせます
  • プリセットは中央寄せ、両端配置のバー、縦積み、折り返し行、複数列グリッドをカバーします
  • ランダム機能で見慣れないプロパティの組み合わせを試し、感覚をすばやく養えます
  • 出力は変更したプロパティだけを含む整ったコンテナクラスで、読みやすく書き換えやすいです
  • 生成された CSS はスタイルシート、CSS Modules、コンポーネントスタイル、Tailwind レイヤーにそのまま貼れます
  • すべての計算はブラウザ内で行われるため、未公開作業のレイアウトは常に非公開です

活用シーン

フロントエンドではレイアウトの疑問が絶えませんが、その多くは結局どの flex か grid のプロパティを使うかという問いです。答えが画面で動くほうが、資料を読み直すより速くわかります。

  1. 内容の中央寄せ

    justify-content と align-items のどの組み合わせでボックスが水平と垂直の両方で中央に来るかを、二者で迷わず確認できます。

  2. ナビゲーションバー

    space-between でロゴを片側、リンクを反対側へ寄せます。ほぼすべてのヘッダーやツールバーで使われる型です。

  3. カードと商品のグリッド

    Grid でカードを均等な列に並べて間隔をそろえ、列数を変えてレイアウトの再配置を確認します。

  4. レスポンシブな折り返し行

    タグやチップ、ボタンが一行に収まらなくなったとき、flex-wrap と align-content がどう並べるかを観察できます。

  5. フォームと縦並びの項目

    ラベルと入力を均等な間隔で縦に積みます。フォーム、設定画面、サイドバーでよく使う Flex レイアウトです。

  6. ギャラリーとダッシュボード

    サムネイルやウィジェットを整ったグリッドに並べ、実データを入れる前に余白と密度を判断します。

  7. flex と grid の学習

    プロパティを 1 つずつ変えてボックスの反応を見ることで、両レイアウトシステムの実際の挙動への感覚が身につきます。

  8. レイアウトの素早い試作

    ページやコンポーネントの構造を視覚的に下書きし、コンテナ CSS をコピーして実際のマークアップの出発点にします。

関連情報

レイアウトが決まったら、 ボックスシャドウジェネレーター で面に奥行きと立体感を与え、セクションに豊かな背景が必要なときは グラデーション生成ツール と合わせて設計すると、間隔、奥行き、色がコンポーネント全体で一貫します。

使い方のヒント

Flexbox と Grid は試しやすい一方で誤用も起きやすいので、いくつかの習慣があると生成したレイアウトが画面や内容を問わず安定します。

  • 内容が一方向に流れるときは Flexbox、行と列を同時に扱うときは Grid を選びます。
  • 子要素の margin より gap を優先すると、端の margin を整える手間なく均等に間隔を取れます。
  • justify-content は主軸方向の分散、align-items は交差軸を担います。どちらがどちらかはプレビューで確認します。
  • 小さな変化のたびにブレークポイントを固定するのではなく、内容と利用可能な空間に折り返しを任せます。
  • Grid では repeat と 1fr で列幅をそろえ、幅を変えたいときは明示的なトラックサイズを使います。
  • 要素が少ない場合と多い場合の両方で確認します。分散系のプロパティは内容が増えると挙動が変わるためです。
  • 繰り返し使うレイアウトの型は、同じプロパティをあちこちで書く代わりに再利用できるクラスやコンポーネントにまとめます。
  • プレビューは仕組みを示しますが実際のコンテナ幅とは異なるため、プロジェクトの実ブレークポイントで結果を検証します。

制限事項

このツールはレイアウトを形づくる中心的なコンテナプロパティに絞っているため、いくつかの関連領域は意図的に対象外です。

  • コンテナ CSS を生成します。flex-grow、flex-basis、order、グリッドの列や行のスパンといった要素ごとの規則はここでは出力しません。
  • グリッドのトラックは repeat と 1fr を使います。名前付きライン、grid-template-areas、固定と分数を混ぜたトラックは手作業の編集が必要です。
  • プレビューは高さ固定のコンテナを使うため、実際の内容の高さに依存するレイアウトはプロジェクトで確認してください。
  • ブレークポイントをまたぐレスポンシブな挙動は、実際のコンテナ幅とメディアクエリまたはコンテナクエリに依存します。
  • 現代の flex と grid ではブラウザ差はわずかですが、非常に古いブラウザには本ツールが追加しないフォールバックが必要な場合があります。
  • HTML 構造全体は出力せず、ご自身のマークアップに適用するコンテナの CSS だけを出力します。

よくある質問

Flexbox と Grid のどちらを選ぶか、そしてレイアウトの構想を使える CSS に落とし込むときに、よく出てくる質問をまとめました。

Flexbox と Grid のどちらを使うべきですか。

内容が一方向に流れるとき、たとえばボタンの行や項目の列には Flexbox を使います。列と行を同時に制御したいとき、たとえばカードギャラリーやダッシュボードには Grid を使います。

生成された CSS はそのまま本番で使えますか。

はい。出力はコンテナクラス向けの標準的な CSS で、スタイルシート、CSS Modules、コンポーネントスタイル、Tailwind のレイヤーに変更なく貼り付けられます。

両方向で中央寄せにするには。

Flexbox では justify-content と align-items を center にします。Grid では justify-items と align-items を center にします。コントロールを変えるとプレビューがすぐに確認します。

なぜ align-content は時々しか表示されないのですか。

align-content は flex コンテナで要素が複数行に折り返すときだけ効きます。そのため折り返しを有効にするとコントロールが現れ、プロパティが実際に効く場面に合わせています。

要素ごとのプロパティも生成しますか。

いいえ。このツールはコンテナプロパティに絞っています。flex-grow、flex-basis、order、グリッドのスパンなどは、あとで個々の子要素に加えるレイアウトの細部です。

出力は Tailwind と一緒に使えますか。

はい。CSS をカスタムレイヤーやコンポーネントクラスに貼り付けられますし、対応する flex と grid のユーティリティクラスの参考にもできます。

グリッド出力の 1fr とは何ですか。

fr はグリッド内の余白の分数を表す単位です。repeat(3, 1fr) は 3 つの列を作り、それぞれが利用可能な幅を均等に分け合います。

編集中にレイアウトはアップロードされますか。

いいえ。プレビューの描画も CSS の生成もすべてブラウザ内で行われるため、未公開の製品 UI や機密のデザイン作業でも安全に使えます。

関連ツール

レイアウトはすべてが収まる枠組みです。構造が決まったら奥行きと背景に進み、コンポーネントを単なるボックスの並びではなく仕上がった面として見せましょう。