CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのcolumn-ruleプロパティとは？段組み罫線を一括設定できる省略形プロパティの使い方

column-ruleプロパティとは

column-ruleは、マルチカラムレイアウトにおいて段組み（カラム）間に引かれる罫線を一括で設定できる省略形（ショートハンド）プロパティです。通常、罫線を指定するには以下の3つの個別プロパティが必要ですが、column-ruleを使えば1行でまとめて記述できます。

  • column-rule-width … 罫線の太さ
  • column-rule-style … 罫線のスタイル（実線・点線・破線など）
  • column-rule-color … 罫線の色

borderプロパティと同じような書式で指定でき、値は「太さ スタイル 色」の順に半角スペースで区切って並べます。

コード例

次のサンプルコードでは、column-ruleプロパティを使って「2px」の太さ・「dotted」（点線）スタイル・「orange」（オレンジ色）を一度に指定しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            column-count: 4;
            column-gap: 50px;
            column-rule: 2px dotted orange;
         }
      </style>
   </head>
   <body>
      <div class = "demo">
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text.
         This is demo text.
      </div>
   </body>
</html>

表示結果のポイント

このコードを実行すると、テキストはcolumn-count: 4によって4つのカラムに分割され、カラム間にはcolumn-gap: 50pxで50pxの余白が確保されます。さらに、その中央にオレンジ色の2px幅の点線（dotted）が罫線として表示されます。

個別プロパティで書き換えると

上記の省略形は、以下のように個別プロパティを組み合わせた場合と同じ結果になります。

.demo {
   column-count: 4;
   column-gap: 50px;
   column-rule-width: 2px;
   column-rule-style: dotted;
   column-rule-color: orange;
}

このようにcolumn-ruleプロパティを活用することで、CSSをすっきりと短く記述でき、メンテナンス性も向上します。主要なモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）で広くサポートされているため、安心して利用できます。

  1. CSSのoutlineショートハンドプロパティとは？構文と使い方を実例付きで解説

    CSS outlineショートハンドプロパティとは？ outlineショートハンドプロパティを使うと、要素の境界線の外側に、スタイル（必須）・太さ・色を指定した線をまとめて定義できます。borderプロパティとは異なり、outlineは要素の寸法（幅や高さ）に含まれないため、レイアウトに影響を与えずに輪郭線を表示できるのが大きな特徴です。 構文 CSS outlineショートハンドプロパティの構文は次のとおりです。 Selector {    outline: /*値*/ } 指定できる値 outline-width：線の太さ（thin / medium / thic

  2. CSSのcolorプロパティで文字色を設定する方法

    CSSを使用すると、要素のテキスト、ボーダー（枠線）、背景それぞれに対して自由に色を定義できます。その中でもcolorプロパティは、要素内のテキストの色を指定するために使われる基本的なプロパティです。基本構文CSSのcolorプロパティは、次のような形式で記述します。セレクタ {     color: /* 値 */; }値には、キーワード名（例：red、blue）、16進数カラーコード（例：#ff0000）、RGB値（例：rgb(255,0,0)）など、さまざまな形式が利用可能です。サンプルコード①：divとp要素への色指定以下の例では、div要素とp