ネットショップのなかで商品画像を並べて表示させています。

質問

ネットショップのなかで商品画像を並べて表示させています。
画像ファイル名の指定は、商品数が多いためひとつひとつ確認しながら指定するのではなく、

aaa_1.jpg aaa_2.jpg aaa_3.jpg aaa_4.jpg
bbb_1.jpg bbb_2.jpg bbb_3.jpg bbb_4.jpg
ccc_1.jpg ccc_2.jpg ccc_3.jpg ccc_4.jpg

と決まった法則で記載しています（aaa_1の_1はaaaという商品の１枚目、_2は2枚目を意味します）。

ところが商品によって画像数が違うため、たとえばbbbという商品の写真が３枚しかない場合は、当然bbb_4と指定したところが × と画像がないことが表示されて見栄えがよくありません。

これを避けるため、画像がない場合は空白を表示させるか、何か別の写真たとえば画像準備中と記載のある写真を統一的に載せる方法はありませんか？

回答No.2

ORUKA1951

そもそもHTMLが、その意味・構造に従ってきちんとマークアップされていればありえない現象です。

　この場合、商品別の画像リストですからマークアップは
<ol id="productPhoto">
　<li>商品a
　　<ul>
　　　<li><img src="./images/aaa_1.jpg" width="" height="" alt=""></li>
　　　<li><img src="./images/aaa_2.jpg" width="" height="" alt=""></li>
　　　<li><img src="./images/aaa_3.jpg" width="" height="" alt=""></li>
　　　<li><img src="./images/aaa_4.jpg" width="" height="" alt=""></li>
　　</ul>
　</li>
　<li>商品b
　　<ul>
　　　<li><img src="./images/bbb_1.jpg" width="" height="" alt=""></li>
　　　<li><img src="./images/bbb_2.jpg" width="" height="" alt=""></li>
　　　<li><img src="./images/bbb_3.jpg" width="" height="" alt=""></li>
　　　<li><img src="./images/bbb_4.jpg" width="" height="" alt=""></li>
　　</ul>
　</li>
　<li>商品c
　　<ul>
　　　<li><img src="./images/ccc_1.jpg" width="" height="" alt=""></li>
　　　<li><img src="./images/ccc_2.jpg" width="" height="" alt=""></li>
　　　<li><img src="./images/ccc_3.jpg" width="" height="" alt=""></li>
　　　<li><img src="./images/ccc_4.jpg" width="" height="" alt=""></li>
　　</ul>
　</li>
</ol>
とかになるはずですよね。
　そのうえで、CSSで、ol#productPhotoをclear:left;のブロックにして、さらに、ol#productPhoto ol liをブロックにして、画像準備中とでもした背景画像を設定して、float:leftを設定する。
　それで、画像があれば画像がなければ画像準備中の画像が表示される。
　さらに、訪問者の画面が小さくても、４枚が横に表示されたり、３枚しか表示されない、あるいは２枚でも１枚でも・・・例えば携帯電話で見ても、きちんと表示されるはずです。もちろん検索エンジンなどに対しても文書を理解させられる。すなわち、SEOとしてもベスト。
※商品aとかの文字は消せる。

お礼

すみません。お礼遅くなりました。
ＣＳＳはただいま勉強中で、私には難しすぎるようです。
またある程度わかるようになった段階で質問させていただきます。

回答No.1

yyr446

bbb_4.jpgがないならbbb_4.jpgを記載しないようにするか、代わりにjpg
を記載するようにすれればよいだけの気がするのですが...
×画像を出さないようにしたいならalt属性で代替テキストを指定すればよいでしょう。

<img src="xxx.jpg" alt="画像無し">

お礼

お礼遅くなりすみません。
ありがとうございました。