楽天の商品リンクをウェブページに複数表示する場合、縦に並んでしまうことがあります。PC・スマホ両対応で横3列2段に並べる方法を解説します。
使用可能なタグとレイアウトの基本
禁止タグを避けつつレイアウトを整えるには、divやタグ、imgタグを活用します。CSSのdisplay: flexやflex-wrapを使うことで、横並び・折り返し対応が可能です。
基本構造は
具体的なHTML例
<div class="container">
<a href="商品URL1"><img src="商品画像1" alt="商品1" /></a>
<a href="商品URL2"><img src="商品画像2" alt="商品2" /></a>
<a href="商品URL3"><img src="商品画像3" alt="商品3" /></a>
<a href="商品URL4"><img src="商品画像4" alt="商品4" /></a>
<a href="商品URL5"><img src="商品画像5" alt="商品5" /></a>
</div>
CSSで横3列2段に整列
<style>
.container { display: flex; flex-wrap: wrap; justify-content: space-between; }
.container a { width: 32%; margin-bottom: 10px; }
.container img { width: 100%; height: auto; }
</style>
これにより、PC・スマホともに横3列、必要に応じて2段で表示されます。幅32%にすることで3列に収まり、余白はjustify-content: space-betweenで均等化されます。
レスポンシブ対応のコツ
スマホでは1列や2列に切り替えたい場合、@mediaクエリを追加します。例：@media (max-width: 600px) { .container a { width: 48%; } }
これで画面サイズに応じて列数が自動調整され、見やすいレイアウトが保たれます。
まとめ
禁止タグを避けつつ楽天の商品リンクを横3列2段に並べるには、divと、imgを活用し、CSSのflexで整列します。レスポンシブ対応も可能で、PC・スマホどちらでもきれいに表示されます。
コメント