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

JavaScriptで段組みの罫線（column-rule）のスタイルを設定する方法

CSS の column-rule-style プロパティに対応する JavaScript の columnRuleStyle プロパティを使うと、段組み（マルチカラム）レイアウトにおいて、各段（カラム）の間に引かれる罫線のスタイルを動的に変更できます。

columnRuleStyleプロパティとは

複数の段に分けられたテキストの間には、column-rule 関連のプロパティで罫線を表示できます。JavaScript から element.style.columnRuleStyle に「solid」「dotted」「dashed」「double」「groove」「ridge」「inset」「outset」などの値を設定することで、罫線の見た目を自由に切り替えられます。

以下のサンプルコードでは、ボタンをクリックすると JavaScript によって段間の罫線スタイルが「inset」に変更されます。実際に試して動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            column-count: 4;
            column-rule: 4px dotted yellow;
         }
      </style>
   </head>
   <body>
      <p>下のボタンをクリックすると罫線のスタイルが変わります</p>
      <button onclick="display()">段間のスタイルを変更する</button>
      <div id="myID">
         これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
      </div>
      <script>
         function display() {
            document.getElementById("myID").style.columnRuleStyle = "inset";
         }
      </script>
   </body>
</html>

コードの解説

このサンプルのポイントは以下の通りです。

  • column-count: 4; … テキストを4つの段に分割して表示します。
  • column-rule: 4px dotted yellow; … 初期状態として、幅4pxの黄色い点線の罫線を段間に表示します。
  • style.columnRuleStyle = "inset"; … ボタンのクリックイベントで呼び出される display() 関数内で、罫線のスタイルを「inset」（へこんだように見える立体枠線）に変更しています。

なお、罫線の色は columnRuleColor、太さは columnRuleWidth プロパティでも個別に制御できるため、これらを組み合わせればより柔軟な段組みデザインが実現できます。

  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 … 立体的な装飾