レスポンシブでのボックスの横並びに便利なCSS小技。コピペでOK！
2016.08.01
カテゴリ：WEB制作
タグ：
マージンを固定で可変ボックスを横並びさせる方法です。calcを使う事で短いコードで実装可能です。マージンが固定なのでグリッドレイアウトのデザイン等では使い勝手が良いと思います。コピペで使えるようにMedia Queries(メディアクエリ)も追加しています。
1.特徴
今回のボックスの横並び方法は全体の横幅を固定にして同じサイズのボックスを下記のように並べた際にボックス間のマージンを固定にする方法で、ウインドウサイズが小さくなるとボックスだけが可変で小さくなります。
2.コード
以下、コードになります。コピペして使ってください。そのまま使えるようにmedia-queryも実装しています。
IEはサイズの小数点の扱いが異なるので少し強引にCSSハックで対応しています。
3カラムの場合
HTML
|
1 2 3 4 5 6 7 |
<div id="wrap" class="cf"> <ul> <li></li> <li></li> <li></li> </ul> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #wrap{ width:94%; margin:0 3%; } #wrap ul{ overflow: hidden; } #wrap ul li{ height:150px; margin-top:20px; margin-right:20px; float:left; background:#F7B981; width: 33.33333%; width: calc((100% - 40px) / 3); width: -webkit-calc((100% - 40px) / 3); width: -moz-calc((100% - 40px) / 3); } @media all and (-ms-high-contrast:none){ #demo-wrap ul.column3 li{ width: calc((100% - 41px) / 3); } } #wrap ul li:last-child { margin-right:0; } /*media query*/ @media screen and (max-width: 480px) { #wrap ul li{ float:none; width:100%; } } |
4カラムの場合
HTML
|
1 2 3 4 5 6 7 8 |
<div id="wrap" class="cf"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #wrap{ width:94%; margin:0 3%; } #wrap ul{ overflow: hidden; } #wrap ul li{ height:150px; margin-top:20px; margin-right:20px; float:left; background:#F7B981; width: 25%; width: calc((100% - 60px) / 4); width: -webkit-calc((100% - 60px) / 4); width: -moz-calc((100% - 60px) / 4); } @media all and (-ms-high-contrast:none){ #demo-wrap ul.column4 li{ width: calc((100% - 61px) / 4); } } #wrap ul li:last-child { margin-right:0; } /*media query*/ @media screen and (max-width: 640px) { #wrap ul li{ float:none; width:100%; } } |
6カラムの場合
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<div id="wrap" class="cf"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #wrap{ width:94%; margin:0 3%; } #wrap ul{ overflow: hidden; } #wrap ul li{ height:150px; margin-top:20px; margin-right:20px; float:left; background:#F7B981; width: 16.666666%; width: calc((100% - 100px) / 6); width: -webkit-calc((100% - 100px) / 6); width: -moz-calc((100% - 100px) / 6); } @media all and (-ms-high-contrast:none){ #demo-wrap ul.column6 li{ width: calc((100% - 101px) / 6); } } #wrap ul li:last-child { margin-right:0; } /*media query*/ @media screen and (max-width: 768px) { #wrap ul li{ width: 33.33333%; width: calc((100% - 40px) / 3); width: -webkit-calc((100% - 40px) / 3); width: -moz-calc((100% - 40px) / 3); } #wrap ul li:nth-child(3n){ margin-right:0; } } @media screen and (max-width: 768px),@media all and (-ms-high-contrast:none){ #demo-wrap ul.column6 li{ width: calc((100% - 41px) / 3); } } |
3.注意点
非対応のブラウザがあります。CSS3を使う場合は対応状況を都度確認しましょう。
2016年08月現在の対象ブラウザは下記です。
赤色の部分が未対応のブラウザです。IE8とAndroid4.3が未対応です。IEはまだシェアは5%程度でしょうか。Android4.3のシェアは1%を切っていると思います。
4.まとめ
制作の際は他のボックスもこの手法でマージンを固定にしてしまえば手入れもしやすいですしグリッドも効いて比率の統一性も出てくるので見やすいデザインになってくるかと思います。
