📐
FlexboxやCSS GridのレイアウトコードをGUIで直感的に作成。
プレビューを見ながら各種プロパティを調整し、即座にCSSを書き出せます。
プリセット
ジェネレーター
📐 ビジュアルプレビュー 破線枠の下端をドラッグして高さ変更可能
生成されたCSS
about,
📖 概要
CSSのFlexboxやGridレイアウトをGUIで直感的に作成するオンラインツールです。ドラッグ＆ドロップやパラメータ調整で、複雑なレイアウトを視覚的に設計できます。
Flexbox（justify-content、align-items、flex-wrap等）とCSS Grid（grid-template-columns、gap等）の両方に対応。リアルタイムプレビューで結果を確認しながら調整できます。
すべての処理はブラウザ内で完結し、データがサーバーに送信されることはありません。
howto,
🔰 使い方
1
レイアウト方式を選択する
上部のタブで「Flexbox」または「CSS Grid」を選択します。お好みでプリセットからベースを選ぶこともできます。
2
プロパティを調整する
コンテナの設定や、各アイテムの詳細設定（flex-grow等）を変更し、右側のプレビューでレイアウトの変動を確認します。
3
コードをコピーする
生成されたCSSおよびHTMLコードをコピーし、ご自身のWebプロジェクトに貼り付けてご利用ください。
glossary,
📚 用語集
- Flexbox
- CSS3のレイアウトモジュール。1次元（行or列）のアイテム配置に最適で、ナビゲーションやカードの並びなどに利用されます。
- CSS Grid
- CSS3の2次元レイアウトモジュール。行と列を同時に制御でき、複雑なページレイアウト全体の構成に強力です。
- justify-content
- 主軸方向のアイテム配置を制御するプロパティ。`center`や`space-between`などを指定します。
- align-items
- 交差軸方向のアイテム配置を制御するプロパティ。`center`や`stretch`などを指定します。
faq,
❓ FAQ
- Q. FlexboxとGridはどう使い分けますか？
- A. 一般に、1次元（行または列のどちらか一方向）のレイアウトはFlexbox、2次元（行と列の両方）のレイアウトはGridが適しています。コンポーネント内はFlexbox、大枠のページ配置はGridという使い方がよく見られます。
- Q. レスポンシブ対応のCSSも生成できますか？
- A. メディアクエリ（@media）の生成には直接対応していませんが、`flex-wrap` や Gridの `repeat(auto-fit, minmax(...))` などを用いることで、ある程度レスポンシブな基本レイアウトのCSSを生成することは可能です。
- Q. IE11に対応していますか？
- A. 最新のCSS仕様に基づくコードを出力するため、IE11では一部機能（特にGridやgapなど）が動作しない場合があります。
scenes,
💡 活用シーン
🎨
Webデザインの設計
ヘッダー・フッター・サイドバーといったページ全体のレイアウトをGUIで素早く検討・出力できます。
⚡
プロトタイプ作成
デザインの初期段階でレイアウトのベースとなるCSSをサクッと用意し、開発を加速させます。
📚
CSSの学習ツールとして
FlexboxやGridの各種プロパティを変更すると、どのようにプレビューが変わるかを視覚的に学習できます。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
フィードバックを送信しました。ご協力ありがとうございます！
エラーが発生しました。しばらく経ってから再度お試しください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。