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

CSS3のcolumnsプロパティで列数と列幅を設定する方法

CSS3では、columnsプロパティを使うことで、要素の列数（カラム数）と列幅（カラム幅）をまとめて設定できます。このプロパティは、column-widthとcolumn-countのショートハンド（省略記法）であり、次のように記述します。

columns: auto|column-width column-count|initial|inherit;

例1：列数を自動設定する

まずは、列数を指定する基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    -webkit-columns: auto auto; /* Chrome, Safari, Opera */
    -moz-columns: auto auto; /* Firefox */
    columns: auto auto;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>

表示結果

ブラウザで表示すると、テキストが複数の段組みに自動的に分割されて表示されます。

CSS3のcolumnsプロパティで列数と列幅を設定する方法

例2：列幅と列数を明示的に指定する

次に、列幅を40px、列数を3に指定した例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    -webkit-columns: 40px 3; /* Chrome, Safari, Opera */
    -moz-columns: 40px 3; /* Firefox */
    columns: 40px 3;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>

表示結果

この場合、テキストは指定された幅の3つのカラムに分割されて表示されます。

CSS3のcolumnsプロパティで列数と列幅を設定する方法

各値の意味

  • auto： 列幅・列数ともにブラウザの既定値が適用されます。
  • column-width column-count： 各列の最小幅と列数をスペース区切りで指定します。片方だけの指定も可能です。
  • initial： プロパティを初期値に戻します。
  • inherit： 親要素から値を継承します。

補足：ベンダープレフィックスについて

上記のコードにある-webkit-や-moz-はベンダープレフィックスと呼ばれるもので、古いバージョンのChrome・Safari・Firefoxなどでも段組みレイアウトを正しく表示するために記述されています。現在のモダンブラウザでは標準のcolumnsプロパティが広くサポートされていますが、互換性を考慮する場合は併記しておくと安心です。

  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：言語に関係なく、任意の文字の間で改行を許可します。英語のような単語の途中でも強制的に折り返されるため、幅の狭いコンテナで長い英単語を表示し