menu
menu

キーワード検索

 

10月更新・前月(9月)の人気記事トップ10 - 10/02/2020

  1. ( 1 − ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 7 ↑) 【iPhone iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
  3. ( 10↑) 【2020年度決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️
  4. ( 6 ↑) 【CSS】CSSだけでドロップダウンメニュー
  5. ( 7 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. ( 5 ↓) 【Mac】Safariでソースコードを見る方法
  7. ( 3 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  8. ( 8 − ) 【jQuery】入門2. jQueryをHTMLに組み込む
  9. ( 圏外↑) 【制作Tips】iPhone画面解像度まとめ
  10. ( 圏外↑) 【jQuery】入門5. jQueryで日時を表示
このエントリーをはてなブックマークに追加

column-rule-color【CSS3リファレンス】

column-rule-color【CSS3リファレンス】

こんにちは(・∀・)

CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはcolumn-rule-colorです。

概要

column-gapプロパティで段組の間には境界線を表示させる事ができます。その線の色をcolumn-rule-colorプロパティで指定する事ができます。


.sample {
  column-rule-color: blue;
}
適用要素

段組されている要素

指定できる値
CSSの書式による色の指定
初期値

ブラウザによる

サンプル
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.

 

にほんブログ村 デザインブログ Webデザインへ
  • CSS3
このエントリーをはてなブックマークに追加