WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「マルチカラムのカラムの数と横幅」

columns,column-count,column-width 「マルチカラムのカラムの数と横幅」

マルチカラムのカラムの数、横幅を指定します。

  • 「columns」は、マルチカラムのカラムの数、横幅をまとめて指定します。省略した値は、それぞれの初期値が設定されます。
  • 「column-count」は、マルチカラムのカラムの数を指定します。
  • 「column-width」は、マルチカラムのカラムの横幅を指定します。
CSS Ver.適用要素継承
3.0ブロックレベル要素
(<table>は除く)
<th>,<td>
インラインブロック要素
しない
広告

columns,column-count,column-width の指定方法

構文

columns : column-count || column-width;

column-count : 値 | auto;

column-width : 値 | auto;

プロパティ/設定値意味
columns: column-count column-width; マルチカラムのカラムの数、横幅をスペースで区切って、任意の順で1~2個指定可能。
デフォルト:「タグ毎のスタイル初期値」を参照
column-count: ; カラムの数を整数で指定
column-count: auto ; 他の属性をもとにカラムの数を自動で算出(初期値)
デフォルト:「タグ毎のスタイル初期値」を参照
column-width: 100px;
column-width: 50%;
column-width: 10em;
カラムの横幅を値で指定
長さ・大きさの単位参照
column-width: auto; 他の属性をもとにカラムの幅を自動で算出(初期値)
デフォルト:「タグ毎のスタイル初期値」を参照

※ 未対応のブラウザの場合、ベンダープレフィックスが必要です。

ページTOP

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を両方指定。

※カラム数と横幅を両方指定したが、カラム数が優先される。

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン