概要
CSSプロパティ｢column-count｣は、カラム数を指定する際に使用します。
<p class="column-count">明日の天気予報です。明日は全国的に晴れるでしょう。ですが、夕方以降急な雨に注意してください。</p>
<style>
.column-count {
column-count: 2;
}
</style>また他にカラムを装飾するプロパティの種類として、column-width, column-gap, column-rule, break-before, break-after, break-inside があります。
値の指定方法
{ column-count: <カラム数> }| 値 | 説明 |
|---|---|
| 数値 | 期待する最大許容カラム数。マイナス値は指定できません |
| auto | column-width などの他のCSS プロパティによって自動的に指定されます |
<p>column-count: 2;を指定</p>
<div class="multicolumnbox multicolumnbox-2">
<div>左カラムです。左カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
<div>右カラムです。右カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
</div>
<p>column-count: 4;を指定</p>
<div class="multicolumnbox multicolumnbox-4">
<div>左カラム1です。左カラム1に入れたいテキストなどはこの要素内に入れていきます。</div>
<div>左カラム2です。左カラム2に入れたいテキストなどはこの要素内に入れていきます。</div>
<div>右カラム1です。右カラム1に入れたいテキストなどはこの要素内に入れていきます。</div>
<div>右カラム2です。右カラム2に入れたいテキストなどはこの要素内に入れていきます。</div>
</div>
<style>
.multicolumnbox div {
font-size: 12px;
border: 1px solid #000;
background-color: #def;
}
.multicolumnbox-2 {
padding: 10px;
column-width: 100px;
column-count: 2;
}
.multicolumnbox-4 {
padding: 10px;
column-width: 50px;
column-count: 4;
}
</style>プロパティの種類について
ショートハンドプロパティや、個別指定できるプロパティなど、columnプロパティをまとめた概要一覧です。詳細はそれぞれのページを参照してみてください。
| プロパティ名 | 説明 |
|---|---|
| columns | 「column-count」と「column-width」を指定できるショートハンドプロパティ |
| column-count | カラム数を指定する |
| column-width | カラムの幅と指定する |
| column-rule | 「column-rule-color」と「column-rule-style」と「column-rule-width」をまとめて指定するショートハンドプロパティ |
| column-rule-color | カラム間の区切り線の色を指定する |
| column-rule-style | カラム間の区切り線のスタイルを指定する |
| column-rule-width | カラム間の区切り線の幅を指定する |
| column-gap | カラム同士の間隔を指定する |
| column-fill | カラム同士の高さをそろえるかどうかを指定する |
| column-span | 複数のカラムにまたがる要素に指定する |
使用例
このプロパティを使うことで、マルチカラムレイアウトを実装することができます。今までは、一つ一つ組み上げていたものが簡単にできるようになります。
<div class="header">ヘッダー</div>
<div class="multicolumnbox">
<div>左カラムです。左カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
<div>真ん中のカラムです。真ん中カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
<div>右カラムです。右カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
</div>
<div class="footer">フッター</div>
<style>
.header,
.footer {
margin: 0px 10px;
border: 1px solid #000;
}
.multicolumnbox div {
border: 1px solid #000;
background-color: #def;
}
.multicolumnbox {
padding: 10px;
column-width: 100px;
column-count: 3;
}
</style>