cman.jp > WEBページ作成TOP > CSSリファレンス > 「マルチカラムのカラムの数と横幅」
WEBページ作成
広告
columns,column-count,column-width 「マルチカラムのカラムの数と横幅」
広告
columns,column-count,column-width の指定方法
| 構文 | |
|---|---|
|
columns : column-count || column-width; column-count : 値 | auto; column-width : 値 | auto; |
|
| プロパティ/設定値 | 意味 |
| columns: column-count column-width; | マルチカラムのカラムの数、横幅をスペースで区切って、任意の順で１～２個指定可能。 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
| column-count: 値; | カラムの数を整数で指定 |
| column-count: auto ; | 他の属性をもとにカラムの数を自動で算出（初期値） |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
|
column-width: 100px; column-width: 50%; column-width: 10em; |
カラムの横幅を値で指定 「長さ・大きさの単位」参照 |
| column-width: auto; | 他の属性をもとにカラムの幅を自動で算出（初期値） |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
※ 未対応のブラウザの場合、ベンダープレフィックスが必要です。
columns,column-count,column-width のサンプル
<style type="text/css">
.css-columns-c{columns : 3;}
.css-columns-w{columns : 150px;}
.css-columns-cw{columns : 3 150px;}
.css-count{column-count : 3;}
.css_width{column-width : 150px;}
.css-count-width{
column-count : 3;
column-width : 150px;
}
</style>
<!-- html -->
<b>◆columns: 3;</b>
<div class="css-columns-c">columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。</div>
<b>◆column-count: 3;</b>
<div class="css-count">column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。</div>
<b>◆columns: 150px;</b>
<div class="css-columns-w">columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。</div>
<b>◆column-width: 150px;</b>
<div class="css-width">column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。</div>
<b>◆columns: 3 150px;</b>
<div class="css-columns-cw">columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。</div>
<b>◆column-count: 3; column-width: 150px;</b>
<div class="css-count-width">column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。</div>
◆columns: 3;
columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。columnsにカラム数のみ指定。
◆column-count: 3;
column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。column-countのみ指定。
◆columns: 150px;
columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。columnsに横幅のみ指定。
◆column-width: 150px;
column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。column-widthのみ指定。
◆columns: 3 150px;
columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。columnsにカラム数、横幅をまとめて指定。
※カラム数と横幅を両方指定したが、カラム数が優先される。
◆column-count: 3; column-width: 150px;
column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。column-countとcolumn-widthを両方指定。
※カラム数と横幅を両方指定したが、カラム数が優先される。
| 関連するCSS(STYLE) | |
|---|---|
| column-count | マルチカラムのカラムの数 |
| column-fill | マルチカラムのカラムのバランス |
| column-gap | マルチカラムのカラムの間隔 |
| column-rule | マルチカラムの区切り線 |
| column-rule-color | マルチカラムの区切り線の色 |
| column-rule-style | マルチカラムの区切り線のスタイル |
| column-rule-width | マルチカラムの区切り線の太さ |
| column-span | マルチカラムのカラムをまたがって表示 |
| column-width | マルチカラムのカラムの横幅 |
広告