楽天商品リンク画像を横3列2段で表示するHTMLテクニック：PC・スマホ対応

楽天の商品リンクを複数掲載する際、縦並びになってしまうとページの見栄えが悪くなります。この記事では、禁止タグを使わずに、画像リンクを横3列2段で並べる方法を解説します。PC・スマホ両対応のレイアウトが可能です。

禁止タグを避けつつ横並びにする方法

利用できるタグが制限されている場合でも、tableタグやtr・tdを活用することで横並びを実現できます。

例えば、5商品を2段に分け、1段目に3商品、2段目に2商品を配置する構造にすることが可能です。

以下のようにtableとtdを使うことで、横並びのレイアウトが実現できます。

この方法では、空の

を使って段のバランスを調整できます。

スマホ表示ではtableの幅を100%に設定し、画像サイズを調整すると横並びが崩れずに表示されます。CSSでmax-widthを指定することで、画面幅に応じたレスポンシブ表示が可能です。

例：img { max-width: 100%; height: auto; }を適用すると、スマホでも画像が自動で縮小されます。

各画像にマージンやパディングを設定することで、商品間に余白を作り、見やすいレイアウトにできます。また、table全体にborder-collapse: collapseを設定すると、境界線の調整も容易です。

さらに、alt属性を適切に設定することでSEO効果とアクセシビリティも向上します。

楽天の商品リンクを横3列2段に並べる方法は、禁止タグがある場合でも

や

を活用することで簡単に実現できます。PC・スマホ両方で表示を最適化し、画像サイズや余白を工夫することで、ユーザーにとって見やすく魅力的な商品ページを作成できます。

タイトルとURLをコピーしました