Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

Your Search Results



    多段レイアウトにおいて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 個の値を受け取ります:

    任意。次のキーワードのいずれか一つになります: <length> | thin | medium | thick
    指定しない場合は、デフォルト値の medium が使用されます。詳しくは、border-width を参照してください。
    必須。指定しない場合は、デフォルト値の none が使用されます。指定可能な値と詳細については border-style を参照してください。
    任意<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
    基本サポート ? (有) ? ? ?



    Contributors to this page: sosleepy, ethertank, Marsf
    最終更新者: ethertank,