column-rule-style …… カラムの区切り線のスタイルを指定する
広告
column-rule-styleプロパティは、カラムの区切り線のスタイルを指定する際に使用します。
尚、区切り線のスタイルは、基本的にはborder-styleプロパティのスタイルと同じですが、
insetはridgeのように、outsetはgrooveのように表示されます。
noneを指定するとcolumn-rule-widthプロパティの値が強制的に0になります。
- none
- ボーダーは表示されず、太さは0となる。表のセルなどのボーダーが重なり合う場合は他の値が優先される(初期値)
- hidden
- ボーダーは表示されず、太さも0になる。表のセルなどのボーダーが重なり合う場合はhiddenの値が優先される
- solid
- 1本線で表示される
- double
- 2本線で表示される
- groove
- 立体的に窪んだ線で表示される
- ridge
- 立体的に隆起した線で表示される
- inset
- ridgeと同じ
- outset
- grooveと同じ
- dashed
- 破線で表示される
- dotted
- 点線で表示される
- 初期値
- none
- 適用対象
- マルチカラムコンテナ(マルチカラムレイアウトを指定した要素)
- 値の継承
- しない
div.sample {
width: 300px;
column-count: 3;
column-rule-style: dotted;
column-rule-width: 5px;
column-rule-color: yellowgreen;
}
<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>
↓↓↓
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。
ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」
忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。
広告