概要
CSSプロパティ｢columns｣は、列幅（columns-width）と列数(columns-count)をまとめて指定するショートハンドプロパティです。
<p class="columns">吾輩わがはいは猫である。名前はまだ無い。
どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始みはじめであろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶やかんだ。その後ご猫にもだいぶ逢あったがこんな片輪かたわには一度も出会でくわした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙けむりを吹く。どうも咽むせぽくて実に弱った。これが人間の飲む煙草たばこというものである事はようやくこの頃知った。
</p>
<style>
p {
font-size: 10px;
}
.columns {
columns: 10em;
}
</style>また他にカラムを装飾するプロパティの種類として、column-gap, column-rule, break-before, break-after, break-inside があります。
値の指定方法
値には 列幅と、カラム数を指定することができます。もし、指定がない場合はそれぞれの値に｢auto｣がはいります。
{ columns: <列幅> <カラム数> }| 値 | 説明 |
|---|---|
| 列幅 | カラム幅を指定します。マイナス値はいれることができません。px、emなどを指定できます。初期値はauto |
| カラム数 | 正の整数値の最大許容値を指定できます。初期値はauto |
それぞれの指定例
<p class="columns-1">吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p class="columns-2">吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p class="columns-3">吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<style>
p {
font-size: 10px;
}
.columns-1 {
columns: 50px; /* 列幅のみ指定 */
}
.columns-2 {
columns: 5; /* カラム数のみ指定 */
}
.columns-3 {
columns: 10em 5; /* 列幅とカラム数を指定*/
}
</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;
columns: 3 100px;
}
</style>