携帯サイト tableタグを使わないで配置

質問

携帯サイトでバランスよく下記のように(画像一枚に対して2,3行の説明文）配置したいです

画 　　説明文あああああああああああ。
像 　　あああああああああああああ。

画 　　説明文いいいいいいいいいいい。
像　　 いいいいいいいい。

tableタグを使うと崩れる機種もあるのでtableタグを使わず綺麗に配置する方法ございましたらご教授下さい。よろしくお願いします。

回答No.1

fake-tang · ベストアンサー

<img src="画像あ" style="float:left;">
説明文あああああああああああ。<br>
あああああああああああああ。
<span style="clear:both;"></span>
<img src="画像い" style="float:left;">
説明文いいいいいいいいいいい。<br>
いいいいいいいい。
<span style="clear:both;"></span>

動作確認はしてませんが、こんなところで。

参考URL：

http://www.htmq.com/style/float.shtml

お礼

返答ありがとうございます

早速確認してみます。

回答No.2

anie1114ba

こんにちは。専門家ですが、全ての機種でこのように表示するのは不可能です。
文字表示サイズが小さくだせて画面ピクセルサイズの大きいQVGA機種以上でないと
お望みのような表示はできません。

まず画像サイズはどれくらいを想定するか、
文字は1行何文字程度で収めるか、
など微調整が必要になります。

今出回っている携帯でWEB閲覧を多く行うターゲットユーザーの使っている
平均な端末のスペックは、QVGA　240×360くらいです。
これを考慮して、左寄せの画像サイズと文字数を決めてください。
タグを使わないことが必ずしも解決策ではありません。
限定的なタグのみ使えば大体問題なく表示できるはずです。
一般的なキャリア公式以外の勝手サイト、
例えば「魔法のあいらんど」とかにPCで接続してHTML記述をみてみたりして勉強してみてはどうでしょう。
http://ip.tosp.co.jp/i.asp?I=19620511
または、i-mode公式サイトでi-modeシミュレーターをダウンロードして
端末の表示を試してみるのも良いと思います。
http://www.nttdocomo.co.jp/service/imode/make/content/download/
公式ガイドは、
http://www.nttdocomo.co.jp/service/imode/make/
AU
http://www.au.kddi.com/ezfactory/xhtml.html
ソフトバンク
http://developers.softbankmobile.co.jp/dp/tool_dl/

それぞれ参照先をみつつ勉強してください。
早道は勝手サイトで表示の仕方を解析したほうが良いと思いますよ。

お礼

返答ありがとうございます。

全機種対応させたいので苦労してます。

アドバイス参考になります。

ありがとうございました。