モバイルデバイスで使用できますか？

Yes, this tool works on any device with a modern browser including phones and tablets.

このツールはオフラインで動作しますか？

Yes, once the page has loaded, the tool works entirely in your browser without needing an internet connection. All processing is done locally with JavaScript.

Is there a character or line limit?

There is no hard limit. The tool can handle files with tens of thousands of lines, though very large inputs may slow down depending on your browser and device.

CSSマルチカラム・ジェネレーター

ライブプレビュー付きで新聞風の複数列レイアウトを作成します。列、ギャップ、スタイル、罫線の幅を調整します。

列

ギャップ(px)

最小幅(px)

罫線スタイル

罫線の幅(px)

罫線の色

プレビュー

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

CSSコード

CSS マルチカラムとは

CSS Multi-column Layout モジュール(W3C 仕様「CSS Multi-column Layout Module Level 1」)は、同じ要素のコンテンツを2列以上に自動的に分配します。何世紀にもわたって新聞や雑誌の組版が長文を扱ってきたのと同じ方法です。希望するカラム数(または各カラムの希望する幅)を宣言すると、ブラウザはコンテンツを上から下へ、左から右へ流し、行数のバランスをとって各カラムがほぼ同じ高さで終わるようにします。このモジュールは2011年4月に W3C 勧告候補となり、Firefox 3.5(2009年6月)から IE 10(2012年10月)の間にブラウザに実用的に展開されました。10年以上前から確立された Web プラットフォーム機能です。Flexbox や Grid と異なり、これらは別個の子要素を既知の位置に配置するのに対し、マルチカラムはコンテンツを単一の連続したフローとして扱い、ブラウザが利用可能な高さに基づいてカラムに切り分けます。

CSS カラムが正しいツールである場合

大画面での長い記事。 75文字を超える単一カラムでテキストを読むと目が疲れます。視線が次の行の先頭を見つけるのに移動する距離が大きすぎるからです。2カラム化すると同じ垂直空間を使いながら行長が半分になり、ワイドスクリーンでの可読性が劇的に改善します。
定義リストと用語集。 短い項目の長いアルファベット順リストは、手作業でバランスをとらなくても自然に複数カラムにラップします。
フッターのリンクリスト。 数十のリンクを持つ古典的な「サイトマップ」フッター、つまりカテゴリーがカラムで、リンクが横並びというものは、column-count に完璧に適合します。
機能リストと箇条書き列挙。 単一カラムで延々とスクロールする長いリストは、2カラムまたは3カラムでずっと読みやすくなります。
印刷スタイルシート。 マルチカラムは、印刷へ美しく変換される数少ない CSS 機能のひとつです。新聞が発明以来使ってきたのと同じ形式です。

column-count vs column-width、最も重要な区別

カラムを指定する2つの方法があり、選択はレスポンシブにとって重要です。column-count: 3 は3カラムをハードコードします。ウィンドウ幅に関係なく、ブラウザは正確に3カラムを生成し、コンテナが狭くなるにつれて縮みます。スマホでは、3カラムが読めない細い帯になります。一方 column-width: 250px は「少なくとも 250 ピクセル幅のカラム」を要求します。ブラウザはコンテナにいくつ収まるかを計算し、ウィンドウが変わると自動的に再分配します。大画面では多くのカラム、小画面では1つまたは少数のカラムが、メディアクエリなしで得られます。組み合わせパターンが現代のベストプラクティスです: columns: 250px 4(column-width と column-count の省略形)は「カラムは 250 ピクセル幅、ただし 4 を超えない」という意味です。ブラウザは大型デスクトップで 4 カラム、タブレットでより少なく、スマホで 1 カラムを自動的に生成します。本番 CSS のほとんどはこの組み合わせ形式を堅牢性のために使用します。

コンテンツがどこで切れるかを制御する

デフォルトでは、ブラウザはたどり着いた場所でカラムを切ります。これは時に見出しを最初の段落から離したり、カードを2つに切り裂いたりします。CSS プロパティ break-inside: avoid(CSS Fragmentation Module Level 3)はブラウザに「この要素をカラム間で分けるな」と指示します。通常、カード、図、まとまっているべきコンテンツに適用されます。break-before: column は要素の前にカラムブレークを強制し、「各セクションを新しいカラムで開始」に有用です。column-span: all は見出しやサイドバーを全幅にわたらせ、カラムフローから抜け出します。カラム本文の上に置く記事タイトルに典型的です。

注意すべき落とし穴

マルチカラムには知っておくべき微妙な相互作用があります。スクリーンリーダーの読み上げ順は DOM 順に従い、これは通常カラムの上下視覚順に対応します。ただし支援技術は複雑なレイアウトで時々混乱することがあります。印刷時のページ分割はマルチカラムでページ境界の間に奇妙なバランス調整を生じる可能性があります。紙の出力が重要であれば印刷スタイルシートでテストしてください。長いコンテンツは下方向に埋まります。 マルチカラムコンテナにコンテンツが要求するより低い固定の高さを与えるとあふれ、高さを制約しなければ、ブラウザはカラムをほぼ等しい高さにバランスします。アンカーされたコンテンツ(フォーム、所定の位置にとどまる必要のあるインタラクティブ要素)はカラムでうまく機能しません。ユーザーがどこを見るべきかわからないからです。同レベルで Grid または Flexbox と混合すると予測できない結果を生みます。コンテナごとに1つのレイアウト方法を選んでください。

生成されるCSSプロパティ

column-count, 固定列数
column-width, レスポンシブレイアウト用の最小列幅
column-gap, 列間のスペース
column-rule, 列間の装飾線(幅、スタイル、色)
column-span, すべての列にまたがる要素(見出し)