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

CSSのcolumn-rule-styleプロパティで列間の罫線スタイルを設定する方法

マルチカラムレイアウトにおいて、列と列の間に表示される罫線（ルール）のスタイルを設定するには、CSSの column-rule-style プロパティを使用します。このプロパティを使うことで、破線や点線、実線など、さまざまなデザインの区切り線を簡単に実装できます。

column-rule-styleで指定できる主な値

  • none … 罫線を表示しない（初期値）
  • hidden … 罫線を非表示にする
  • dotted … 点線で表示する
  • dashed … 破線で表示する
  • solid … 実線で表示する
  • double … 二重線で表示する
  • groove / ridge / inset / outset … 立体的な装飾線で表示する

以下のコードでは、column-rule-style プロパティに「dashed（破線）」を指定し、列間にマルーン色の破線を表示しています。column-count で段組みの数を、column-gap で列間の余白を、column-rule-color で罫線の色をそれぞれ設定している点にも注目してください。

サンプルコード

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

補足：column-ruleの一括指定

罫線のスタイル・太さ・色は、column-rule ショートハンドプロパティを使って一度にまとめて指定することもできます。例えば column-rule: 2px dashed maroon; のように記述すれば、コードがより簡潔になります。

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

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

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

    text-decoration-styleプロパティとは テキスト装飾の線のスタイルを設定するには、CSSの text-decoration-style プロパティを使用します。このプロパティを使うことで、取り消し線・下線・上線などの装飾線を、実線や二重線、点線、破線、波線など好みのスタイルに変更できます。 構文と使用できる値 text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit; solid … 実線（初期値） double … 二重線 dotted … 点線 dashed … 破線 wavy … 波