文書を読んでもらいたいマガジン系のサイトなどで、長文を1ページ内で表示したい場合、いくつかのボックスに分けて段組みレイアウトにするなどして、視覚的に読みやすい配慮が必要になってきます。その際に、複数の<div>などを配置するよりもひとつの<div>のなかでの段組みになるようにcolumnプロパティというものがあります。
そこで、columnプロパティを利用して長文を段組みレイアウトにする方法をご紹介します。
Can I use…(column)
W3C勧告候補 (Candidate Recommendation)なのでベンダープレフィックスを記述します。
下記のサンプルの文章を利用して見ていきましょう。
<div>で囲まれたエリアにいくつかの<p>文章（パラグラフ）を配置しています。
サンプルHTML
|
1 2 3 4 5 6 7 8 9 10 |
<div> <p>ミツバチの群れは、一匹の女王蜂と数千匹から数万匹の働き蜂、繁殖期に現れる二千匹から三千匹の雄蜂で構成されています。それぞれの役割分担も明確で、高度な巨大社会を形成していると言ってもよいでしょう。</p> <p>ミツバチは、規則正しい六角形を組み合わせて巣板を作ります。巣板を構成する六角形の小部屋は巣房と呼ばれます。巣房は、育児、花粉の貯蔵、花蜜の貯蔵、ハチミツの加工など、さまざまな目的に利用されています。それぞれの作業を効率よく行えるように、巣房の配置も考慮されています。 </p> <p>では、ミツバチは、なぜ六角形の巣を作るのでしょうか。もしミツバチの巣が丸だったら、上下左右に並べていくとき、無駄なスペースができてしまいます。もし四角だったら、巣と巣の間に隙間はなくなりますが、ミツバチが巣に入ったときに無駄なスペースができてしまいます。ミツバチの体型から考えると、六角形がいちばん効率がよいのです。</p> <p>ミツバチの巣の材料は、働き蜂の腹部から分泌される蝋片です。働き蜂は、その蝋片を、後肢の内側にあるブラシ状の毛を使って抜き取り、肢についた蝋片を大あごでくわえ、それをかみ砕きながらはりつけていきます。この根気のいる作業を続けるだけでも大変なことですが、定規も分度器もコンパスも持たずに六角形の巣を規則正しく並べていくのですから、まさに神業としか言いようがありません。</p> <p>以前は、ミツバチが最初に丸い形の巣を作り、それが周囲から押しつぶされて自然に六角形になると考えられていました。しかし実際にミツバチの巣づくりの様子を観察したところ、初めから六角形を作っていることが分かったのです。</p> <p>一九六六年、ドイツの二人の学者は、ミツバチの巣が横向きに作られていることから、六角形の巣を作る秘密は、重力に関係ある∵のではないかと考えました。巣を作るとき、ミツバチは、頭を上下左右に向けたいろいろな姿勢を取らなければなりません。そのときに体にかかる重力は絶えず変化します。そこで、二人が注目したのが、働き蜂の首と腹にある感覚毛です。二人は、実験から、ミツバチは首の感覚毛が頭に触れることによって重力の方向を感知していることをつきとめました。ミツバチは、感覚毛の接触によって、自分の体の向きを知り、六角形の巣を作っていたのです。</p> <p>ミツバチの巣がいかに巧妙に作られているかは、数学者たちの研究によっても証明されています。三つの菱形からなる中央部のそれぞれの角度は一〇九度二八分ですが、この数字は、使う蝋の量を最小にして巣を作った場合の角度なのです。数学者たちが微分学の理論を使ったむずかしい計算をして出した数字をミツバチは生まれながらに知っていたことになります。</p> <p>ハニカム構造と呼ばれる六角形の組み合わせは、効率がよいだけではなく、安定した形でもあります。外部から力が加えられたとき、うまく力を分散することができるのです。ダイヤモンドや雪の結晶は、このハニカム構造になっています。また、建築材料、航空機の翼の内部、サッカーゴールのネット、スキー板の内部などにもこのハニカム構造が応用されています。ハニカム構造がこんなにも幅広く採用されていることをミツバチが知ったら、はにかんでしまうかもしれません。</p> </div> |
横幅指定なしの2段組みレイアウトの場合
|
1 2 3 4 5 6 7 8 9 |
div.box1 { display:block; border:3px solid #ccc; background:#FFF; padding:1em; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; } |
column-countプロパティ・・・段組みの数を指定
横幅指定あり200pxの段組みレイアウトの場合
|
1 2 3 4 5 6 7 8 9 |
div.box2 { display:block; border:3px solid #ccc; background:#FFF; padding:1em; column-width: 200px; -webkit-column-width: 200px; -moz-column-width: 200px; } |
「column-count」と「column-width」は共存できないようで、両方の記述があると「column-count」の方が優先され「column-width」は無視されてしまうようです。ですので大枠の横幅を固定したい場合、<div>要素の幅を「width」で指定し「column-width」で段組みを指定する必要があります。
大枠の横幅指定あり100pxの2段組みレイアウトの場合
|
1 2 3 4 5 6 7 8 9 10 |
div.box3 { display:block; border:3px solid #ccc; background:#FFF; padding:1em; width: 200px; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; } |
横幅指定あり100pxの段組みレイアウトの(段と段の間隔幅指定50px)場合
段の感覚を指定する際は「column-gap」プロパティを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
div.box4 { display:block; border:3px solid #ccc; background:#FFF; padding:1em; column-width: 100px; -webkit-column-width: 100px; -moz-column-width: 100px; column-gap: 15px; -webkit-column-gap: 15px; -moz-column-gap: 15px; } |