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 | の略語を設定します列幅と列数 |