columnsプロパティで指定できる値
columnsプロパティでは次のプロパティの値を指定することができます。
指定順序は自由となり、どちらが先でも問題ありません。
値を省略した場合は各プロパティの初期値が適用されます。
| プロパティ | 内容 |
|---|---|
| column-countプロパティ | 列数の最大値を指定。 |
| column-widthプロパティ | 列幅を指定。 |
以降はcolumnsプロパティの使用例とブラウザでの表示例になります。
パターン1: 列数のみ指定
列数のみ指定する例です。
CSS コード例
.element1 {
columns: 2;
}HTML コード例
<p class="element1">ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。アジア系の観光客も多く、浴衣を着て川越街道を歩くことは素晴らしいコンテンツになっているようです。</p>
パターン2: 列数と列幅を指定
column-countプロパティとcolumn-widthプロパティの値を指定した例です。
指定順序は任意となり、逆にしても同じ表示結果となります。
CSS コード例
.element2 {
columns: 3 7em;
}HTML コード例
<p class="element2">ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。アジア系の観光客も多く、浴衣を着て川越街道を歩くことは素晴らしいコンテンツになっているようです。</p>