リンク付き商品画像を並べて貼りたい

質問

• ネットショップで商品画像をリンク付きで並べるための方法について教えてください。
• 初心者でも分かりやすく、要点を押さえた方法を教えていただけますか？
• また、商品画像同士の間にはスペースを空ける方法も知りたいです。

回答No.2

torayoshi

#1です。
いや、私上級者ではないです(笑)
その前に確認なんですが、この質問のhtmlは画像が背景になってるんですが、
背景じゃなくても良いんでしょ？
それとも背景じゃないといけない何か訳でもあるんでしょうか？

普通に画像だけを横に並べるのは<img src="画像URL">で良いんです。
<img src="1.jpg>
<img src="2.jpg>
<img src="3.jpg>
<img src="4.jpg>
・・・・・・・
みたいに。

で、間隔を空けるにはそれぞれにCSSのmargin-rightで数値を決めてやれば良いんです。
<img src="1.jpg" style="margin-right:50;">
<img src="2.jpg">
・・・・・・・・
上の例は1.jpgと2.jpgの間に50pxの間隔が出来ます。
全部の画像を等間隔にするなら2.jpg以下同じようにCSSで。
最後の画像にはいりません。

で、二段にするには、
<img src="1.jpg>
<img src="2.jpg>
・・・・・・・・
<p><img src="5.jpg>
<img src="6.jpg>
・・・・・・・・
</p>
みたいなことやると、二段になります。
それと、「商品の名前と価格」「説明文」「カートに入れるボタン」
「詳細を見る」を消すには、
最初から書かなきゃ良いんです。

最後に。
今回の質問htmlはテーブル組、背景画像、java script、CSSなどで構成されていて、
複雑な構文になってますが、
回答のお礼文を読んだ限りでは、単に画像だけを横に並べたいだけのように読めました。
もしそうなら、質問のhtmlは忘れて新しく書き直した方が良いです。
全部直さないといけないですから。
その方が簡単です。

補足

回答ありがとうございます（深く、礼）

＞この質問のhtmlは画像が背景になってるんですが、
背景じゃなくても良いんでしょ？
それとも背景じゃないといけない何か訳でもあるんでしょうか？

質問させてもらったhtmlは商品を取り扱っている会社が作成したもので
コピーして自分のサイトにペーストするシステムになってます。。

なので「画像が背景になってる」ことの訳は
ちょっと分かりません。。
あと、初心者なので「画像が背景になってる」ということ自体が
どういうことか分かりませんです(^^;)

「画像だけを横に並べる方法」「間隔を空ける方法」
「二段になる方法」はとても良く分かりました＾＾
ありがとうございます。。

＞質問のhtmlは忘れて新しく書き直した方が良いです。

質問のhtmlが既存のhtmlのうえ、初心者なので
htmlの中のどの部分が商品画像を表していているのかも
どう並び変えたらいいのかも皆目分かりません（大量の涙）

それでなのですが・・
ものすごい面倒なお願いだと思うのですが・・

質問のhtmlで商品の名前と価格」「説明文」「カートに入れるボタン」
「詳細を見る」部分を削除して、単に 画像だけを横に並べた状態に
編集したお手本のhtmlを見せてもらえないでしょうか？
（リンクは付けたままにしたいです。。）

そのお手本のhtmlと既存のhtmlを見比べて
頑張って研究してみます。。

やっかいなことと思うのでお時間のある時でいいですです。。
よろしくお願いします（ひざがおでこに付くまで礼）