最終更新日

columnsプロパティ

columnsは、段組みの段の幅と、段数をまとめて記述するためのプロパティです。

値には、column-widthcolumn-countの値を、半角スペースで区切って並べます。値の指定を省略した場合は、それぞれの初期値に設定されます。

ただし、指定した値にかかわらず、実際に表示される段の幅や、段数は、要素の表示幅やコンテンツの分量に応じて自動的に変わります。

CSS3での変更点
・columnsは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
各プロパティの初期値 ブロックレベル要素(table要素は除く)
td要素th要素、inline-blockの要素
なし
説明
column-widthの値 段の幅を指定します。
column-countの値 段の数を指定します。
サンプルコード
columns: 3 30em;
columns: 4 200px;
columns: 5 auto;
columns: auto 12em;
columns: auto auto;
参考文献:CSS Multi-column Layout Module外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。