[携帯]画像を縦に隙間なく並べる方法 ver02 │ これからゆっくり考L +α

[携帯]画像を縦に隙間なく並べる方法 ver02

前にも同じエントリー「[携帯]複数画像を縦に隙間なく表示させられるか」をあげていますが、サンプルを作り直したので書き直してみました。

以下のようなデザインをコーディングする場合、画像を縦に隙間なく表示させる必要があります。
3つ並んでいる赤ちゃんの写真のところです。

「画像を縦に隙間なく並べる方法 ver02
」のサンプルデザイン

結論を先に言ってしまうと、3キャリア1ソースで画像を縦に隙間なく表示させることは現状不可能です。
（2010年9月6日現在）
ということで、以下検証結果です。

brで画像を改行

<div style="text-align:center;">
<img src="img/ph_01.jpg" alt="zzzzz" width="208" height="169" /><br />
<img src="img/ph_02.jpg" alt="いつも太陽の方向を向いてすやすや" width="208" height="149" /><br />
<img src="img/ph_03.jpg" alt="泣くのも赤ちゃんの大事なお仕事☆" width="208" height="160" /><br />
</div>

サンプルページ

→サンプルページを見る

表示結果

docomo：隙間なし
au：隙間あり
softbank：隙間なし

tableの各セルに画像を表示

<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr><td><img src="img/ph_01.jpg" alt="zzzzz" width="208" height="169" /></td></tr>
<tr><td><img src="img/ph_02.jpg" alt="いつも太陽の方向を向いてすやすや" width="208" height="149" /></td></tr>
<tr><td><img src="img/ph_03.jpg" alt="泣くのも赤ちゃんの大事なお仕事☆" width="208" height="160" /></td></tr>
</table>

サンプルページ

→サンプルページを見る

表示結果

docomo：隙間あり
au：隙間なし
softbank：隙間あり

その他

色々試してはみましたが、table以外の方法でauが画像を隙間なく表示してくれる方法は見つかりませんでした。

色々試した実験ページの残骸

サンプルページ
→ページ03

サンプルページ
→ページ04

サンプルページ
→ページ05

まとめ

キャリア毎にソースがわけられれば特に問題はないんですが、3キャリア3ソースだとどうにもなりません。

デザインがFIXしてしまってもうどうしようもない！
という場合は、1枚画像にするしかないと思います。

piyo 2010年9月 7日 17:56

とても助かりました！
まわりに誰もhtmlを分かる人がおらず模索しておりましたがこのサイトを見つけて「こんなこともできるのか！」と色々勉強させていただいてます！
ソースも見れるのでよりわかりやすい！
とてもありがたいです＞＜
またお世話になろうと思います！こんな素晴らしいサイトを製作していただいて感謝です！！