CSS3 複数列

CSS3 複数列プロパティ

この章では、次の CSS3 複数列プロパティ

  • column-count

  • column-gap

  • column-rule- を学習します。スタイル

  • 列ルールの幅

  • 列ルールの色

  • 列ルール

  • 列のスパン

  • 列の幅


CSS3 複数の列を作成する

column - count 属性は、分割する列の数を指定します。

次の例は、<div> 要素内のテキストを 3 つの列に分割します:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        .newspaper
        {
            -moz-column-count:3; /* Firefox */
            -webkit-column-count:3; /* Safari and Chrome */
            column-count:3;
        }
    </style>
</head>
<body>
<div class="newspaper">
    “当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”
</div>
</body>
</html>

プログラムを実行して試してみる


CSS3 の複数の列の列間のギャップ

column-gap 属性は、列間のギャップを指定します。次の例は、列間の40ピクセルのギャップを指定しています:

xampleを試してみるプログラムを実行します

css3列ボーダー


column-ruleスタイル属性はです列間の指定された境界線スタイル:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</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;
        }
    </style>
</head>
<body>
<div class="newspaper">
    累,就是常常徘徊在坚持和放弃之间,举棋不定。累了,就休息一下;烦了,就放松一下。谁也无法去替代你的忧虑,正如无法分享你的幸福;谁也无法取舍你的选择,正如无法左右你的脚步。一切随意就好,希望了会失望。淡淡的来,淡淡的去,淡淡的相处,给人以宁静,予己以清幽
</div>
</body>
</html>

プログラムを実行して試してみる

column-rule-width プロパティは 2 つの列の境界線の太さを指定します:


Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</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>
<div class="newspaper">
    累,就是常常徘徊在坚持和放弃之间,举棋不定。累了,就休息一下;烦了,就放松一下。谁也无法去替代你的忧虑,正如无法分享你的幸福;谁也无法取舍你的选择,正如无法左右你的脚步。一切随意就好,希望了会失望。淡淡的来,淡淡的去,淡淡的相处,给人以宁静,予己以清幽</div>
</body>
</html>

プログラムを実行して試してみましょう

column-rule-colorプロパティは、2つの列の境界線の色を指定します:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.newspaper
{
column-count:3;
column-gap:40px;
column-rule-style:outset;
column-rule-width:10px;
/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:outset;
-moz-column-rule-width:10px;
/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:outset;
-webkit-column-rule-width:1px;
}
</style>
</head>
<body>
<div class="newspaper">
当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。
</div>
</body>
</html>

プログラムを実行して試してください


column-rule 属性は、column-rule-* のすべての属性の略称です。

次の例では、列の境界線の太さ、スタイル、色を直接設定します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.newspaper
{
column-count:3;
column-gap:40px;
column-rule-style:outset;
column-rule-color:#ff0000;
/* Firefox */
-moz-column-count:3;
-moz-column-gap:40px;
-moz-column-rule-style:outset;
-moz-column-rule-color:#ff0000;
/* Safari and Chrome */
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule-style:outset;
-webkit-column-rule-color:#ff0000;
}
</style>
</head>
<body>
<div class="newspaper">
当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。
</div>
</body>
</html>

プログラムを実行して試してください


要素がまたがる列の数を指定します

次の例では <h2> を指定します。要素はすべての列にまたがります:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>
<div class="newspaper">
当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。
</div>
</body>
</html>

プログラムを実行して試してください


列の幅を指定します

コラム-width 属性は列の幅を指定します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
.newspaper
{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
}
h2
{
column-span:all;
-webkit-column-span:all; /* Safari and Chrome */
}
</style>
</head>
<body>
<div class="newspaper">
<h2>英国维斯米斯特教堂碑文</h2>
当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。
</div>
</body>
</html>

プログラムを実行して試してみましょう


CSS3 の複数列プロパティ

次の表は、すべての CSS3 複数列プロパティのリストです

プロパティ説明
column-count は、要素を分割する列の数を指定します。
column-fill列の塗り方を指定
column-gap列間のギャップを指定
column-ruleすべてのcolumn-rule-*属性の略語
column-rule-color 2 つの列間の境界線の色を指定します
column-rule-style 2 つの列間の境界線のスタイルを指定します
column-rule-width 2 つの列の間の境界線
column-span要素がまたがる列数を指定します
column-width列の幅を指定します
columnsの略語を設定します列幅と列数



学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</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; } </style> </head> <body> <div class="newspaper"> 累,就是常常徘徊在坚持和放弃之间,举棋不定。累了,就休息一下;烦了,就放松一下。谁也无法去替代你的忧虑,正如无法分享你的幸福;谁也无法取舍你的选择,正如无法左右你的脚步。一切随意就好,希望了会失望。淡淡的来,淡淡的去,淡淡的相处,给人以宁静,予己以清幽 </div> </body> </html>
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!