PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【RWD】CSS3で自動的にカラム分けする

CSS3を使うことで自動的にカラムわけ表示をする事が可能です。

使い方

@media screenとcolumn-countを使用します。ブラウザ間で対応がまちまちなので必ずベンダープレフィックスを使うこと。

  • @media screen and (min-width:文字数em)
    文字指定。1行に○文字以上になるとカラムに変化します。
  • column-count: カラム数;
    カラム指定。


実行例

CSS

body {
  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以上
f:id:game-web-design:20141008104829p:plain

60em以下
f:id:game-web-design:20141008104838p:plain

60em以上で2カラム、60em以下で1カラムになっていることが分かります。