スマホ　テーブルを使用した際の隙間を埋めたい

Question

お世話になります。
スマホページで、tableを主に使用して画像を並べているのですが、
隙間、画像のズレが出てしまいます。

http://item.rakuten.co.jp/angelashop/c/0000000160/

隙間、ズレなくしたいです。
改善するにはどのようにすればいいでしょうか？

Answer

ECマスターズの田中です。

隙間については、スタイルシートを利用することで
なくすことができます。

※注：
楽天RMSの、禁止タグを入力できるバグを利用した方法ですので、
今後、RMSの改修により、使用できなくなる可能性があります。

最初に、下記の内容でCSSファイルを作成し、
GOLDサーバ内に設置してください。
===== この下の行から ============
.categorydescription img { vertical-align: bottom; }
===== この上の行まで ============

続いて、スマートフォン用説明文に
下記のHTMLタグを貼り付けることで、
隙間をなくすことができます。
===== この下の行から ============

===== この上の行まで ============
※CSSファイルのURLは、実際のURLにご変更ください。
※行末の空白も含めて必要となりますので、全体をコピーしてご利用ください。

ズレに関して、最初に原因をご説明いたします。

1枚の画像をスライスしてページに仕立てる手法は、
想定されている幅（今回の場合は960px）で表示すると綺麗に見えます。

ですが、スマートフォン用ページのように、
表示幅がデバイスによって変わる場合、
スライスされた各パーツが各々で拡大縮小するのですが、

各パーツの高さ・横幅が割り切れず、端数が出て、縦横比がわずかに崩れた結果、
様々な箇所にズレが発生してしまいます。

回避するには、なるべくキリのいい位置でスライスしていただくことをオススメします。
1/3ですとどうしても端数が出やすいのと、1/4ですとスマートフォンではパーツの幅が小さくなりますので、
丁度半分の位置でスライスするのを心がけていただき、
最大でも2列になるようご設定いただくことをオススメします。

あるいは、背景画像を敷き詰め、上に掲載するパーツを独立した画像ファイルにして
後から載せていく、といった方法もあります。

Answer

ありがとうございます！出来ました！3つ並びは不向きなんですね、今後使用しないようにします。
最終は背景画像の上に画像を掲載するカタチを目指します。

ありがとうございました！

スマホ テーブルを使用した際の隙間を埋めたい

スマホ　テーブルを使用した際の隙間を埋めたい