CSS Gridのレイアウトを、クリックとドラッグで作れるツールです。 行数・列数・gapを決めて、セルをドラッグで選んで領域にまとめると、 grid-template-areas を含むCSS、HTMLの雛形、Tailwindのクラスが出力されます。 ブラウザで開くだけで動き、作った内容は外部に送られません。 6×6までのCSS出力で足りる方は、無料版もあります。https://mall-aibou.booth.pm/items/8923454 ━━━━━━━━━━━━━━━━━━━━ ご注意 ━━━━━━━━━━━━━━━━━━━━ 出力されたコードは、お使いの環境で必ず動作を確認してからお使いください。 ━━━━━━━━━━━━━━━━━━━━ この商品で得られるもの ━━━━━━━━━━━━━━━━━━━━ ◆ 列数・行数を12×12まで指定 ◆ gap（px）の指定と、行の高さ（1fr / auto）の選択 ◆ セルをドラッグして選び、領域として結合 ◆ 領域に名前を付ける（英字で始まる英数字とハイフン） ◆ スマホ用レイアウトを別に作り、メディアクエリ（767px以下）で切り替えるCSSを出力 　（PC用にだけある領域は、スマホ用では display: none になります） ◆ grid-template-areas を含むCSSの出力とコピー ◆ HTMLの雛形の出力 ◆ Tailwindのクラス出力（任意値の記法を使います。v3.2以降を想定した目安です） ◆ 例（ヘッダー・サイドバー・本文・フッター）を入れるボタン ━━━━━━━━━━━━━━━━━━━━ 使い方（3ステップ） ━━━━━━━━━━━━━━━━━━━━ 1. css-grid-builder.html をダブルクリックして、ブラウザで開く 2. 列数・行数・gapを決めて、セルをドラッグし「選んだ範囲を領域にする」を押す。名前も付けられます 3. 出力欄で、CSS・HTMLの雛形・Tailwind から選んで「コピーする」 ━━━━━━━━━━━━━━━━━━━━ 動作環境 ━━━━━━━━━━━━━━━━━━━━ ・Chrome / Edge / Safari の最新版 ・ネット接続は不要です ・外部のサーバーと通信しません。広告もトラッキングもありません ━━━━━━━━━━━━━━━━━━━━ できないこと ━━━━━━━━━━━━━━━━━━━━ ・領域は四角形のみです。L字などの形は作れません ・切り替えは2段（PC用とスマホ用）までです。タブレット用などは作れません ・出力したコードの表示結果を、すべての環境で保証するものではありません ・スマホやタブレットでの操作は確認していません（PCのブラウザでご利用ください） ・作った内容の保存機能はありません（ブラウザを閉じると消えます） ■ 使ってよい範囲 　業務・制作にお使いいただけます。出力したコードは、クレジット表記なしでお使いいただけます。 　ファイルそのものの再配布・販売はご遠慮ください。 ■ 同梱物 　css-grid-builder.html ／ README.txt TOOL BOX