【2023年版】扱いやすいレスポンシブでの横並び(CSS)
2023.01.17
カテゴリ：WEB制作
レスポンシブサイトの作成の際にメンテナンスのしやすいボックスの横並びの組み方を紹介します。
flexboxを使用した横並びです。
昔はfloatなどを使用していましたが現在ではIE(Internet Explorer)の打ち切りになったため、flexboxを気にせず使用できるようになりました。
ベンダープレフィックスも必要ありません。
flexboxは非常に拡張性が高く、扱いやすいCSSの機能です。
今回は、メディアクエリを使って操作してレスポンシブなレイアウト組を紹介します。
flexboxを使用した横並びです。
昔はfloatなどを使用していましたが現在ではIE(Internet Explorer)の打ち切りになったため、flexboxを気にせず使用できるようになりました。
ベンダープレフィックスも必要ありません。
flexboxは非常に拡張性が高く、扱いやすいCSSの機能です。
今回は、メディアクエリを使って操作してレスポンシブなレイアウト組を紹介します。
簡単に可変のボックスが組めるコードの紹介です。
コードの説明は最後に書きます。
コードの説明は最後に書きます。
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
*, *:before, *:after { box-sizing: border-box; } .col_5{ width: 100%; display: flex; flex-wrap: wrap; } .col_5 > *{ width: calc( 20% - 20px ); margin-right: 25px; margin-bottom: 25px; } .col_5 > *:nth-child(5n){ margin-right: auto; } @media screen and (max-width: 960px) { .col_5 > *{ width: calc( 25% - 9px ); margin-right: 12px; margin-bottom: 12px; } .col_5 > *:nth-child(5n){ margin-right: 12px; } .col_5 > *:nth-child(4n){ margin-right: auto; } } @media screen and (max-width: 580px) { .col_5 > *{ width: calc( 33.33333% - 8px ) ; } .col_5 > *:nth-child(5n){ margin-right: 12px; } .col_5 > *:nth-child(4n){ margin-right: 12px; } .col_5 > *:nth-child(3n){ margin-right: auto; } } |
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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
*, *:before, *:after { box-sizing: border-box; } .col_4{ width: 100%; display: flex; flex-wrap: wrap; } .col_4 < *{ width: calc( 25% - 9px ); margin-right: 12px; margin-bottom: 12px; } .col_4 < *:nth-child(4n){ margin-right: auto; } @media screen and (max-width: 960px) { .col_4 < *{ width: calc( 33.33333% - 8px ) ; } .col_4 < *:nth-child(4n){ margin-right: 12px; } .col_4 < *:nth-child(3n){ margin-right: auto; } } @media screen and (max-width: 580px) { .col_4 < *{ width: calc( 50% - 6px ) ; } .col_4 < *:nth-child(3n){ margin-right: 12px; } .col_4 < *:nth-child(2n){ margin-right: auto; } } |
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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
*, *:before, *:after { box-sizing: border-box; } .col_3{ width: 100%; display: flex; flex-wrap: wrap; } .col_3 > *{ width: calc( 33.33333% - 8px ) ; margin-right: 12px; margin-bottom: 12px; } .col_3 > *:nth-child(3n){ margin-right: auto; } .col_3 > * > *{ background: #ff0000; height: 120px; position: relative; overflow: hidden } @media screen and (max-width: 960px) { .col_3 > *{ width: calc( 50% - 6px ) ; } .col_3 > *:nth-child(3n){ margin-right: 12px; } .col_3 > *:nth-child(2n){ margin-right: auto; } } @media screen and (max-width: 580px) { .col_3 > *{ width: 100%; margin-right: auto; } .col_3 > *:nth-child(3n){ margin-right: auto; } } |
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 20 21 22 23 24 25 26 27 28 |
*, *:before, *:after { box-sizing: border-box; } .col_2{ width: 100%; display: flex; flex-wrap: wrap; } .col_2 > *{ width: calc( 50% - 6px ) ; margin-right: 12px; margin-bottom: 12px; } .col_2 > *:nth-child(2n){ margin-right: auto; } .col_2 > * > *{ background: #ff0000; height: 120px; position: relative; overflow: hidden } @media screen and (max-width: 960px) { .col_2 > *{ width: 100%; margin-right: auto; } } |
コードの説明
必要なプロパティはたった3つです。
box-sizing: border-box
paddingとborderの幅を要素の幅と高さに含めるというコードです。
要はボックスの内側にborder、paddingが入ります。
要はボックスの内側にborder、paddingが入ります。
display: flex
並べたい要素の親要素に対して指定すると直下の要素を横並び(並列)します。
左詰めになります。
左詰めになります。
flex-wrap: wrap
display: flexで横並びさせた要素を回り込みさせます。
横並びの寄せ方向を操作
cssでjustify-contentを指定すれば右寄せ、左右均等など柔軟にレイアウトを組めるようになります。
|
1 2 3 4 5 |
//左右均等で横並び justify-content: space-between; //右寄せで横並び justify-content: flex-end |
