6XC

CSS 段組みジェネレーター

列数・列間の余白・仕切り線を新聞のような段組みレイアウトで調整 — ライブプレビューとCSSコード付き。

795回閲覧

段組みレイアウトは、新聞紙面のように長い文章を段ごとに並べて流し込みます。列数や間隔を変えると、このサンプルテキストが即座に組み替わります。仕切り線を有効にすると、段と段の間に細い線を描画できます。長い記事では1行の長さが短くなるため、読みやすさが向上します。 段組みレイアウトは、新聞紙面のように長い文章を段ごとに並べて流し込みます。列数や間隔を変えると、このサンプルテキストが即座に組み替わります。仕切り線を有効にすると、段と段の間に細い線を描画できます。長い記事では1行の長さが短くなるため、読みやすさが向上します。

CSSの段組みレイアウトとは

column-countはブロックの内容を新聞のような等幅の段に分割し、column-gapは段と段の間隔を、column-ruleは仕切り線を描きます(borderと同じ構文です)。テキストはある段からとなりの段へ自動的に流れ込み、長い記事やフッター、索引リストに最適です。段をまたいで分割されたくない要素にはbreak-inside: avoidを指定してください。

よくある質問

column-countとcolumn-widthはどちらを使うべきですか?

column-countは段の数を固定します。column-widthはその幅以上を保ちながらブラウザが可能な限り多くの段を配置します — レスポンシブなレイアウトではこちらが有利です。両方を同時に指定することもできます。

要素が段をまたいで分割されないようにするには?

break-inside: avoid;を指定してください — カードやキャプション付き画像、リスト項目などに便利です。

関連ツール

CSSグラデーション ジェネレーター ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。 使ってみる CSS Box Shadow(ボックスシャドウ)ジェネレーター オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。 使ってみる CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみる CSSテキストシャドウ ジェネレーター オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。 使ってみる