• ベストアンサー

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

携帯サイトでバランスよく下記のように(画像一枚に対して2,3行の説明文）配置したいです 画 　　説明文あああああああああああ。 像 　　あああああああああああああ。 画 　　説明文いいいいいいいいいいい。 像　　 いいいいいいいい。 tableタグを使うと崩れる機種もあるのでtableタグを使わず綺麗に配置する方法ございましたらご教授下さい。よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • fake-tang
  • ベストアンサー率24% (186/772)
回答No.1

<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
hamamann
質問者

お礼

返答ありがとうございます 早速確認してみます。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

回答No.2

こんにちは。専門家ですが、全ての機種でこのように表示するのは不可能です。 文字表示サイズが小さくだせて画面ピクセルサイズの大きい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/ それぞれ参照先をみつつ勉強してください。 早道は勝手サイトで表示の仕方を解析したほうが良いと思いますよ。

hamamann
質問者

お礼

返答ありがとうございます。 全機種対応させたいので苦労してます。 アドバイス参考になります。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. パソコン・スマートフォン
  3. スマートフォン・携帯・タブレット
  4. その他（スマートフォン・携帯・タブレット）

関連するQ&A

  • DLタグ　と　TABLEタグ

    dl・dt・ddタグは、本来1行ほどずれて表示されるタグだと思うのですが、 tableタグのように1行に並べて表示できることを知りました。 (TRやTDのように) 例) ユーザー名：テキストボックス パスワード ：テキストボックス ⇒tableでもDL一式でも可能だと思っております。 ただ、DLとかDTタグを横に並べて使用するぐらいなら tableタグでやったほうが早いと思ってしまうのです。 たぶん何かメリットがあると思うのですが そのメリットがわかりません。 tableタグ一式で、横並びの表を作成するより DLタグ一式でやったほうがいいメリットを 教えて頂けないでしょうか。 ご教授よろしくお願いします。 以上です。

    • ベストアンサー
    • CSS
  • 携帯ブラウザのTABLEタグ対応

    はじめまして。携帯サイトを作成しており、質問があります。 最近の機種は、どのキャリアでもTABLEタグに対応しているようなのですが、 どこまでが対応していてどこまでが対応していないというような区分けがわかりません。 もしお分かりの方がいらっしゃいましたら、参考になるサイトなどを教えていただければ助かります。

  • テーブルの配置

    お忙しいところすみません。たぶんＣＳＳでレイアウトした方がいいと思うのですが、よく分からないのでとりあえずテーブルでレイアウトしています。 テーブルの入れ子にせずにレイアウトをしたいのですが、ブラウザーで確認すると、文字サイズを小さくすると、真ん中の左右に並べたテーブルが上下のテーブルの位置からはみだしてしまいます。 何かタグを付け加えるとうまくいくのでしょうか？ ・まず、ページの上にタイトルやボタンを配置するテーブルを置き、 <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> ・その下に左右にテーブルを配置し、内容を書き、 <table width="49%" border="0" align="left" cellpadding="0" cellspacing="0"> <table width="49%" border="0" align="right" cellpadding="0" cellspacing="0"> ・その下にまたテーブルを置いて、コピーライトを表示させる <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> 省略してタグを書いていて、分かりにくければ申し訳ございません。教えていただけるとうれしいです。どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ScriptがTABLEタグの中に表示されません。

    下記の様にScriptを使ってTABLEタグの中に表示させようと思ったのですが、test2.jsの「あれ？」がTABLEタグ欄に表示されません。 何方かご教授してもらえませんか？ ↓↓↓↓<HTML File>↓↓↓↓ <HTML><BODY> <script src="./test1.js"></script> </BODY></HTML> ↓↓↓↓<test1.js File>↓↓↓↓ document.open(); document.write("<TABLE border=1><TBODY><TR><TD>1</TD><TD>おや？<script src=\"./test2.js\"></script></TD></TR><TR><TD>1</TD><TD>1</TD></TR></TBODY></TABLE>"); document.close(); ↓↓↓↓<test2.js File>↓↓↓↓ document.open(); document.write("あれ？"); document.close();

  • gooブログで <br clear="XX">に代わるタグは？

    gooブログを使っています。 【やりたいこと】 複数の画像を左側に配置し、それぞれの画像に対する説明文を画像の右側に回り込ませたい。 【質問】 （1）一番目の画像を配置し、　<align＝"left">　を指定すれば、説明文が画像の右側に回りこむ。 （2）二枚目の画像を配置したとき、一枚目の画像の右側に回りこんでしまう。　<br clear="left">　がサポートされていれば、二番目の画像を一枚目の画像の下に配置することができる。 （3）<br clear="left">　に代わる方法はありませんか？ <table>　を使えばできますが、　<table>　以外の方法は無いのでしょうか？ よろしくお願いします。

  • 携帯で使用出来るタグ

    はじめまして、質問なのですが今出ているほとんどのキャリア・携帯（使用している人がいると思われる）で同じように見られるページを作ろうと思っています。 ・CSSは使えますか？ ・テーブルは使えますか？ ・テーブルが使えるとした場合どの程度のタグが使用できますか？ ＜td bgcolor="#000000"＞＜table width="100%"＞等は使用できますか？ ・%指定は有効ですか？ ・入れ子は無理ですか？ たくさん質問してしまってすいません。 どうか宜しくお願い致します。

    • ベストアンサー
    • HTML
  • ブログで商品タグの画像配置

    初心者です宜しく 楽天のブログで商品の画像を説明と一緒に４つ並べて配置したいがいろいろやってみたいができない。画像だけならできるが、一つ一つリンク先が違っていてできない。<img src="方式でもだめで、<a href=方式でもだめ楽天の商品タグに画像と説明が一緒になったタグなのでできない。教えてください。

  • 携帯用HTMLで文字の背景色を指定するには。

    はじめまして！今携帯用のホームページを作っているのですが、yahooモバイルのように、文字の背景色を指定して、ページの背景は白で『コンテンツ一覧』と記述した1行だけ、背景を黄色にしたいのですが、そういうことって可能でしょうか？？tableタグを使ってやると、それができたのですが、tebleタグに対応していないi-mode機種(docomo SH900iや F901is)でyahooモバイルを見ても、きちんと1行だけ背景が黄色になっていたので、tableタグを使わずにそうする方法があるのだと思いましたが、ソースが見れないのでどのように記述すればいいかわかりません。 あとa～hの8つのリンクを a b c d e f g h という風に2つずつきれいに並べて表示させたいのです。これもtableタグを使うとできるのですが、yahooモバイルではtableタグ未対応の機種で見てもきちんと表示されているのです。 なにか特別な書き方があるのでしょうか？？ 自分でも色々調べてみたのですが、これらのことができそうなタグは見つけることができませんでした。よろしくお願いします。

    • ベストアンサー
    • HTML
  • cssでテーブルを中央配置にするには？

    よろしくお願いします。 テーブルを中央配置にしたいのですが、 <center>、<div align="center">は、W3Cの非推奨タグであるため、代替方法として、<div style="text-align:center">を使用してみたのですが、うまくいきません。 <body> <div style="text-align:center"> <table> <tr> <td>あいうえお</td> </tr> </table> </div> </body> としたとき、WinXP IE6.xではテーブルが中央に配置されるのですが、WinXP Netscape 7.x では中央に配置されませんでした。どなたか解決策をご存知でしたらご教授願います。よろしくお願いします。

    • ベストアンサー
    • HTML
  • 複雑（？）な画像の切り替え

    画像をクリック（通過でも可）すると違う場所の画像が切り替わるようにしたいのですが、どうすればよいのやらチンプンカンプンです。 やりたいことは table1（行1、列5）、table2（行1、列2）を作成 1.table1の各セル内に小さな画像を入れています。（サムネイルみたいな感じ） 2.table2の右側のセルに初期画像が、左側には初期テキストが入っています。 3.table1の画像をクリック（通過）するとtable2の右側には拡大画像が、左側には説明文が出る。table1の画像にそれぞれ拡大画像と説明文を設定したい。table1の画像は変更する必要はない。 簡単な画像切替（同じ場所の画像が切り替わるの）は何とか理解できるのですが、ちょっと複雑になるとさっぱりです。もしよろしければアドバイスお願いします。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する