• 文字サイズ
解決済

ヤフーカテゴリーページスマホ版の幅がうまくいかない

  • 相談者:非公開
  • 2018/11/03 14:29
お世話になります。

ヤフーのいい買い物の日の特集ページを作っていますが、
スマホ用のページの表示がうまくいきません。
100%で指定しているのに開いたときに100%以上の幅になり、
スクロールしなければいいけなくなります。

こちらのページです。
https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html

ソースは以下のように設定しています。

<p style="padding:0;margin:0;line-height:1.0;">
<img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_1.jpg" alt="森乃園×いいお買い物の日" width="100%"></p>

<p style="padding:0;margin:0;line-height:1.0;">
<img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_2.jpg" alt="目次" width="100%"></p>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html#50off"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_3.jpg" alt="大特価半額" width="100%"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html#leaf"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_4.jpg" alt="定番ほうじ茶リーフ" width="100%"></a></td>
</tr>
<tr>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html#teab"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_5.jpg" alt="定番ほうじ茶ティーバッグ" width="100%"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html#sweets"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_6.jpg" alt="ほうじ茶スイーツ" width="100%"></a></td>
</tr>
</table>

<a name="50off"></a>
<p style="padding:0;margin:0;line-height:1.0;"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_7.jpg" alt="大特価半額" width="100%"></p>
<p style="padding:0;margin:0;line-height:1.0;"><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_8.jpg" alt="極上ほうじ茶10本セット" width="100%"></a></p>
<p style="padding:0;margin:0;line-height:1.0;"><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_9.jpg" alt="薬膳ほうじ茶10本セット" width="100%"></a></p>

<a name="leaf"></a>

<p style="padding:0;margin:0;line-height:1.0;">
<img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_10.jpg" alt="定番ほうじ茶リーフ" width="100%"></p>

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_11.jpg" alt="極上ほうじ茶" width="100%"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_12.jpg" alt="薬膳ほうじ茶" width="100%"></a></td>
</tr>
<tr><td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_13.jpg" alt="桑の葉ほうじ茶" width="100%"></a></td>
<td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_14.jpg" alt="棒ほうじ茶 width="100%"></a></td>
</tr>
</table>

<a name="teab"></a>
<p style="padding:0;margin:0;line-height:1.0;"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_15.jpg" alt="定番ほうじ茶ティーバッグ" width="100%"></p>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_16.jpg" alt="極上ほうじ茶TB"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_17.jpg" alt="薬膳ほうじ茶TB"></a></td>
</tr>
<tr><td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_18.jpg" alt="桑の葉ほうじ茶TB20個入り"></a></td>
<td><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_19.jpg" alt="極上ほうじ茶TB50個入り"></a></td>
</tr>
<tr>
<td>
<a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_20.jpg" alt="桑の葉ほうじ茶TB50個入り"></a><td>
<td></td>
</tr>
</table>
<a name="sweets"></a>
<p style="padding:0;margin:0;line-height:1.0;"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_21.jpg" alt="ほうじ茶スイーツ" width="100%"></p>
<p style="padding:0;margin:0;line-height:1.0;"><a href="https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html"><img src="https://shopping.c.yimg.jp/lib/SHOP-URL/2018kaimono_22.jpg" alt="極上ほうじ茶羊羹" width="100%"></a></p>

<br>
<br>
<br>


解決方法をお教えいただけないでしょうか。

宜しくお願いします。
キーワード:HTMLcss
投稿内容について報告する




  • 返信者:非公開
  • 2018/11/03 15:28
ECマスターズの星です。

週明け担当の者よりご回答させていただきますので、
申し訳ありませんがお時間いただければ幸いです。
よろしくお願いいたします。………(省略)………
  • 返信者:非公開
  • 2018/11/05 11:15
ECマスターズの田中です。

「定番ほうじ茶ティーバッグ」表示用の<table>タグに含まれる
各<img>タグに「width="100%"」の指定がされ………(省略)………
  • 返信者:非公開(質問者)
  • 2018/11/05 11:43
田中様


お世話になります。
凡ミスでした。大変失礼いたしました。
表示はなおりました。
ありがとうございます。

あとお伺いたいのですが、ス………(省略)………
  • 返信者:非公開
  • 2018/11/05 17:29
ECマスターズの田中です。

いただいた部分を確認したところ、
背景色(モスグリーン)の部分も画像の一部として作成されている、
ということですね。
………(省略)………
  • 返信者:非公開(質問者)
  • 2018/11/05 18:04
ご回答ありがとうございます。
ずれが生じてしまうのですね。
テーブルタグに背景色を指定し解決しました。
ありがとうございます。………(省略)………