menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 5-) 【実践でjQuery入門】jQueryで日時を表示
  6. ( 7↑) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( -↑) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. ( 8↓) 【HTML5】HTML5・ページ作成の基本

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

  • CSS

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.


関連リンク

CSS3リファレンス

  • カテゴリー:CSS