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
こんにちは(・∀・)
CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはcolumn-ruleです。
概要
column-ruleプロパティはcolumn-rule-widthプロパティ、column-rule-styleプロパティ、column-rule-colorプロパティの値を一括で指定できるプロパティです。半角スペースで区切って順不同で指定する事ができます。省略された値はそのプロパティの初期値に設定されます。
.sample {
column-rule: 2px solid blue;
}
適用要素
段組されている要素
指定できる値
column-rule-widthプロパティで指定できる値
column-rule-styleプロパティで指定できる値
column-rule-colorプロパティで指定できる値
初期値
個別プロパティの初期値
サンプル
HTML
<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies, nisi eu semper congue, dui ante varius nunc, in tempus ex lorem sed urna. Sed placerat pretium nibh, ac vulputate risus posuere eget. Donec felis lacus, elementum non augue ac, tincidunt placerat erat. Aenean posuere arcu nec est sodales convallis. Aliquam in purus vel metus tincidunt euismod sed eu quam. Etiam quis elit vel sapien varius tincidunt. Morbi accumsan posuere purus ultricies euismod. Nulla dictum eget enim luctus dictum. Praesent porta tellus erat, vitae tincidunt orci ornare a. Donec semper blandit turpis sed gravida. Pellentesque dapibus luctus dolor, sit amet tempor mauris condimentum quis. Suspendisse ac condimentum ipsum. Vivamus vitae magna tortor. Mauris nec lobortis dui.
</p>
CSS
.demo {
column-count: 2;
column-rule: 2px solid #d49fc2;
}
サンプルのCSSはVendor-Prefixを使用した例も載せてあります。
Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies, nisi eu semper congue, dui ante varius nunc, in tempus ex lorem sed urna. Sed placerat pretium nibh, ac vulputate risus posuere eget. Donec felis lacus, elementum non augue ac, tincidunt placerat erat. Aenean posuere arcu nec est sodales convallis. Aliquam in purus vel metus tincidunt euismod sed eu quam. Etiam quis elit vel sapien varius tincidunt. Morbi accumsan posuere purus ultricies euismod. Nulla dictum eget enim luctus dictum. Praesent porta tellus erat, vitae tincidunt orci ornare a. Donec semper blandit turpis sed gravida. Pellentesque dapibus luctus dolor, sit amet tempor mauris condimentum quis. Suspendisse ac condimentum ipsum. Vivamus vitae magna tortor. Mauris nec lobortis dui.