columnsプロパティの説明
CSSのcolumnsプロパティは、段組み要素に関するプロパティを一括で指定します。要素の内容を分割する祭に使用する段数と段の幅をまとめて制御できます。
段組みレイアウトは、新聞や雑誌といった印刷物における限られた紙面の中で文章を効率的に配置する方法です。同じセクションに属する図面や文章を複数の段に分けて配列します。
columnsは、flexボックスやgridレイアウトがブロックレベル要素のレイアウトに適しているのに対して、要素の内容やテキストそのもののレイアウトに有効です。特に、文章構造やアウトラインを変えずに段組みの構成だけを変えられる点に魅力があります。
columns関連のプロパティの充実によって、CSSだけで簡単にマルチカラムのレイアウトを組めるようになりました。特に、プリントアウトを想定する媒体や、雑誌や新聞のレイアウトをモチーフにしたウェブマガジンなどで効果を発揮します。ぜひ有効に活用して下さい。
段の数に関する詳しい内容は、column-countプロパティで解説を行います。段の幅に関する詳しい内容は、column-widthプロパティで解説を行います。
columnsに指定できる値
<'column-count'>- 段組みをする祭に内容を分割する数を指定します。キーワードの
autoか<integer>値が使用できます。この値は、あくまでブラウザに目安を与えるものであり、要素全体の幅や内容の量によって表示が異なります。初期値はautoです。 <'column-width'>- 段組みをする祭に目安となる幅を指定します。キーワードの
autoか<length>値が使用できます。この値は、あくまでブラウザに目安を与えるものであり、要素全体の幅や内容の量によって表示が異なります。初期値はautoです。
columnsの使い方とサンプルコード
columnsプロパティの構文は以下の通りです。
/* 段の数 */
columns: auto;
columns: 3;
/* 段の幅 */
columns: 100px;
columns: 24rem;
/* 段数と幅の指定 */
columns: 3 auto;
columns: auto 32em;
columns: auto auto;
/* グローバル値 */
columns: inherit;
columns: initial;
columns: revert;
columns: unset;
columnsの実例
それでは実際にcolumnsプロパティの書き方を見ていきましょう。水平方向が可変式になっている段組み要素に、段の数と幅を指定した時の挙動を確認します。
resizeに対応しているブラウザであれば、要素の右下にハンドルが表示されるはずです。これを掴んで要素の幅を変えてみて下さい。
<section class="samp_box">
<h2>columns: auto auto;</h2>
<p id="column_1">あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
<h2>columns: 3 100px;</h2>
<p id="column_2">あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
<h2>columns: 6 6rem;</h2>
<p id="column_3">あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
</section>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
resize: horizontal;
}
.samp_box > h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box > p {
margin-top: 1rem;
padding: .3rem;
background: #fff;
column-rule: 1px solid #999;
}
#column_1 {
columns: auto auto;
}
#column_2 {
columns: 3 100px;
}
#column_3 {
columns: 6 6rem;
}