CSSでMulti Columnのカラムごとの幅を設定する方法/column-widthプロパティの使い方

centimeter IT

CSSでカラム数を指定した場合、カラムごとに幅を設定することが可能です。

Advertisements

column-widthの使い方

カラムに対してcolumn-widthプロパティを設定することで、カラムの幅を指定することができます。

column-widthを20pxで指定した文章column-widthを20pxで指定した文章column-widthを20pxで指定した文章
<!-- html -->
<div class = "colmn20">column-widthを20pxで指定した文章</div>

/*CSS*/
.colmn20{
column-width:20px;
}
column-widthを50pxで指定した文章column-widthを50pxで指定した文章column-widthを50pxで指定した文章
<!-- html -->
<div class = "colmn50">column-widthを50pxで指定した文章</div>

/*CSS*/
.colmn50{
column-width:50px;
}

Column-countと併用した場合

上記のように単体で使用すると可能な限りカラム数を増やしますが、Column-countプロパティでカラムの数も指定すると、カラムがすべて表示できる限りは、column-widthは無視されます。

3カラムで幅が50pxの文章3カラムで幅が50pxの文章3カラムで幅が50pxの文章3カラムで幅が50pxの文章3カラムで幅が50pxの文章
<!-- html -->
<div class = "colmn3">3カラムで幅が50pxの文章</div>

.colmn3{
column-width:50px;
column-count:3;
}

ただし、column-widthを指定しておくと、min-widthと同じような挙動をします。カラムをすべて表示するとcolumn-widthを達成できない場合、column-widthが優先されます。

3カラムで幅が500pxの文章3カラムで幅が500pxの文章3カラムで幅が500pxの文章3カラムで幅が500pxの文章3カラムで幅が500pxの文章
<!-- html -->
<div class = "colmn500">3カラムで幅が500pxの文章</div>

.colmn500{
column-width:500px;
column-count:3;
}

つまり両方指定することで、カラム幅の最低サイズは維持しつつ、表示可能なら横にカラムを多く表示するレイアウトとなります。

CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント