Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケター・WEBコーダーとして日々従事しており、会社ではWindows、お家ではMacの両刀遣い。iPad Proは毎日持ち歩いています。PCデスク周りを快適にすることやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしているガジェットブロガーです。写真撮影が趣味になりました。
ルイログをGoogleニュースで読む
この記事の目次
CATEGORY

2次元のルイ

ブログやるなら SWELL × ConoHa WING がおすすめ!ルイログはこの構成で運営しています

ルイログ愛用ブログテーマSWELL

今選ぶBESTサーバー ConoHa WING

ルイログも愛用中!

YouTubeチャンネル開設しました!
ステマ規制への対応と記事内広告について

本サイト内のコンテンツはルイログが独自に制作しています。 メーカー等から商品提供を受けることもありますが、その場合は記事内にPR表記と提供を受けている旨を明記しています。 また、コンテンツの内容や評価に関する決定にも一切関与されていません。 アフィリエイトプログラムにより記事内で紹介する商品を購入することで当サイトに売り上げの一部が還元されることがあります。 詳しくはサイト運営ポリシーをご覧ください。

【コピペで簡単】floatを使わずにdisplay:flexで横並びのコンテンツをつくる方法

display:flexで横並びのコンテンツを作る方法

ウェブサイトでコンテンツを横並びにする際「float」を使うことが多かったのですが、最近では「display:flex」を使うことが多くなりました。

画像を3つ並びにするときとか、ECサイト運営をしていると確実に商品画像を並べたいときがきます。

そんなとき、このコードさえ仕込んでおけばもう安心です!

display:flex」を使って商品画像を綺麗に並べたり、コンテンツを横並びにできる方法を、コピペで使えるソースコード付きでご紹介します。

もくじ
この記事の著者
R.U.I

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。 プロフィール詳細やレビューガイドライン

display:flexで等間隔に画像やコンテンツを並べるときの実例

画像やコンテンツが1つのとき、2つのとき、3つのとき・・・から5つのときまで使えるコードを用意しました。

htmlの記述例がこちら

<ul class="list-row3">
    <li>左コンテンツ</li>
    <li>真ん中コンテンツ</li>
    <li>右コンテンツ</li>
</ul>

<ul>にclass指定で3つ並びのclassを呼びます。

そして、その中に<li></li>を3つ用意するだのシンプルなコードです。※横に3つコンテンツを並べるときのバージョン

3つ並びを2行(全部で6個)並べたいときは、そのまま<li>を3つつければOK。シンプルイズベスト!

メインとなるCSS

CSSがこちら。

ul.list-row1, ul.list-row2, ul.list-row3, ul.list-row4, ul.list-row5 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;

/*↓ここはお好みで↓*/
list-style:none;
padding:0;
margin:0 auto;
/*↑ここはお好みで↑*/
}

ul.list-row1 li {
width: 100%;
text-align: center;
}
ul.list-row2 li {
width: 50%;
text-align: center;
}
ul.list-row3 li {
width: 33.3%;
text-align: center;
}
ul.list-row4 li {
width: 25%;
text-align: center;
}
ul.list-row5 li {
width: 20%;
text-align: center;
}

*, *::before, *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

5種類分を書いているので少々長いですが、仕込みとしてはこんなもん!

各コードはいたってシンプル。

display: -◯◯; 等の「-」がついている系のコードは、古いブラウザに対応するためのコードなので将来的にはいらなくなるでしょう。

1〜5個並びの各%指定は、指定のwidth%×個数=100%になるようになっています。

なので、それだけだとピッタリとコンテンツが並ぶ感じ

でも大体少しはスペースを用意したりするので、box-sizing: border-box; を仕込みます。

box-sizing: border-box; を仕込むことで、padding等でスペースを入れた場合も100%を超えずにスペースを作ることができます。

超便利!!

スペースを付ける場合は、こちらのCSSも仕込んでおきましょう。

ul.list-row1.gutter li, ul.list-row2.gutter li, ul.list-row3.gutter li, ul.list-row4.gutter li, ul.list-row5.gutter li{
padding:.5%;
}

そしてHTMLコードでclass指定を1つ増やしてあげましょう。

<ul class="list-row3 gutter">

このようにgutter(ガター・溝という意味で使いました)も指定してあげると、paddingで0.5%の隙間をあけることができます。(隙間は好みで調節してくださいね)

まとめ

私が普段、ECサイト構築をする際に多様しているコードを紹介しました。

ECサイト運営をしていると、商品画像を横並びにしたいときが必ずきます。(普段のトップページやカテゴリページ上部、楽天スーパーセール時のLP作成のときなんかもめっちゃ使えます)

そういったときに、是非コピペで利用してみてください。

対応ブラウザが沢山になりメインどころはカバーできていると思うのですが、古いバージョンのものや珍しいブラウザ等は確認しないとわからないので、気になるブラウザがありましたら是非試してみてください。

 

良きWEBデザインをっ!

display:flexで横並びのコンテンツを作る方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ