CSS3で段組みをするプロパティcolumn-count

記事内に広告が含まれています。

CSS3では段組みをcolumn-countプロパティを利用することでpositionプロパティやfloatプロパティを利用することなく簡単に実現できます。

そのcolumn-countプロパティの使い方を解説します。

CSS3で段組みをするプロパティcolumn-count

段の数を指定して段組みを作成するにはcolumn-countを使います。

column-countプロパティで段組みを作成すると幅はすべて均等になります。

また、高さも同じ高さで自動的に揃えられます。

段組み全体の幅はwidthプロパティで指定して決定します。

column-countプロパティの使い方

column-countプロパティの使い方は以下のようになります。

.col-box{
    column-count:5;
    width:100%;
    border: medium solid #ff00ff;
}

※ここではわかりやすくするために枠線を可視化しています。

<div class="col-box">
春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。秋は夕暮れ。夕日の差して山の端いと近うなりたるに、烏の寝所へ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入り果てて、風の音、虫の音など、はた言ふべきにあらず。冬はつとめて。雪の降りたるは言ふべきにもあらず、霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、炭持て渡るも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の火も、白き灰がちになりてわろし。
</div>

これを表示させると

春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。秋は夕暮れ。夕日の差して山の端いと近うなりたるに、烏の寝所へ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入り果てて、風の音、虫の音など、はた言ふべきにあらず。冬はつとめて。雪の降りたるは言ふべきにもあらず、霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、炭持て渡るも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の火も、白き灰がちになりてわろし。

になります。

5段の段組みが自動で作成されています。

column-countプロパティの値を変えるだけで

.col-box{
    column-count:3;
    width:100%;
    border: medium solid #ff00ff;
}
春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。秋は夕暮れ。夕日の差して山の端いと近うなりたるに、烏の寝所へ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入り果てて、風の音、虫の音など、はた言ふべきにあらず。冬はつとめて。雪の降りたるは言ふべきにもあらず、霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、炭持て渡るも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の火も、白き灰がちになりてわろし。

とHTMLを変更することなく、段組みの数を簡単に変えることができます。

ちなみに自動翻訳ツールで英訳した「枕草子」でもきちんと段組みできます。

Spring is dawning. The white of the mountains is turning white, and a little light is shining, and purple clouds are trailing thinly. Summer is at night. Summer is at night; the moon is even darker, and many fireflies are flying about. And just one or two will be faintly lit. It will rain, too. Autumn is at dusk. In the evening sunshine, near the edge of the mountains, three, four, two, three, etc., fly past in a hurry to find a place for crows to sleep. A row of geese and other wild geese are flying in a row, but they are still very small. The sun is setting and the sound of the wind and insects are no longer to be heard. Winter has come to an end. The snow is falling, and the frost is too white, and the cold is too cold to tell, though we hasten to make a fire and carry the coals across the street. It is daytime, and when the tepid air grows sluggish, the fires in the fire troughs have turned to ashes.

まとめ

CSS3ではcolumn-countプロパティを利用することでpositionプロパティやfloatプロパティを利用することなく段組みが簡単に実現できます。

また、column-countプロパティの値を変更するだけで段組みの数も変更できるのでHTMLをいちいち修正する手間が省けます。

タイトルとURLをコピーしました