紙面のような段組みレイアウトにする


雑誌の誌面のような段組みレイアウトを組みたいといった時、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についてはワークスコーポレーションさん

CSS 3の段組みと、その使いどころ

にて分かりやすくまとめられていて、とても参考になりました。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る