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

CSSのcolumn-rule-widthプロパティで段組みの罫線の太さを設定する方法

CSSで段組み（マルチカラム）レイアウトを作成する際、各カラム（列）の間に表示される罫線（ルールライン）の太さを指定できるのが column-rule-width プロパティです。

column-rule-widthプロパティとは

column-rule-width プロパティは、カラム間の罫線の幅を設定します。このプロパティを有効に機能させるには、column-rule-style プロパティで罫線のスタイル（実線、破線など）をあらかじめ指定しておく必要があります。スタイルが指定されていない場合や none の場合は、罫線の幅に関わらず罫線は表示されません。

指定できる主な値は以下のとおりです。

  • thin … 細い罫線
  • medium … 中程度の罫線（初期値）
  • thick … 太い罫線
  • <length> … px や em などの単位で具体的な幅を指定

使用例

次のコードでは、4つのカラムを持つ段組みレイアウトに対し、column-rule-width: 5px; を指定して、5ピクセルの太さの破線をカラム間に表示しています。併せて column-rule-color で罫線の色をマルーン色に設定しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            column-count: 4;
            column-gap: 50px;
            column-rule-color: maroon;
            column-rule-style: dashed;
            column-rule-width: 5px;
         }
      </style>
   </head>
   <body>
      <div class = "demo">
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
      </div>
   </body>
</html>

まとめ

column-rule-width プロパティを使うことで、段組みレイアウトのカラム間に表示される罫線の太さを自由に調整できます。column-rule-style や column-rule-color と組み合わせて使用することで、読みやすくデザイン性の高いマルチカラムコンテンツを実現できます。また、これら3つのプロパティを一括で指定できる shorthand プロパティとして column-rule も用意されているため、用途に応じて使い分けるとよいでしょう。

  1. CSSのborder-left-widthプロパティで左境界線の幅を設定する方法

    CSSで要素の左側の境界線の幅を指定するには、border-left-widthプロパティを使用します。このプロパティを使うことで、左境界線だけの太さを個別に制御できます。なお、境界線の幅を正しく表示するには、あらかじめborder-styleプロパティで境界線のスタイル（solid、dashedなど）を設定しておく必要があります。スタイルが未指定の場合、初期値が「none」のため、幅を設定しても境界線は表示されませんので注意しましょう。使用できる値thin / medium / thick … 細い・普通・太いというキーワードで指定px、em などの長さの値 … 数値で正確に幅を指定（例：1

  2. CSSのtext-decoration-colorプロパティでテキスト装飾の色を設定する方法

    CSSでテキスト装飾（下線・上線・取り消し線など）の色を変更したい場合は、text-decoration-colorプロパティを使用します。このプロパティを使うことで、テキストそのものの色は変えずに、装飾線だけを好きな色に設定できます。text-decoration-colorプロパティには、カラーネーム（yellow、orangeなど）、16進数カラーコード、RGB値など、CSSで有効な任意の色の値を指定できます。例1：上線（overline）の色を設定する以下の例では、text-decorationプロパティで「overline」を指定し、text-decoration-colorプロパテ