cman.jp > WEBページ作成TOP > CSSリファレンス > 「マルチカラムの区切り線」
WEBページ作成
広告
column-rule,column-rule-color,column-rule-style,column-rule-width 「マルチカラムのカラムの区切り線」
マルチカラムのカラムの区切り線の色、種類、太さを指定します。
- 「column-rule」は、マルチカラムのカラムの区切り線の色、種類、太さをまとめて指定します。省略した値は、それぞれの初期値が設定されます。
- 「column-rule-color」は、マルチカラムのカラムの区切り線の色を指定します。
- 「column-rule-style」は、マルチカラムのカラムの区切り線の種類を指定します。
- 「column-rule-width」は、マルチカラムのカラムの区切り線の太さを指定します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | マルチカラム指定の 要素 | しない |
広告
column-rule,column-rule-color,column-rule-style,column-rule-width の指定方法
| 構文 | |
|---|---|
|
column-rule : column-rule-color || column-rule-style || column-rule-width; column-rule-color : [color]; column-rule-style : [style]; column-rule-width : [width]; |
|
| プロパティ/設定値 | 意味 |
| column-rule: column-rule-color column-rule-style column-rule-width; |
マルチカラムのカラムの区切り線の色、種類、太さをスペースで区切って、任意の順で１～３個指定可能。 種類は、必須指定です。指定がない場合、区切り線は表示されません。 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
| column-rule-color: 区切り線の色; |
色をコードやネームで指定。 「色の見本」参照。 見本以外の色は、「色を作成」で、作成。 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
| column-rule-style: 区切り線の種類; |
設定値は、border「罫線の設定」のstyle [スタイルの指定]を参照 column-rule-styleの指定がない場合、区切り線は表示されません。 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
| column-rule-width: 区切り線の太さ; | 設定値は、border「罫線の設定」のwidth [太さの指定]を参照 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
※ 未対応のブラウザの場合、ベンダープレフィックスが必要です。
column-rule,column-rule-color,column-rule-style,column-rule-width のサンプル
<style type="text/css">
.css-column-rule{
columns : 3;
column-rule : red solid thick;
}
.css-rule-color-style-width{
columns : 3;
column-rule-color : red;
column-rule-style : solid;
column-rule-width : thick;
}
</style>
<!-- html -->
<b>◆column-rule : red solid thick;</b>
<div class="css-column-rule">column-ruleに区切り線の色、種類、太さをまとめて。column-ruleに区切り線の色、種類、太さをまとめて。column-ruleに区切り線の色、種類、太さをまとめて。column-ruleに区切り線の色、種類、太さをまとめて。column-ruleに区切り線の色、種類、太さをまとめて。</div>
<b>◆column-rule-color : red;</b>
<b>◆column-rule-style : solid;</b>
<b>◆column-rule-width : thick;</b>
<div class="css-rule-color-style-width">column-rule-color、column-rule-style、column-rule-widthをそれぞれ指定。column-rule-color、column-rule-style、column-rule-widthをそれぞれ指定。column-rule-color、column-rule-style、column-rule-widthをそれぞれ指定。column-rule-color、column-rule-style、column-rule-widthをそれぞれ指定。column-rule-color、column-rule-style、column-rule-widthをそれぞれ指定。</div>
◆column-rule: red solid thick;
column-ruleに区切り線の色、種類、太さをまとめて。column-ruleに区切り線の色、種類、太さをまとめて。column-ruleに区切り線の色、種類、太さをまとめて。column-ruleに区切り線の色、種類、太さをまとめて。column-ruleに区切り線の色、種類、太さをまとめて。
◆column-rule-color: red;
◆column-rule-style: solid;
◆column-rule-width: thick;
◆column-rule-style: solid;
◆column-rule-width: thick;
column-rule-color、column-rule-style、column-rule-widthをそれぞれ指定。column-rule-color、column-rule-style、column-rule-widthをそれぞれ指定。column-rule-color、column-rule-style、column-rule-widthをそれぞれ指定。column-rule-color、column-rule-style、column-rule-widthをそれぞれ指定。column-rule-color、column-rule-style、column-rule-widthをそれぞれ指定。
| 関連するCSS(STYLE) | |
|---|---|
| column-count | マルチカラムのカラムの数 |
| column-fill | マルチカラムのカラムのバランス |
| column-gap | マルチカラムのカラムの間隔 |
| columns | マルチカラムのカラムの数と横幅 |
| column-rule-color | マルチカラムの区切り線の色 |
| column-rule-style | マルチカラムの区切り線のスタイル |
| column-rule-width | マルチカラムの区切り線の太さ |
| column-span | マルチカラムのカラムをまたがって表示 |
| column-width | マルチカラムのカラムの横幅 |
広告