CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのcolumn-fillプロパティで段組みカラムを均等に埋める方法

CSSで段組み（マルチカラム）レイアウトを作成した際、各カラム（列）の中身をどのように分配するかを制御したい場合は、column-fill プロパティを使用します。このプロパティを使うことで、コンテンツを各カラムに均等に振り分けたり、順番に詰めて配置したりすることができます。

column-fillプロパティの主な値

  • balance（初期値）：すべてのカラムの高さができるだけ均等になるように、コンテンツをバランスよく分割します。
  • auto：カラムを順番に埋めていき、高さが指定されている場合などは最後のカラムが短くなることがあります。

column-fill: balance の使用例

以下のコードでは、column-count: 4 で4つのカラムを作成し、column-fill: balance を指定して各カラムの高さを均等に揃えています。実際にコードを実行して動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-fill: balance;
}
</style>
</head>
<body>
<div class="demo">
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text.
</div>
</body>
</html>

column-fill: auto との違い

auto を指定した場合は、最初のカラムから順にコンテンツが詰め込まれます。要素に高さ（height）や max-height が設定されている場合に挙動の違いが分かりやすくなります。新聞のような見た目で全体をきれいに整えたい場合は balance を、上から順に流し込みたい場合は auto を選ぶとよいでしょう。

対応ブラウザについて

column-fill プロパティは、Chrome、Firefox、Safari、Edge などの主要なモダンブラウザで広くサポートされています。古いブラウザ向けにはベンダープレフィックス（-webkit- など）が必要な場合があるため、必要に応じて併記しておくと安心です。

  1. CSSでテキストボタンのスタイルを設定する方法をわかりやすく解説

    テキストボタンとは、背景色を持たずに文字色だけで視覚的な印象を与えるボタンのスタイルです。Google マテリアルデザインなどでも採用されている洗練されたデザインで、CSSを使えば簡単に実装できます。テキストボタンのスタイリングのポイントテキストボタンを作る基本は、border: none; でボタンの枠線とデフォルトの背景を消し、color プロパティで文字色を指定することです。さらに :hover 疑似クラスを組み合わせると、マウスオーバー時に薄いグレーの背景を表示でき、クリックできる要素であることが直感的に伝わります。以下のコードでは、Success・Info・Warning・Dange

  2. CSSで光るテキスト（グロー効果）を作成する方法

    CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {