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

by sakaki0214[Mobile]
2010-09-06 23:22:48

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

以下のようなデザインをコーディングする場合、画像を縦に隙間なく表示させる必要があります。
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枚画像にするしかないと思います。

[*]前の記事 | [#]次の記事
TOP

コメント(1)

Powered by MT4i 3.0.8X1
携帯アクセス解析