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

CSSで段組みの列間罫線の色を設定する方法（column-rule-colorプロパティ）

CSSで段組みの列間罫線の色を設定する方法

段組み（マルチカラム）レイアウトの列と列の間に表示される罫線（ルール）の色を設定するには、column-rule-color プロパティを使用します。以下のコードを実行して、実際の表示を確認してみてください。

この例では、罫線の色に加えて、罫線のスタイル（線種）もあわせて指定しています。

サンプルコード

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

コードのポイント

  • column-count: 4; — テキストを4段に分割します。
  • column-gap: 50px; — 列と列の間隔を50pxに設定します。
  • column-rule-color: orange; — 列間の罫線の色をオレンジ色に指定します。
  • column-rule-style: dashed; — 罫線を破線で表示します。

なお、これらの罫線関連のプロパティは、column-rule ショートハンドプロパティを使って「column-rule: dashed orange;」のように幅・スタイル・色を一括で指定することもできます。対応していない古いブラウザでは、ベンダープレフィックス（-webkit- など）が必要な場合がある点にも注意しましょう。

  1. CSSでテキストの最終行を揃える方法｜text-align-lastプロパティの使い方

    CSSのtext-align-lastプロパティを使用すると、ブロック要素内のテキストの最終行の揃え位置を個別に指定できます。段落全体の配置とは別に、最後の行だけ右寄せや中央寄せにしたい場合に便利です。以下のコードでは、div要素にtext-align-last: right;を設定し、テキストの最終行を右寄せに表示しています。 サンプルコード <!DOCTYPE html> <html>    <head>       <style>         &n

  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プロパテ