＼Flexboxの並び方を、ボタンで選んでCSSにする／ 並ぶ向き・折り返し・揃え方・間隔を選ぶと、プレビューとCSS・HTMLが出るツールです。 選んだ値ごとに「なぜそうなるか」の短い説明が出るので、CSSを覚えはじめの方にも向いています。 この無料版は、Flexboxの基本だけです。 ■ 例えばこんな使い方 ◎ 横並びのメニューや、カードの並びを、ボタンを選ぶだけで作る ◎ 「左に固定幅、右は残り全部」のようなページの形を、完成形から始める ◎ CSSのどの値が、どう並びを変えるのかを、プレビューを見ながら覚える ■ 使い方（3ステップ） ① css-flex-grid-gen.html をダブルクリックして、ブラウザで開く ② ボタンとスライダーで、並び方を選ぶ（プレビューが変わります） ③ 「出力されるCSS」と「出力されるHTML」を、自分のページに貼る 画面の下の「なぜそうなる？」に、選んだ値の意味が短く出ます。 ■ この無料版でできること ◆ Flexbox の設定（flex-direction・flex-wrap・justify-content・align-items・gap） ◆ 子要素の数（1〜12）とコンテナの高さの指定 ◆ プレビューと、CSS・HTMLの表示（全選択してコピーできます） ◆ 選んだ値ごとの「なぜそうなる？」の説明 ■ 有料版（580円）で増えること ◆ Grid の設定（列の数・行の数・列の幅・間隔・揃え・エリア名） ◆ 完成形のプリセット8つ（カード並び・ヘッダー＋本文＋フッター・サイドバー付き・3カラム・横並びのナビ など） ◆ スマホ用の切り替え（@media）の出力と、画面の幅を変えたプレビュー ◆ ボタン1つでCSS・HTMLをコピー ◆ Flexbox の細かい調整（align-content・flex-grow・flex-basis・大きさをバラバラにする） ◆ 設定の自動保存、5つまでの名前つき保存、JSONの書き出しと読み込み 有料版はこちらです。https://mall-aibou.booth.pm/items/8987469 ■ 動作環境 ・Chrome / Edge / Safari の最新版（動作確認はChromeのみです） ・ネット接続は不要です ・外部のサーバーと通信しません。広告もトラッキングもありません ■ 配布内容 ・css-flex-grid-gen.html ・README.txt ■ ご利用について ・個人・法人どちらも使えます ・商用のページ制作にも使えます ・出力したCSS・HTMLは、自由にお使いください。クレジット表記は不要です ・ファイルそのものの再配布・販売はご遠慮ください ■ ご注意 ・非公式のツールです ・動作確認はChromeのみです。ほかのブラウザでは、見え方が変わる場合があります ・出力するのは、レイアウトの部分のCSSです。色や余白など、見た目用のCSSも少し付きます。好みに直してお使いください ■ 更新情報 2026/10/14 公開 TOOL BOX