項 目 | 説 明 |
---|---|
記述形式 | セレクタ {column-rule-style: 値 } |
値 の形式 | none,hidden,solid,double,groove,ridge,inset,outset,dashed,dotted |
初 期 値 | none |
対応ブラウザー | C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa5+ |
適用可能な要素 | 段組を指定した要素 |
継 承 | しない |
column-rule-style プロパティ は,段組の 区切り線のスタイル を指定します。
値を指定する際には,次のようなキーワードが使用可能です。
値 | 説 明 |
---|---|
none | 区切り線なしにします。 |
hidden | 区切り線を非表示にします。 |
solid | 実線を表示します。 |
dashed | 破線を表示します。 |
dotted | 点線を表示します。 |
double | 2重線を表示します。 |
groove | 溝のように立体的にへこんで見える線を表示します。 |
ridge | 隆起して立体的に飛び出して見える線を表示します。 |
inset | 囲まれた内部が立体的にへこんで見える線を表示します。 |
outset | 囲まれた内部が立体的に飛び出して見える線を表示します。 |
備 考 | dashed(破線) や dotted(点線) の場合,長さ や 間隔 を調整する方法は提供されていません。 |
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.mc36 { width: 40em; height: 9.2em; column-count: 3; column-rule-style: dotted; column-rule-width: 2px; column-rule-color: lime; border: solid blue 3px; } --> </style> |
HTML <body> ~ </body> |
<div>column-rule-style: dotted; の場合</div>
<div class="mc36">
<p>他のプロパティの値に基づき段数を決めます。 (初期値)
<br>たとえば,column-width が auto 以外の値の場合には,
それに基づいて段数を決定します。</p>
<p>段組の段数 を 1 以上の整数で指定します。
もし,column-count と column-width がともに auto 以外の値の場合,
ここで指定した段数は 上限値 の意味になり,実際の段数は
column-width により決まる場合もあります。</p>
</div> |
ブラウザー 表示例 |
---|
column-rule-style: dotted; の場合
他のプロパティの値に基づき段数を決めます。 (初期値)
段組の段数 を 1 以上の整数で指定します。 もし,column-count と column-width がともに auto 以外の値の場合, ここで指定した段数は 上限値 の意味になり,実際の段数は column-width により決まる場合もあります。 |