no-image

カラムレイアウト

column-count/カラムの数を指定

段の数を指定

結果

カラムAのテキストです。
カラムBのテキストです。
カラムCのテキストです。
カラムDのテキストです。

解説

column-countは、floatを使わないで段を設定できる便利な機能です。
使えるタグはボックスである必要があります。

column-width/カラムの数を指定

各カラムの横幅を指定

結果

カラムAのテキストです。
カラムBのテキストです。
カラムCのテキストです。
カラムDのテキストです。

解説

column-widthは、カラムそれぞれの幅を指定します。

column-gap/カラムとカラムの間隔

カラムとカラムの間隔

結果

カラムAのテキストです。
カラムBのテキストです。
カラムCのテキストです。

解説

column-gapは、カラムとカラムの間隔を指定できます。

rule-color/カラム境界線の色

カラムの境界線の色

結果

カラムAのテキストです。
カラムBのテキストです。
カラムCのテキストです。

解説

column-rule-colorは、カラムの間のボーダーカラーを指定できます。

rule-style/カラムの境界線の線種

カラムの境界線のスタイル

結果

カラムAのテキストです。
カラムBのテキストです。
カラムCのテキストです。

解説

column-rule-colorは、カラムの間のボーダースタイルを指定できます。

rule-width/カラムの境界線の幅

カラムの境界線の幅

結果

div class=”code-eye”>

カラムAのテキストです。
カラムBのテキストです。
カラムCのテキストです。

解説

column-rule-widthは、カラムの間のボーダー幅を指定できます。

column-rule/カラムの一括指定

カラムの境界線の幅

結果

カラムAのテキストです。
カラムBのテキストです。
カラムCのテキストです。

解説

column-ruleは、borderと同じように、色、線種、線の幅を一括指定できます。