ホームページ >ウェブフロントエンド >htmlチュートリアル >「CSS3 実践戦闘」ノート複数列layout_html/css_WEB-ITnose
「CSS3 実践戦闘」ノート複数列layout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:19:311179ブラウズ
書籍「CSS3 Practical Combat」を読んで勉強することによる要約
「CSS3 Practical Combat」/Cheng Lin. - 北京機械工業新聞 2011.5
複数列レイアウトは、新聞や新聞などの純粋なテキスト レイアウト デザインに適しています。雑誌の Web ページのレイアウト。Web ページの構造レイアウトには適していません。複数列レイアウト機能を柔軟に使用すると、テキストや画像を複数列に表示できるため、Web ページのスペースを大幅に節約できます。 Web ページ上のテキストが非常に長い場合は、複数列レイアウト機能が有効になることがあります。
互換性リファレンス: http://www.w3.org/TR/css3-multicol/
columns 属性 – 複数列レイアウトを定義します
columns は、border 属性と同様に、複数列レイアウト機能の基本属性です。境界線機能では、このプロパティは複数の列の数と各列の幅を同時に定義できます。基本的な構文は次のとおりです:
columns ： <column-width> || <column-count>
値の簡単な説明:
<column-width>:定义每列的宽度。<column-count>:定义列数。
column-width 属性: 列幅を定義します
column-count 属性: 列数を定義します
column-width:<length> | auto column-count:<integer> | auto
値の簡単な説明:
d82af2074b26fcfe177e947839b5d381: float ポイント番号とユニット識別子で構成される長さの値。負の値は指定できません。
auto: ブラウザの計算値に基づいて自動的に設定されます。
979e7f42ea08258251c39ffe96b911f2: 列内の列数を定義します。値は 0 より大きい整数です。 column-width プロパティと column-count プロパティに明示的な値が指定されていない場合、その値は最大列数になります。
column-gap 属性 – 列間隔を定義します
column-gap：normal | <length>
値の簡単な説明:
normal: ブラウザのデフォルト設定に従って解析されます (通常は 1em)。
d82af2074b26fcfe177e947839b5d381: 浮動小数点数とユニット識別子で構成される長さの値。負の値にすることはできません。
column-rule 属性 – 列境界線のスタイルを定義します
column-rule：<length> | <style> | <color> | <transparent>
値の簡単な説明:
d82af2074b26fcfe177e947839b5d381: 浮動小数点数と単位識別子で構成される長さの値。負にすることはできません。この機能は、column-rule-width 属性と同じです。
c9ccee2e6ea535a969eb3f532ad9fe89: 列の境界線のスタイルを定義します。この機能は、column-rule-style 属性と同じです。
b10fb37415d019cfffa8c4d7366c607f: 列の境界線の色を定義します。この機能は、column-rule-color 属性と同じです。
65bf3fd95b7aefc6eb20aac8ec496bce: 枠線を透明に表示するように設定します。
column-span 属性 – 列間の表示を定義します
column-span：1 | all
値の簡単な説明:
1: この列にのみ表示されます。
all: すべての列にまたがり、列の Z 軸の上に配置されます。
column-fill 属性 – 列の高さを定義します
column-fill ： auto | balance
簡単な値の説明:
auto: 各列の高さは、内容が変更されると自動的に変更されます。
バランス: 各列の高さは、コンテンツが最も多い列の高さに合わせて統一されます。
段組み印刷（略）
参考記事:
page-break-beforeとpage-break-afterでページ分割印刷を実現
CSSのpage-break-before属性
実践体験:
HTMLコード:
<body><h1>故都的秋（选段）</h1><h2>郁达夫</h2><p> 秋天，无论在什么地方的秋天，总是好的；可是啊，北国的秋，却特别 地来得清，来得静，来得悲凉。我的不远千里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这"秋"，这故都的秋味。 </p><p>江南，秋当然也是有的；但草木雕得慢，空气来得润，天的颜色显得淡，并且又时常多雨而少风；一个人夹在苏州上海杭州，或厦门香港广州的市民中间，浑沌沌地过去，只能感到一点点清凉，秋的味，秋的色，秋的意境与姿态，总看不饱，尝不透，赏玩不到十足。秋并不是名花，也并不是美酒，那一种半开，半醉的状态，在领略秋的过程上，是不合适的。 </p><p>不逢北国之秋，已将近十余年了。在南方每年到了秋天，总要想起陶然亭的芦花，钓鱼台的柳影，西山的虫唱，玉泉的夜月，潭柘寺的钟声。在北平即使不出门去罢，就是在皇城人海之中，租人家一椽破屋来住着，早晨起来，泡一碗浓茶，向院子一坐，你也能看到很高很高的碧绿的天色，听得到青天下驯鸽的飞声。从槐树叶底，朝东细数着一丝一丝漏下来的日光，或在破壁腰中，静对着像喇叭似的牵牛花（朝荣）的蓝朵，自然而然地也能够感觉到十分的秋意。说到了牵牛花，我以为以蓝色或白色者为佳，紫黑色次之，淡红色最下。最好，还要在牵牛花底，教长着几根疏疏落落的尖细且长的秋草，使作陪衬。 </p><p> 北国的槐树，也是一种能使人联想起秋来的点缀。象花而又不是花的那一种落蕊，早晨起来，会铺得满地。脚踏上去，声音也没有，气味也没有，只能感出一点点极微细极柔软的触觉。扫街的在树影下一阵扫后，灰土上留下来的一条条扫帚的丝纹，看起来既觉得细腻，又觉得清闲，潜意识下并且还觉得有点儿落寞，古人所说的梧桐一叶而天下知秋的遥想，大约也就在这些深沉的地方。 </p><p>秋蝉的衰弱的残声，更是北国的特产；因为北平处处全长着树，屋子又低，所以无论在什么地方，都听得见它的啼唱。在南方是非要上郊外或山上去才听得到的。这秋蝉的嘶叫，在北平和蟋蟀耗子一样，简直像是家家户户都养在家里的家虫。 </p><p> 还有秋雨哩，北方的秋雨，她似乎比南方的下得奇，下得有味，下得更像样。 </p></body>
基本CSS3コード
<style type="text/css" media="screen">h1 { color:#333333; background:#DCDCDC; padding:5px 8px; font-size:20px; text-align:center; padding:12px;}h2 { font-size:16px; text-align:center;}p { color:#333333; font-size:14px; line-height:180%; text-indent:2em;}</style> 複数列レイアウトのデモンストレーション効果は設定されていません:
実践体験1:記事の複数列表示のデザイン
基本CSS3コードを追加上:
body { -webkit-columns: 250px 3; columns: 250px 3;//设计网页文档分三栏显示，每栏宽度为250px} デモ効果:
実践体験 2: 固定幅の列レイアウトをデザインする
上記の基本的な CSS3 コードを追加:
body {/*定义网页列宽为300px,则网页中每个栏目的最大宽度为300px*/ -webkit-column-width:300px; -moz-column-width:300px; column-width:300px;} デモ効果:
実践体験 3: 固定幅の列レイアウトをデザインする幅列レイアウト
次に、上記の基本 CSS3 コードを追加します:
<style type="text/css" media="screen">body {/*设置文档内容为固定的三列*/ -webkit-column-count:3; -moz-column-count:3; column-count:3;} デモ効果:
実践体験 4: スムーズなドキュメント レイアウトをデザインする
次に、上記の基本 CSS3 コードを追加します:
body { -webkit-column-count:3; -moz-column-count:3; column-count:3;//定义页面内容显示为3列 -webkit-column-gap:3em; -moz-column-gap:3em; column-gap:3em;//定义列间距为3em，默认为1em line-height:2.5em;} デモンストレーション効果:
実践体験 5: 複数列レイアウトの境界線効果をデザインする
基本的な CSS3 コードに基づいて追加する:
body { -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:3em; -moz-column-gap:3em; column-gap:3em; line-height:2.5em; -webkit-column-rule:dashed 2px gray; -moz-column-rule:dashed 2px gray; column-rule:dashed 2px gray; //定义列边框为2像素宽的灰色虚线} デモ効果:
実践体験 6: 複数列レイアウトに表示する記事タイトルをデザインする
追加する基本的な CSS3 コードの基礎:
body { -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:3em; -moz-column-gap:3em; column-gap:3em; line-height:2.5em; -webkit-column-rule:dashed 2px gray; -moz-column-rule:dashed 2px gray; column-rule:dashed 2px gray;}h1 { -webkit-column-span:all; -moz-column-span:all; column-span:all;//设置一级标题跨越所有列显示}h2 { -webkit-column-span:all; -moz-column-span:all; column-span:all; //设置二级标题跨越所有列显示} デモ効果:
実践体験 7: 不等高さの複数列レイアウト効果をデザインする
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css" media="screen">body { -webkit-column-count:3; -moz-column-count:3; column-count:3;//定义页面内容显示为3列 -webkit-column-gap:3em; -moz-column-gap:3em; column-gap:3em;//定义列间距为3em line-height:2.5em; -webkit-column-rule:dashed 2px gray; -moz-column-rule:dashed 2px gray; column-rule:dashed 2px gray;//定义列边框为2px -webkit-column-fill:auto; -moz-column-fill:auto; column-fill:auto;//设置各列高度自动调整}.c1 { width:100%; height:500px; background:red;}.c2 { width:100%; height:300px; background:green;}.c3 { width:100%; height:100px; background:blue;}</style><title>column-fill</title></head><body><div class="c1"><img src="images/pic1.jpg" width="100%" height="600" /></div><div class="c2"><img src="images/001.gif" width="100%" height="120" /></div><div class="c3"><img src="images/img2.jpg" width="100%" height="600" /></div></body></html> デモ効果: