NEWS2021.08.26【カラーミーショップ】フリーページで作ったコンテンツを共通ページ等で呼び出す方法
MORE

ECサイトの商品一覧に使える「display:flex;」と「flex-wrap: wrap;」が素晴らしい

CSS

Webデザイン

今まではECサイト（通販ショップ）の商品一覧ページをカスタマイズするときに「float:left;」を使用していましたが、最近主流の「display:flex;」を使ってみると今までの苦労（カラム落ちとか）が吹っ飛びました。

当ページでは細かい説明は省いて、実際の使用例をご案内していきます。

まずは下記のデモページをご覧ください。

デモページ

「display:flex;」の使用例

使用例として「ul」を使った横並びの商品一覧を作っていきます。
HTMLとCSSはこんな感じです。

デモページのソースを見るとわかりやすいかもです。

<div id="column" class="column02">
<h3>2個並び</h3>
<ul>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
</ul>
</div>



<div id="column" class="column03">
<h3>3個並び</h3>
<ul>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
</ul>
</div>



<div id="column" class="column04">
<h3>4個並び</h3>
<ul>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
</ul>
</div>



<div id="column" class="column05">
<h3>5個並び</h3>
<ul>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
<li><a href=""><img src="./img/noimage.jpg" /><p>商品名</p><span>2,600円</span></a></li>
</ul>
</div>
#column ul {
	width: calc(100 + 20px);
	margin: 0 -10px;
	display: flex;
	flex-wrap: wrap;
}

#column li {
	padding: 0 10px 20px;
}

#column li a,
#column li a:visited {
	text-decoration: none;
	color: #111;
}

#column li p {
	font-size: 90%;
	margin-bottom: 3px;
}

#column li span {
	font-size: 80%;
	display: block;
}

.column02 li {
	width: calc(50% - 20px);
}

.column03 li {
	width: calc(33.3333% - 20px);
}

.column04 li {
	width: calc(25% - 20px);
}

.column05 li {
	width: calc(20% - 20px);
}

paddingやらで装飾するコードを書いてますが、そのあたりは無視してもらって大丈夫です。

ulに「display:flex;」と「flex-wrap: wrap;」を指定して、liに横並びの割合を指定していきます。
※5個の場合は20％、4個の場合は25％みたいな感じです。

ちなみに「flex-wrap: wrap;」で横並びにしてはみ出したものを、次の行に送っています。

ブレイクポイントを指定して並びを変えていくとレスポンシブにも対応可能です。

まとめ

「display:flex;」はすごい便利なコードですので、ぜひとも使いこなしていきたいですね。

▲ページ先頭へ