CSS3のcolumn-countを知らなかったので使ってみた
もしかしたら常識なのかもしれないが、自分がしらず、別サイトにて発見しその便利さに驚いたので、デジタルネイティブに負けてはいけないと早速使ってみることにした
使い方
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #columns-4 { column-count: 4; -webkit-column-count: 4; -moz-column-count: 4; } #columns-3 { column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; } #columns-2 { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; } |
まずはこのような感じでカラム数を指定する
|
1 2 3 4 5 6 | <div id="columns-4"> <div class="item"> <img src="images/img.jpg" /> <p>あああああ</p> </div> </div> |
アイテムの書き方はいろいろ有ると思うが、デモは上記のようなHTMLに
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .item { display: inline-block; background: #fff; padding: 1em; margin-bottom: 1em; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.10); -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.10); box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.10); border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; text-align: center; } .item img { max-width: 100%; height: auto; } |
このようなCSSを指定した
対応ブラウザは以下なのだが、割りと使えそうだ
| Chrome | 4.0 -webkit- |
| Edge | 12.0 |
| IE | .010 |
| Firefox | 2.0 -moz- |
| Safari | 3.1 -webkit- |
| Opera | 15.0 -webkit 11.1 |
Author Profile
SHARE
