扱いやすいレスポンシブでの横並びの方法。2018年からはこれでOK!
2018.04.30
カテゴリ：WEB制作
レスポンシブサイトの作成の際にメンテナンスのしやすいボックスの横並びの組み方を紹介します。
flexboxを使用した横並びです。
現在では、IE9もサポートが打ち切りになり、IE10ではベンダープレフィックスが必要ですが制作でもほとんど気にせず使用できるようになりました。
今回は、それぞれのwidthをメディアクエリを使って操作するだけで簡単に可変のボックスが組めるコードの紹介です。
コードの説明は最後に書きます。
flexboxを使用した横並びです。
現在では、IE9もサポートが打ち切りになり、IE10ではベンダープレフィックスが必要ですが制作でもほとんど気にせず使用できるようになりました。
今回は、それぞれのwidthをメディアクエリを使って操作するだけで簡単に可変のボックスが組めるコードの紹介です。
コードの説明は最後に書きます。
5列の横並び
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="col_5"> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> </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 |
*, *:before, *:after { box-sizing: border-box; } .col_5{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_5 > div{ width: 20%; padding: 10px; } .col_5 > div > div{ position: relative; overflow: hidden } @media screen and (max-width: 960px) { .col_5 > div{ width: 25%; } } @media screen and (max-width: 480px) { .col_5 > div{ width: 33.33333%; } } |
4列の横並び
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="col_4"> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> </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 |
*, *:before, *:after { box-sizing: border-box; } .col_4{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_4 > div{ width: 25%; padding: 10px; } @media screen and (max-width: 960px) { .col_4 > div{ width: 33.33333%; } } @media screen and (max-width: 480px) { .col_4 > div{ width: 50%; } } |
3列の横並び
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="col_3"> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> </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 |
*, *:before, *:after { box-sizing: border-box; } .col_3{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_3 > div{ width: 33.33333%; padding: 10px; } @media screen and (max-width: 960px) { .col_3 > div{ width: 50%; } } @media screen and (max-width: 480px) { .col_3 > div{ width: 100%; } } |
2列の横並び
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="col_2"> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
*, *:before, *:after { box-sizing: border-box; } .col_2{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_2 > div{ width: 50%; padding: 10px; } @media screen and (max-width: 960px) { .col_2 > div{ width: 100%; } } |
コードの説明
必要なプロパティはたった3つです。
box-sizing: border-box
paddingとborderの幅を要素の幅と高さに含めるというコードです。
要はボックスの内側にborder、paddingが入ります。
要はボックスの内側にborder、paddingが入ります。
display: flex
並べたい要素の親要素に対して指定すると直下の要素を横並び(並列)します。
念のためにIEのベンダープレフィックスを入れましょう。
念のためにIEのベンダープレフィックスを入れましょう。
flex-wrap: wrap
display: flexで横並びさせた要素を回り込みさせます。
例えば横並びの列数を2列、子要素のボックスを50%とした場合に子要素が4つあると200%( 50% × 4つの要素 )になるためWidthを無視して横方向に4つ並んでしまいます。
これを解除して子要素が100%を超えた場合は回り込むようになります。
念のためにIEのベンダープレフィックスを入れましょう。
例えば横並びの列数を2列、子要素のボックスを50%とした場合に子要素が4つあると200%( 50% × 4つの要素 )になるためWidthを無視して横方向に4つ並んでしまいます。
これを解除して子要素が100%を超えた場合は回り込むようになります。
念のためにIEのベンダープレフィックスを入れましょう。
media screeでブレイクポイント、widthで並び数、paddingで各要素のクリアランスなどを調整して使ってください。
