12月更新・前月(11月)の人気記事トップ10 12/07/2023
- ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- (圏外↑) 【jQuery】入門11. switch文による条件分岐
- (圏外↑) 【Mac】Safariでソースコードを見る方法
- ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
- (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
【CSS3リファレンス】column-rule-style
こんにちは(・∀・)
CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはcolumn-rule-styleです。
概要
column-rule-styleプロパティを使用して段組の境界線の種類を指定する事ができます。線の種類はボーダーと同じ物が指定できます。ただし、insetはridgeに、outsetはgrooveのように表示されます。
.sample {
column-rule-style: solid;
}
適用要素
段組されている要素
指定できる値
- solid
- double
- dotted
- dashed
- groove
- ridge
- inset
- outset
- hidden
- none
- ボーダーに指定できる線種と同じ値が指定できます。noneを指定すると線の太さの値は0になります。
初期値
none
サンプル
HTML
<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec sem at neque condimentum malesuada non ut nunc. Ut mauris urna, finibus a mauris pulvinar, ornare efficitur elit. Donec in magna sit amet lectus lacinia rhoncus a non quam. Duis ligula velit, vulputate non nisi nec, tempus ornare mi. Aliquam vitae sem sodales, semper diam et, fringilla diam. Vivamus lacinia finibus metus, et euismod leo. Fusce ut leo mollis, egestas augue vel, maximus massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Duis in tellus orci. Cras quis leo eu magna interdum cursus vitae et erat. Phasellus aliquet hendrerit accumsan.
</p>
CSS
.demo {
-webkit-column-count: 2;
-webkit-column-rule-color: #d49fc2;
-webkit-column-rule-style: solid;
-webkit-column-rule-width: 2px;
column-count: 2;
column-rule-color: #d49fc2;
column-rule-style: solid;
column-rule-width: 2px;
}
サンプルのCSSはVendor-Prefixを使用した例も載せてあります。
Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec sem at neque condimentum malesuada non ut nunc. Ut mauris urna, finibus a mauris pulvinar, ornare efficitur elit. Donec in magna sit amet lectus lacinia rhoncus a non quam. Duis ligula velit, vulputate non nisi nec, tempus ornare mi. Aliquam vitae sem sodales, semper diam et, fringilla diam. Vivamus lacinia finibus metus, et euismod leo. Fusce ut leo mollis, egestas augue vel, maximus massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Duis in tellus orci. Cras quis leo eu magna interdum cursus vitae et erat. Phasellus aliquet hendrerit accumsan.