column-rule

概要

多段レイアウトにおいてcolumn-rule CSS プロパティは、各段 (コラム) の間に描画される直線または "罫線" を指定します。column-rule を使用すれば、個々の column-rule-* プロパティで分けて設定しなくても、これ一つで足ります:
column-rule-width, column-rule-style および column-rule-color

  • 初期値 以下の各ロングハンドプロパティの初期値が使用されます:
    • column-rule-width: medium
    • column-rule-style: none
    • column-rule-color: currentColor
  • 適用対象 multicol elements
  • 継承 継承しない
  • メディア visual
  • 計算値 as each of the properties of the shorthand:
    • column-rule-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
    • column-rule-style: 指定値
    • column-rule-width: an absolute length; 0 if the column rule style is none or hidden
  • アニメーションの可否 以下の各プロパティのショートハンドとして補完します:
    • column-rule-color: 可。color の値として補完します。
    • column-rule-style: 不可
    • column-rule-width: 可。length の値として補完します。
  • 正規順序 order of appearance in the formal grammar of the values

構文

column-rule:  <column-rule-width> || <column-rule-style> || <column-rule-color>

任意の順番で 1 個~ 3 個の値を受け取ります:

<column-rule-width>
任意。次のキーワードのいずれか一つになります: <length> | thin | medium | thick
指定しない場合は、デフォルト値の medium が使用されます。詳しくは、border-width を参照してください。
<column-rule-style>
必須。指定しない場合は、デフォルト値の none が使用されます。指定可能な値と詳細については border-style を参照してください。
<column-rule-color>
任意<color> の値参照。指定しない場合は、デフォルト値が使用されます: currentcolor、要素の color プロパティの値 (前面のカラー)。

p.foo { column-rule: dotted; }          /* "medium dotted currentColor" と同じ */
p.bar { column-rule: solid blue; }      /* "medium solid blue" と同じ */
p.baz { column-rule: solid 8px; }       /* "8px solid currentColor" と同じ */
p.abc { column-rule: thick inset blue; }

実際の描画

padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;

仕様

仕様書 策定状況 コメント
CSS Multi-column Layout Module 勧告候補  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有)-webkit 3.5 (1.9.1)-moz 10 11.1 3.0 (522)-webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? (有) ? ? ?

関連情報

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank, Marsf
最終更新者: ethertank,
サイドバーを隠す