トップページ  > CSS  > column-rule-width

★CSSリファレンス

column-rule-width …… カラムの区切り線の幅を指定する
Internet Explorer Google Chrome Safari Firefox Opera
広告

column-rule-widthプロパティは、カラムの区切り線の幅を指定する際に使用します。 カラムの区切り線の幅負の値を指定することはできません。

尚、区切り線は太さや色だけを指定しても表示されないので注意してください。 これは、column-rule-styleプロパティの初期値がnoneとなっているためです。 区切り線を表示させるには、太さや色だけでなく種類も同時に指定してやる必要があります。

■値

数値+単位
数値にpxやemやexなどの単位をつけて指定
thin
細い区切り線
medium
中くらいの区切り線(初期値)
thick
太い区切り線

■初期値・適用対象・値の継承

初期値
medium
適用対象
マルチカラムコンテナ(マルチカラムレイアウトを指定した要素)
値の継承
しない

■使用例

CSSソースは外部ファイル(sample.css)に記述

div.sample {
width: 300px;
column-count: 3;
column-rule-style: dotted;
column-rule-width: 5px;
column-rule-color: yellowgreen;
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<div class="sample">
<p>
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。
</p>
<p>
ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
</p>
<p>
半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」
</p>
<p>
忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。
</p>
</div>
</body>
</html>
↓↓↓

ブラウザ上の表示

池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。

ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。

半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」

忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。

■関連項目

カラムの数と幅
columns …… カラム幅とカラム数を指定する
column-width …… カラム幅を指定する
column-count …… カラム数を指定する
カラムの間隔と区切り線
column-gap …… カラムの間隔を指定する
column-rule …… カラムの区切り線のスタイル・幅・色を指定する
column-rule-color …… カラムの区切り線の色を指定する
column-rule-style …… カラムの区切り線のスタイルを指定する
column-rule-width …… カラムの区切り線の幅を指定する
カラムへの要素の配置
column-span …… 要素がまたがる(横切る)カラム数を指定する
column-fill …… カラム同士の高さ(長さ)を揃えるかどうかを指定する
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ