紙面のような段組みレイアウトにする
雑誌の誌面のような段組みレイアウトを組みたいといった時、floatプロパティを使う場合が多いかと思います。
floatを使う場合、回り込みの解除や横幅のど細かい調整が必要ですが、
CSS3のMulti-column Layout Moduleにて簡単に表現できます。
※ただしIEは未対応、IE9も未対応のようです。
<div class="multi"> この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字 </div>
.multi {
margin:15px 0px 0px 0px;
-moz-column-count: 3;
-webkit-column-count: 3;
}
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字
文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字
column-countプロパティにて簡単に段組みレイアウトが表現できます。
またカラムの幅、境界線の種類・色・太さなどの指定ができます。
.multi2 {
-webkit-column-count: 3;
-moz-column-count: 3;
-webkit-column-width:150px;
-moz-column-width:150px;
-webkit-column-rule-style:dashed;
-moz-column-rule-style:dashed;
-webkit-column-rule-color:#FF0000;
-moz-column-rule-color:#FF0000;
-webkit-column-rule-width:2px;
-moz-column-rule-width:2px;
-webkit-column-gap:20px;
-moz-column-gap:20px;
}
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字
文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字
なお、Multi-column Layout Moduleについてはワークスコーポレーションさん
にて分かりやすくまとめられていて、とても参考になりました。
