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