CSSカラムジェネレーター
CSSの多段組みレイアウトを生成します。カラム数、幅、間隔、区切り線を設定し、新聞風のライブプレビューで確認してから、CSSとHTMLをコピーできます。
入力
0 = 自動。幅を指定すると、スペースが狭い場合にブラウザーは指定したカラム数より少ないカラム数を使うことがあります。
出力
ここにカラムレイアウトが表示されます。
CSS
HTML
役に立ちましたか？
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-columns-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-columns-generator` tool (CSS Columns Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-columns-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSカラムジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
CSSの多段組みレイアウトは、新聞のように1つのコンテンツブロックを複数のカラムに流し込みます。余分なマークアップは不要です。このジェネレーターでは、カラム数、希望の幅、間隔、区切り線を設定でき、ライブプレビューで確認しながら、コピーできるCSSを取得できます。
使い方
- カラム数を設定します(1～6)。またはカラムの幅を追加すると、ブラウザーが収まるカラム数を自動で決めます。
- カラム同士の間隔を調整します。
- 区切り線を選択します。スタイル、太さ、色を設定できます。削除するには「なし」を選びます。
- CSSとHTMLをコピーします。
カラム数と幅
column-count はカラム数を固定します。column-width は理想の幅を指定し、ブラウザーが収まる範囲で最大限のカラムを配置します。両方を指定した場合、省略形の columns: 200px 3 は「最大3カラム、それぞれ幅200px以上」を意味します。小さな画面でレイアウトが適切に縮小するようにする際によく使われる書き方です。
ヒント
- カラムは長文に向いています。カードのグリッドやページのレイアウトには、CSS Gridを使ってください。詳しくは CSS Grid Generator をご覧ください。
- 図版など、カラムの間で分割されてほしくない子要素には
break-inside: avoidを使います。 - 区切り線は独自の幅を占有しません。間隔の中央に配置されます。
プライバシー
すべての処理はお使いのブラウザー内で行われます。設定内容がアップロードされることはありません。
css columnsmulti column layoutcolumn-countcolumn-gapcolumn-rulenewspaper layouttext columns