TOOL BOX｜手作業をツールにするTOOL BOX｜手作業をツールにする

【無料】CSS Gridレイアウトビルダー｜クリックとドラッグでgrid-template-areasを作る（6×6まで）

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

「ギフトとして贈る」とは

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