[CSS] Columnスタイル

Study / Javascript, Jquery, Css 作成日付 : 2019/12/17 19:52:56 修正日付 : 2020/02/17 22:35:21

こんにちは。明月です。

今回はColumn要素に関して調べます。

Column要素は筆者もよく使わない機能ですが、仕様によって使うところもあると思うのでまとめておきました。

スタイル種類は下記とおりになります。

スタイル	説明
column-count	カラムの列数を指定する。
column-width	カラムの列幅を指定する（実際の列の幅は、領域のサイズに応じて変化）
columns: -width -count	上記2つのスタイルのShorthandスタイル
column-gap	カラムの間の間隔
column-span	複数のカラムを横断要素
column-rule-width	各列を区別する線の太さ
column-rule-style	各列を区切る線の種類
column-rule-color	各列を区切る線の色
column-rule	上記3つのShorthandスタイル
break-before	ページ指定のスタイル（前）
break-after	ページ指定のスタイル（後）
break-inside	ページの指定のスタイル

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div>
      <h1>CSSカラムスタイルの例</h1>
      こんにちは。CSSのカラムスタイルに関して説明しています。これは例のための文言です。ありがとうございます。こんにちは。CSSのカラムスタイルに関して説明しています。これは例のための文言です。ありがとうございます。こんにちは。CSSのカラムスタイルに関して説明しています。これは例のための文言です。ありがとうございます。こんにちは。CSSのカラムスタイルに関して説明しています。これは例のための文言です。ありがとうございます。
      <hr />
      こんにちは。CSSのカラムスタイルに関して説明しています。これは例のための文言です。ありがとうございます。こんにちは。CSSのカラムスタイルに関して説明しています。これは例のための文言です。ありがとうございます。
    </div>
  </body>
</html>

div{
  height:calc(80vh);
  /* カラムを三つを作る。幅とカラム数を指定 */
  columns:calc(10vw) 3;
  /* カラム間の間隔 */
  column-gap:50px;
  /* カラムを区分する線の太さ、タイプ、色 */
  column-rule:2px solid blue;  
}
div > h1{
  /* カラムを横断要素 */
  column-span:all;
  text-align:center;
}
div > hr{
  column-break-after:always;
}