「CSS3入門」column-ruleのサンプル

2021年2月3日

書式
column-rule は一括指定を行う CSS のプロパティで、段組みレイアウトで段間に引かれる線の太さ、スタイル、色を設定します。
使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test sample</title> 
<style> 
.newspaper
{
      -moz-column-count:3; /* Firefox */
      -webkit-column-count:3; /* Safari and Chrome */
      column-count:3;

      -moz-column-gap:40px; /* Firefox */
      -webkit-column-gap:40px; /* Safari and Chrome */
      column-gap:40px;

      -moz-column-rule:4px outset #ff00ff; /* Firefox */
      -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
      column-rule:4px outset #ff00ff;
}
</style>
</head>
<body>
<p><b>111:</b>222</p>
<div class="newspaper">
AA
BB
CC
DD
EE
</div>
</body>
</html>

CSS

Posted by arkgame

関連記事: