CSS3: column-rule-width プロパティ - 段組の区切り線の幅の指定

■ 概要

項　　目説　　明
記述形式 セレクタ {column-rule-width: 値 }
値 の形式 thin，medium，thick | 数値（長さ，％）
初 期 値 medium
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa5+
適用可能な要素 段組を指定した要素
継　　承 しない

■ 解説

column-rule-width プロパティ は，段組の 区切り線の幅 を指定します。

"thin"，"medium"，"thick" のキーワードによる指定内容は，次の通りです。

値説　　明
thin 細い区切り線にします。
medium 中くらいの標準的な太さの区切り線にします。　（初期値）
thick 太い区切り線にします。

また，数値による指定は，次のような単位を付けて可能です。

単位説　　明
px
px とは画面の１画素（ピクセル） のサイズを１とする単位です。　実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
em
em とは現在使用中の標準フォントの高さを１とする単位です。　
ex
ex とは現在使用中の標準フォントの小文字の｢x｣の高さを１とする単位です。
％
親要素の widthプロパティ の値を基準にして割合を％値で指定します。

ただし，実際には，区切り線の太さにそれほど大きな値を指定することは少ないので，"px" を使う場合がほとんどです。

■ 使用例（ column-rule-width プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
   <!--
      div.mc37 {
         width: 40em;
         height: 9.2em;
         column-count: 3;
         column-rule-style: solid;
         column-rule-width: 2px;
         column-rule-color: lime;
         border: solid blue 3px;
      }
   -->
</style>
HTML
<body> ～ </body>		 
<div>column-rule-width: 2px; の場合</div>
<div class="mc37">
   <p>他のプロパティの値に基づき段数を決めます。　（初期値）
      <br>たとえば，column-width が auto 以外の値の場合には，
      それに基づいて段数を決定します。</p>
   <p>段組の段数 を 1 以上の整数で指定します。
      　もし，column-count と column-width がともに auto 以外の値の場合，
      ここで指定した段数は 上限値 の意味になり，実際の段数は
      column-width により決まる場合もあります。</p>
</div>

ブラウザー 表示例
column-rule-width: 2px; の場合

他のプロパティの値に基づき段数を決めます。　（初期値）
たとえば，column-width が auto 以外の値の場合には， それに基づいて段数を決定します。

段組の段数 を 1 以上の整数で指定します。 　もし，column-count と column-width がともに auto 以外の値の場合， ここで指定した段数は 上限値 の意味になり，実際の段数は column-width により決まる場合もあります。

■ 備考

【参考ページ】