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

扱いやすいレスポンシブでの横並びの方法。2018年からはこれでOK!

レスポンシブ時に便利な横並びの方法
レスポンシブサイトの作成の際にメンテナンスのしやすいボックスの横並びの組み方を紹介します。
flexboxを使用した横並びです。
現在では、IE9もサポートが打ち切りになり、IE10ではベンダープレフィックスが必要ですが制作でもほとんど気にせず使用できるようになりました。
今回は、それぞれのwidthをメディアクエリを使って操作するだけで簡単に可変のボックスが組めるコードの紹介です。
コードの説明は最後に書きます。

5列の横並び

HTML

CSS

4列の横並び

HTML

CSS

3列の横並び

HTML

CSS

2列の横並び

HTML

CSS

コードの説明

必要なプロパティはたった3つです。

box-sizing: border-box

paddingとborderの幅を要素の幅と高さに含めるというコードです。
要はボックスの内側にborder、paddingが入ります。

display: flex

並べたい要素の親要素に対して指定すると直下の要素を横並び(並列)します。
念のためにIEのベンダープレフィックスを入れましょう。

flex-wrap: wrap

display: flexで横並びさせた要素を回り込みさせます。
例えば横並びの列数を2列、子要素のボックスを50%とした場合に子要素が4つあると200%( 50% × 4つの要素 )になるためWidthを無視して横方向に4つ並んでしまいます。
これを解除して子要素が100%を超えた場合は回り込むようになります。
念のためにIEのベンダープレフィックスを入れましょう。
media screeでブレイクポイント、widthで並び数、paddingで各要素のクリアランスなどを調整して使ってください。