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

【2023年版】扱いやすいレスポンシブでの横並び(CSS)

レスポンシブ時に便利な横並びの方法
レスポンシブサイトの作成の際にメンテナンスのしやすいボックスの横並びの組み方を紹介します。
flexboxを使用した横並びです。
昔はfloatなどを使用していましたが現在ではIE(Internet Explorer)の打ち切りになったため、flexboxを気にせず使用できるようになりました。
ベンダープレフィックスも必要ありません。
flexboxは非常に拡張性が高く、扱いやすいCSSの機能です。
今回は、メディアクエリを使って操作してレスポンシブなレイアウト組を紹介します。
簡単に可変のボックスが組めるコードの紹介です。
コードの説明は最後に書きます。

5列の横並び

HTML

CSS

4列の横並び

HTML

CSS

3列の横並び

HTML

CSS

2列の横並び

HTML

CSS

コードの説明

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

box-sizing: border-box

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

display: flex

並べたい要素の親要素に対して指定すると直下の要素を横並び(並列)します。
左詰めになります。

flex-wrap: wrap

display: flexで横並びさせた要素を回り込みさせます。

横並びの寄せ方向を操作

cssでjustify-contentを指定すれば右寄せ、左右均等など柔軟にレイアウトを組めるようになります。