WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

レスポンシブでのボックスの横並びに便利なCSS小技。コピペでOK!

タグ:

レスポンシブに便利、四則計算でボックス配置マージンを固定で可変ボックスを横並びさせる方法です。calcを使う事で短いコードで実装可能です。マージンが固定なのでグリッドレイアウトのデザイン等では使い勝手が良いと思います。コピペで使えるようにMedia Queries(メディアクエリ)も追加しています。

1.特徴

今回のボックスの横並び方法は全体の横幅を固定にして同じサイズのボックスを下記のように並べた際にボックス間のマージンを固定にする方法で、ウインドウサイズが小さくなるとボックスだけが可変で小さくなります。

ボックスの横並び見本

2.コード

以下、コードになります。コピペして使ってください。そのまま使えるようにmedia-queryも実装しています。
IEはサイズの小数点の扱いが異なるので少し強引にCSSハックで対応しています。

3カラムの場合

HTML CSS

4カラムの場合

HTML CSS

6カラムの場合

HTML


CSS

3.注意点

非対応のブラウザがあります。CSS3を使う場合は対応状況を都度確認しましょう。 2016年08月現在の対象ブラウザは下記です。
ブラウザの対応状況
赤色の部分が未対応のブラウザです。IE8とAndroid4.3が未対応です。IEはまだシェアは5%程度でしょうか。Android4.3のシェアは1%を切っていると思います。

4.まとめ

制作の際は他のボックスもこの手法でマージンを固定にしてしまえば手入れもしやすいですしグリッドも効いて比率の統一性も出てくるので見やすいデザインになってくるかと思います。