「CSS3」column-rule-style プロパティのサンプル
説明
CSS の column-rule-style プロパティは、段組みレイアウトで段の間に引かれる線 (段間罫) のスタイルを設定します。
構文
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;
使用例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>column-rule-style sample</title>
<style>
.newspaper
{
column-count:3;
column-gap:40px;
column-rule-style:dotted;
/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:dotted;
/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:dotted;
}
</style>
</head>
<body>
<p><b>11:</b> 222</p>
<div class="newspaper">
AA
BB
CC
DD
EE
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>column-rule-style sample</title>
<style>
.newspaper
{
column-count:3;
column-gap:40px;
column-rule-style:dotted;
/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:dotted;
/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:dotted;
}
</style>
</head>
<body>
<p><b>11:</b> 222</p>
<div class="newspaper">
AA
BB
CC
DD
EE
</div>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>column-rule-style sample</title> <style> .newspaper { column-count:3; column-gap:40px; column-rule-style:dotted; /* Firefox */ -moz-column-count:3; -moz-column-gap:40px; -moz-column-rule-style:dotted; /* Safari and Chrome */ -webkit-column-count:3; -webkit-column-gap:40px; -webkit-column-rule-style:dotted; } </style> </head> <body> <p><b>11:</b> 222</p> <div class="newspaper"> AA BB CC DD EE </div> </body> </html>