マルチカラムの区切り線の太さを指定するには？
要素書式
- column-rule-width:【区切り線の太さ】;
対応ブラウザ
- IE 9：×
- Firefox 10.0：○（-moz-column-rule-width）
- Opera 11.6：○
- Chrome 16.0：○（-webkit-column-rule-width）
- Safari 5.1：○（-webkit-column-rule-width）
※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。
値一覧
| 値 | 内容 |
| 区切り線の太さ | 区切り線の太さを指定します。
指定できる値は次の通りです。
「thin」：細い線で表示されます（ブラウザに依存します）。
「medium」：中の太さの線で表示されます（ブラウザに依存します）。
「thick」：太い線で表示されます（ブラウザに依存します）。
「太さ」：指定する太さで表示されます（負の値は指定できません）。
なお、「column-rule-width」プロパティの初期値は「medium」となります。 |
解説文
従来、Webページで段組（マルチカラム）のレイアウトを実現するには、tableタグやfloatプロパティを使用する必要がありました。
CSS3では、段組を指定するための専用のプロパティが用意されています。
column-rule-widthプロパティは、マルチカラムの区切り線の幅を指定することができます。
なお、column-rule-widthプロパティを利用する際、区切り線の種類を指定するcolumn-rule-styleの値が「none」と「hidden」以外の値に設定する必要があります。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
#sample{
width: 600px;
-moz-column-count: 2;
-webkit-column-count: 2;
-ms-column-count: 2;
column-count: 2;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
-ms-column-gap: 1em;
column-gap: 1em;
-moz-column-rule-style: double;
-webkit-column-rule-style: double;
-ms-column-rule-style: double;
column-rule-style: double;
-moz-column-rule-width: 8px;
-webkit-column-rule-width: 8px;
-ms-column-rule-width: 8px;
column-rule-width: 8px;
}
</style>
</head>
<body>
<div id="sample">
<p>彼は歩きながら、自分がどうして宇宙飛行士になりたかったのかを考え始めた。
それは、人類が初めて月に到達した日から、いつか自分も宇宙から地球を見てみたいと思っていたからであった。</p>
<p>今までもそのための努力はしてきた。そのつもりだったが、実際のところは行き詰まり感が彼の感情を支配していた。
そんな彼に忘れかけていた宇宙への憧れを思い出させたのが、彼女のあの言葉だったのだ。</p>
</div>
</body>
</html>
関連項目
