【RWD】CSS3で自動的にカラム分けする
CSS3を使うことで自動的にカラムわけ表示をする事が可能です。
使い方
@media screenとcolumn-countを使用します。ブラウザ間で対応がまちまちなので必ずベンダープレフィックスを使うこと。- @media screen and (min-width:文字数em)
文字指定。1行に○文字以上になるとカラムに変化します。 - column-count: カラム数;
カラム指定。
実行例
CSSbody { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; width: 70%; margin: 0 auto; line-height: 1.5; } @media screen and (min-width:60em) { p { -webkit-column-count: 2; -moz-column-count: 2; -ms-column-count: 2; column-count: 2; } }
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
結果:
60em以上
60em以下
60em以上で2カラム、60em以下で1カラムになっていることが分かります。