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

CSS3マルチカラムレイアウト入門：column-rule-colorプロパティで段組み罫線の色を指定する方法

CSS3のマルチカラム（段組み）レイアウトでは、column-rule-colorプロパティを使うことで、カラム間に引かれる罫線（区切り線）の色を自由に指定できます。この記事では、実際のコード例とともに、column-rule-colorプロパティの基本的な使い方をわかりやすく解説します。

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

column-rule-colorは、段組みレイアウトにおける各カラムの間に表示される罫線の色を設定するためのプロパティです。色の値には、16進数カラーコード（例：#ff00ff）、RGB値、RGBA値、またはredやblueなどのカラー名を使用できます。

なお、罫線の色を指定しても、column-rule-styleでスタイルが設定されていない場合や、noneが指定されている場合は罫線自体が表示されない点に注意しましょう。

実装コード例

以下のコードでは、4段組みのレイアウトを作成し、カラム間の罫線を実線・マゼンタ色（#ff00ff）で表示しています。ブラウザごとの互換性を考慮し、-webkit-および-moz-のベンダープレフィックスも併せて記述しています。

<html>
   <head>
      <style>
         .multi {
            /* カラム数を指定 */
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;

            /* カラム間の余白を指定 */
            -webkit-column-gap: 40px;
            -moz-column-gap: 40px;
            column-gap: 40px;

            /* 罫線のスタイルと色を指定 */
            column-rule-style: solid;
            column-rule-color: #ff00ff;
         }
      </style>
   </head>
   <body>
      <div class = "multi">
         Tutorials Point originated from the idea that there exists a class of readers who respond
         better to online content and prefer to learn new skills at their own pace from the comforts
         of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and
         elated by the response it generated, we worked our way to adding fresh tutorials to our
         repository which now proudly flaunts a wealth of tutorials and allied articles on topics
         ranging from programming languages to web designing to academics and much more.
      </div>
   </body>
</html>

コードのポイント解説

  • column-count: 4;
    テキストを4つのカラムに分割して表示します。
  • column-gap: 40px;
    各カラム間の間隔を40ピクセルに設定します。
  • column-rule-style: solid;
    罫線のスタイルを実線に指定します。dotted（点線）やdashed（破線）なども選択可能です。
  • column-rule-color: #ff00ff;
    罫線の色をマゼンタ（#ff00ff）に指定します。ここが今回の主役となるプロパティです。

表示結果

上記のコードをブラウザで実行すると、テキストが4つのカラムに分かれて表示され、その間にマゼンタ色の実線の罫線が引かれます。

CSS3マルチカラムレイアウト入門：column-rule-colorプロパティで段組み罫線の色を指定する方法

まとめ

column-rule-colorプロパティを使えば、段組みレイアウトの罫線の色を簡単にカスタマイズできます。新聞や雑誌のようなデザインをWebページで再現したい場合に非常に便利なプロパティなので、column-countやcolumn-gap、column-rule-styleと組み合わせて、ぜひ活用してみてください。

  1. CSS3のtransitionショートハンド（短縮）プロパティの使い方

    CSSのtransitionショートハンド（短縮）プロパティを使うと、transition-property（遷移対象のプロパティ）、transition-duration（遷移にかかる時間）、transition-timing-function（変化の速度カーブ）、transition-delay（遅延時間）という4つの個別プロパティを、たった1行にまとめて指定することができます。値は「プロパティ名 → 時間 → タイミング関数 → 遅延」の順にスペース区切りで記述します。複数のプロパティを同時にアニメーションさせたい場合は、それぞれの指定をカンマ（,）で区切って並べます。記述例以下は、tr

  2. HTML DOMのcolSpanプロパティとは？使い方をサンプルコード付きで解説

    colSpanプロパティとは HTML DOMのcolSpanプロパティは、<td>要素（テーブルのセル）に設定されるcolspan属性に対応したプロパティです。JavaScriptからこのプロパティを操作することで、セルのcolspan属性値を取得したり、動的に変更したりすることが可能になります。 colspan属性は、1つのセルが横方向にまたがる列の数を指定するために使用されます。例えば「colspan=2」と設定すれば、そのセルは2列分の幅を持つことになり、テーブルのレイアウトを柔軟に制御できます。 構文 colSpanプロパティの基本構文は以下のとおりです。 tableda