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

CSS3のcolumn-gapプロパティで段組みの列間隔を設定する方法

CSS3で段組み（マルチカラム）レイアウトの列と列の間隔を設定するには、column-gapプロパティを使用します。このプロパティを使うことで、テキストが複数の列に分かれた際の列間の余白を自由にコントロールできます。

column-gapプロパティの構文

column-gapプロパティに指定できる値は以下のとおりです。

column-gap: length|normal|initial|inherit;
  • length：pxやemなどの単位で列間隔を数値指定します。
  • normal：ブラウザのデフォルト値（通常は1em程度）が適用されます。
  • initial：プロパティの初期値に戻します。
  • inherit：親要素の値を継承します。

例1：25pxの列間隔を指定する

以下の例では、column-countで4列に分割し、column-gapで25pxの間隔を設定しています。古いブラウザ向けに、ベンダープレフィックス（-webkit-、-moz-）も併せて記述しています。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    column-count: 4;
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    -webkit-column-gap: 25px; /* Chrome, Safari, Opera */
    -moz-column-gap: 25px; /* Firefox */
    column-gap: 25px;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
今日の人工知能（AI）は、ブロックチェーンや量子コンピューティングのブームを大きく上回る勢いで発展しています。
これは、高性能な計算リソースが一般の人でも容易に利用できるようになったことが大きな要因です。
開発者たちはこれを活かし、新たな機械学習モデルの作成や、既存モデルの再トレーニングによる性能向上を進めています。
ハイパフォーマンスコンピューティング（HPC）の手軽な利用が可能になったことで、
機械学習スキルを持つIT専門家への需要が急激に高まっています。
</div>
</body>
</html>

実行結果

CSS3のcolumn-gapプロパティで段組みの列間隔を設定する方法

各列の間に25pxの余白が確保され、読みやすい段組みレイアウトになっていることが確認できます。

例2：normalを指定した場合

次に、column-gapにnormalを指定した例を見てみましょう。この場合、ブラウザが定める標準的な間隔が自動的に適用されます。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    column-count: 2;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    -webkit-column-gap: normal; /* Chrome, Safari, Opera */
    -moz-column-gap: normal; /* Firefox */
    column-gap: normal;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
今日の人工知能（AI）は、ブロックチェーンや量子コンピューティングのブームを大きく上回る勢いで発展しています。これは、高性能な計算リソースが一般の人でも容易に利用できるようになったことが大きな要因です。開発者たちはこれを活かし、新たな機械学習モデルの作成や、既存モデルの再トレーニングによる性能向上を進めています。ハイパフォーマンスコンピューティング（HPC）の手軽な利用が可能になったことで、機械学習スキルを持つIT専門家への需要が急激に高まっています。
</div>
</body>
</html>

実行結果

CSS3のcolumn-gapプロパティで段組みの列間隔を設定する方法

normalを指定すると、ブラウザ標準の適切な間隔で列が分けられます。数値での細かい調整が必要ない場合は、こちらの指定方法が便利です。

まとめ

column-gapプロパティを使えば、CSS3のマルチカラムレイアウトにおける列間隔を簡単に制御できます。具体的なサイズを指定したい場合はlength値を、標準的な間隔で十分な場合はnormalを使用しましょう。主要ブラウザとの互換性を考慮し、必要に応じてベンダープレフィックスを併記することをおすすめします。

  1. CSS3のtransformで実現！要素の2D変換の基本と使い方

    2D変換とは？CSS3の2D変換（2D Transform）は、translate（移動）、rotate（回転）、scale（拡大・縮小）、skew（傾斜）などの関数を使って、HTML要素の位置や形状を自由に変更できる機能です。これらの変換を組み合わせることで、従来はJavaScriptが必要だった視覚効果を、CSSだけで手軽に実現できます。主な2D変換関数一覧No.値と説明1matrix(n,n,n,n,n,n)6つの値を指定して、行列による変換を定義します。2translate(x,y)X軸・Y軸の両方向に沿って要素を移動させます。3translateX(n)X軸方向に沿って要素を移動させ

  2. CSS3のword-breakプロパティで改行ルールを指定する方法

    CSS3で改行（ワードブレイク）のルールを指定するには、word-breakプロパティを使用します。このプロパティは、テキストがコンテナの幅を超えた場合に、どのように行を折り返すかを制御するものです。word-breakプロパティに指定できる主な値は以下のとおりです。normal：デフォルトの改行規則に従います。日本語や中国語などのCJK言語では任意の位置で改行されますが、英語などの欧文ではスペースやハイフンがある箇所でのみ改行されます。break-all：言語に関係なく、任意の文字の間で改行を許可します。英語のような単語の途中でも強制的に折り返されるため、幅の狭いコンテナで長い英単語を表示し