「CSS3」Chrome,Firefox,Safari, Operaでcolumn-rule-widthのサンプル

2021年2月3日

説明
column-rule-width は CSS のプロパティで、段組みレイアウトで段間に引かれる線の太さを設定します。
構文
/* キーワード値 */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* <length> 値 */
column-rule-width: 1px;
column-rule-width: 2.5em;

/* グローバル値 */
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: unset;
使用例

<!DOCTYPE html>

<html>

<head>

<title>this is a sample</title>

<style>

.newspaper {

/* Chrome, Safari, Opera */

-webkit-column-count: 3;

-webkit-column-gap: 40px;

-webkit-column-rule-style: outset;

-webkit-column-rule-width: 1px;

/* Firefox */

-moz-column-count: 3;

-moz-column-gap: 40px;

-moz-column-rule-style: outset;

-moz-column-rule-width: 1px;

column-count: 3;

column-gap: 40px;

column-rule-style: outset;

column-rule-width: 1px;

}

</style>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>this is a sample</title> <style> .newspaper { /* Chrome, Safari, Opera */ -webkit-column-count: 3; -webkit-column-gap: 40px; -webkit-column-rule-style: outset; -webkit-column-rule-width: 1px; /* Firefox */ -moz-column-count: 3; -moz-column-gap: 40px; -moz-column-rule-style: outset; -moz-column-rule-width: 1px; column-count: 3; column-gap: 40px; column-rule-style: outset; column-rule-width: 1px; } </style> </head> <body> <p><b>111:</b> 2222</p> <div class="newspaper"> AA BB CC DD EE </div> </body> </html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>this is a sample</title> 
<style> 
.newspaper {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 40px;
    -webkit-column-rule-style: outset;
    -webkit-column-rule-width: 1px;

    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 40px;
    -moz-column-rule-style: outset;
    -moz-column-rule-width: 1px;

    column-count: 3;
    column-gap: 40px;
    column-rule-style: outset;
    column-rule-width: 1px;
}
</style>
</head>
<body>

<p><b>111:</b> 2222</p>

<div class="newspaper">
AA
BB
CC
DD
EE
</div>

</body>
</html>

CSS

Posted by arkgame

関連投稿: