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

JavaScriptで段組みの罫線（カラムルール）の色を設定する方法

JavaScriptで段組み（マルチカラム）レイアウトの列間に引かれる罫線の色を設定するには、columnRuleColorプロパティを使用します。CSSの column-rule-color プロパティに対応しており、色名・16進数カラーコード・RGB値などを指定することで、罫線の色を動的に変更できます。

サンプルコード

以下のコードでは、ボタンをクリックすると列間の罫線の色が黄色から赤色に変わります。実際にブラウザで実行して動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            column-count: 4;
            column-rule: 4px outset yellow;
         }
      </style>
   </head>
   <body>
      <p>下のボタンをクリックして罫線の色を変更してください</p>
      <button onclick="display()">列間の色を変更する</button>
      <div id="myID">
         これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。
      </div>
      <script>
         function display() {
            document.getElementById("myID").style.columnRuleColor = "red";
         }
      </script>
   </body>
</html>

コードのポイント

  • column-count：段組みの列数を指定します。ここでは4列に設定しています。
  • column-rule：罫線の太さ・スタイル・初期色を一括で指定します（例：4px outset yellow）。
  • columnRuleColor：JavaScriptから罫線の色だけを個別に変更します。上記の例では "red" を設定していますが、#ff0000 や rgb(255, 0, 0) のような指定も可能です。

なお、罫線そのものがまだ設定されていない要素に対して columnRuleColor のみを指定しても色は表示されません。必ず column-rule や column-rule-style で罫線のスタイルを先に定義しておきましょう。主要なモダンブラウザ（Chrome、Firefox、Safari、Edge）で問題なく動作します。

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

    CSSで段組み（マルチカラム）レイアウトを作成する際、各カラム（列）の間に表示される罫線（ルールライン）の太さを指定できるのが column-rule-width プロパティです。column-rule-widthプロパティとはcolumn-rule-width プロパティは、カラム間の罫線の幅を設定します。このプロパティを有効に機能させるには、column-rule-style プロパティで罫線のスタイル（実線、破線など）をあらかじめ指定しておく必要があります。スタイルが指定されていない場合や none の場合は、罫線の幅に関わらず罫線は表示されません。指定できる主な値は以下のとおりです。t

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

    マルチカラムレイアウトにおいて、列と列の間に表示される罫線（ルール）のスタイルを設定するには、CSSの column-rule-style プロパティを使用します。このプロパティを使うことで、破線や点線、実線など、さまざまなデザインの区切り線を簡単に実装できます。column-rule-styleで指定できる主な値none … 罫線を表示しない（初期値）hidden … 罫線を非表示にするdotted … 点線で表示するdashed … 破線で表示するsolid … 実線で表示するdouble … 二重線で表示するgroove / ridge / inset / outset … 立体的な装飾