• 締切済み

携帯でのHTMLの書き方について

携帯電話のHTMLについて質問です。 ・構成要素は画像とテキスト ・画像の下にテキストを配置。 ・両要素の間に隙間をいれない ・両要素とも真ん中寄せ ・テキストには背景色を指定 を行うために下記のコードを書いたところ、DoCoMoでは背景色が表示されませんでした。これらを実現するために各キャリア共通のHTMLの書き方はあるのでしょうか?? ご存じでしたら教えてください! <div align="center">  <img src="hogehoge.gif" />  <span style="background-color:#ABCDEF">   テキストテキストテキストテキストテキストテキスト  </span> </div>

  • HTML
  • 回答数3
  • ありがとう数1

みんなの回答

回答No.3

初めまして。 現在モバイルサイト向けにウェブページを作る際に、XHTML + CSSで記述し、全キャリア(主に主要3キャリア)で問題なく表示させるためには、以下の知識が必要になります。 ■XHTML文法とCSSの正しい知識 ■各キャリア独自の記述方法の理解 ■i-XHTMLというDocomo独自の規格に対するコーディング ■サーバーがレスポンス時に返すHTTPヘッダ情報の知識 ■キャリア判別する為の.htaccessの設置、またはPHPスクリプト ■各キャリアの絵文字コード 更にメンテナンスやバグチェック等、作業が倍以上の負担になります。 背景色を要素ごとに変えた事による効果と価値が上回る事がない限り、お薦め出来ません。 モバイルサイトの構築は現段階ではHTMLベースの方が合理的だと思います。

  • auty
  • ベストアンサー率58% (284/486)
回答No.2

Docomoはiモード対応HTMLのバージョンが多く、下記のURLで確認してみてください。 また、 ・ 画像はGIFに限る。 ・ 半角カナが利用可能 等、重要な注意点も載っています。 なお、iモード対応XHTML 1.1では、style="background-color:#ABCDEF"も使えるようになっているようです(i-CSSとか)。下記のURLからたどって、 http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/about/index.html にあります。

参考URL:
http://www.nttdocomo.co.jp/service/imode/make/content/html/
  • auty
  • ベストアンサー率58% (284/486)
回答No.1

DoCoMoでは、CSSはまだ使えないと思います。次の部分です。    style="background-color:#ABCDEF" さらに、利用できるタグはほんの一部です。 「各キャリア共通のHTMLの書き方」は間違いかもしれませんがほぼ無理でしょう。 とりあえず考えられるのは、キャリアからキャリアへの変換ツールを作成することでしょう。もし出来ていれば私もしりたいですね。(無料ならさらに良) まずひとつのキャリアのHTML作成に挑戦してはどうでしょうか。自分で確認出来る物がいいですね。

otsukare3
質問者

お礼

ご回答ありがとうございました! 上記HTMLで、Softbank, AUで確認することが出来ました。 ただDoCoMoだけできないんですよね。。 # 共通でできないにせよ、DoCoMoだけできるやり方も知りたいです。

関連するQ&A

  • [携帯]divで指定した背景色から画像がはみ出す。

    携帯用サイトを制作しているのですが、 <div style="clear:both;background-color:red;">    <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" />    <br />こんにちは </div> <div style="clear:both;~ と画像の横に文字が回りこんだとき、背景色が文字の部分にしかつかず、画像がはみ出した状態になってしまいます。 今回は1*1の透明なgif画像を使い、 <div style="clear:both;background-color:red;">    <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" />    <br />こんにちは       <div clear="all" style="clear:both;">          <img src="./images/space.gif">       </div> </div> <div style="clear:both;~ とすることで解消できたのですが、 参考にしていたサイトではどうやら画像を使わずに背景内に収めているようです。 後学のために、画像を使わず、背景から画像をはみ出さないように見せる方法を教えてください。よろしくお願いします。 docomoで動作確認しています。

  • 携帯サイトでの回り込み

    携帯サイトをコーディングしているのですが、auのみ、ボックスの回り込みが出来なく困っています。 「画像の右にテキスト」であれば CSS ----------------------------------------------- .float { float:left; } .img { width:50px; height:35px; } ----------------------------------------------- HTML ----------------------------------------------- <!--{* この画像の右に文字列を表示する *}--> <img class="float img" align="left" src="jpg.jpg" /> floatON <!--{* 回り込み解除 *}--> <div clear="all" class="clear"></div> floatOFF ----------------------------------------------- で出来たのですが、 「ボックス要素の右にボックス要素」だと CSS ----------------------------------------------- .float-box1 { float:left; text-align:left; width:20%; height:30px; background:#4682b4; } .float-box2 { float:left; text-align:left; width:20%; height:30px; background:#3cb371; } ----------------------------------------------- HTML ----------------------------------------------- <div class="float-box-area"> <div class="float-box1" align="left">box1</div> <div class="float-box2" align="left">box2</div> </div> <div clear="all" class="clear"></div> ----------------------------------------------- で組むと、 box1 box2 という状態になってしまいます。 box1box2 というふうにしたいのですが、どなたかご存知の方いらっしゃいますか? テーブルでは考えていないのでテーブルでの横並びはなしでお願いします。 softbankとdocomoでは上記で回り込み出来ました。auだけ出来ません。 ブラウザ種は「WAP2.0」になります。 宜しくお願いいたします。

    • 締切済み
    • CSS
  • HTMLへ要素の挿入について

    HTMLを文字列に代入した後に、img要素にsrcやwidhtなどのプロパティを 追加したいのですが可能でしょうか。 もし可能でしたら方法をご教授よろしくお願いします。 例 var elem = '<div class="box"><div><span></span></div><img /></div>'; どうぞ宜しくお願いします。

  • 【HTML】画像と画像の間に「_」が入ってしまう

    画像のように勝手に画像と画像の間「_(アンダーライン)」が入ってしまいます。どのようにすればこのアンダーラインを消せますか? ■HTML■ <div id="imglink"> <a href="hogehoge1"> <img src="hogehoge1" width="88" height="31" alt="okwave"> </a> <a href="hogehoge2"> <img src="hogehoge2" width="88" height="31" alt="okwave"> </a> <a href="hogehoge3"> <img src="hogehoge4" width="88" height="31" alt="okwave"> </a> </div>

    • ベストアンサー
    • HTML
  • HTMLでHP制作、画像の横にアンダーバーが出てしまいます

    現在HTMLを使ってHPを制作中です。 HTMLは初心者で、ウェブや本を参考して作っています。 そこで問題が発生しました。回答よろしくお願いします。 以下のHTMLタグを入れたところ(○○以外はコピペしました)、 <HTML> <HEAD> <TITLE>○○○</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LEFTMARGIN="0" RIGHTMARGIN="0" TOPMARGIN="20" BOTTOMMARGIN="0" BACKGROUND="○○.gif"> <DIV ALIGN="CENTER"> <IMG SRC="○○.gif"> <A HREF="○○.htm"><IMG SRC="○○.gif" BORDER="0"> <A HREF="○○.htm"><IMG SRC="○○.gif" BORDER="0"> <A HREF="○○.htm"><IMG SRC="○○.gif" BORDER="0"></A> <IMG SRC="○○.jpg" WIDTH="200" HEIGHT="159"> </DIV> </BODY> </HTML> htmで確認したところ、 2と3個目のIMGの横(右下)に小さなアンダーバーのようなものが表示されてしまいます。 これを表示しないようにしたいのですが、調べても解決しませんでした。 初心者なもので、質問する内容に情報が足りなかったら教えて下さい。 回答、よろしくお願いします!

    • ベストアンサー
    • HTML
  • HTML CSSを、教えてください。

    お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか? (オレンジ画像 width=100 height=50 でお願いします。) 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }

    • 締切済み
    • CSS
  • CSSで 画像をかさねたい

    お世話になります。 CSSで 画像をかさねたいんです。 下になる画像を「背景」にして それで2つを重ねればいいのかと思いましたが、どうもうまくいきません。 CSSソースは .left{ width:182px; background:url(sideback.gif) float:left; } .left-midashi{ width:182px; text-align: center; } *「float:left」がはいっているのは、右隣にメインの枠があるからです HTMLは↓ <div class="left"> <div class="left-midashi"><img src="sidemanu-canner.gif"></div> </div> です。 初心者なので凡ミスかもしれませんが、自分ではよくわからなくなってしまいました。。。よろしくおねがいいたします。m(_ _"m)ペコリ

    • ベストアンサー
    • HTML
  • 画像を中心に配置したい

    画像の上下にも背景色を表示したいですが、うまくできません。 横幅は<align="center">で指定できたのですが、上下は・・・。 HTML、CSS、画像ファイル(gazou1.jpg)全て同じ階層にあります。 ・HTML <div class="gazou" align="center"><img src="gazou1.jpg"></div> ・CSS div.main { width: 100%; background-color: green }

    • ベストアンサー
    • CSS
  • 画像の横にテキスト

    画像の右側にテキストを配置したいです テキストが画像の上付近から始まるようにしたのですがどんな方法が一番良いのですか? 他にも方法はありますか? <img src="sample.gif" alt="" align="top">テキスト <img src="sample.gif" alt=""style="float: left">テキスト <img src="sample.gif" alt=""style="vertical-align: top;">テキスト また、HTML5ではどんな方法がいいでしょうか? よろしくお願いします

    • ベストアンサー
    • CSS
  • HTML。携帯での画像配置

    皆さんお世話になります。 今、携帯用のホームページを作っているのですが、 携帯で見たときに画像が真ん中にくるようにしたいのですが、 どこをどう直せばいいのかが解らないのです・・・ よろしくお願いします。 <BODY> <DIV style="top : -3px;left : -2px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"> <DIV> <TABLE border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_A_070408180231" height="570" class="hpb-cnt-tb1"> <TBODY> <TR valign="middle" align="center"> <TH align="center" height="343" width="200" valign="top" class="hpb-cnt-tb-th1"><IMG src="i-g-2.gif" width="200" height="61" border="0" align="middle"><BR> <P align="center">〒100-000<BR> 東京都千代田区<BR> 5-7-16布引ビル1F<BR> <BR> Tel (03)***-***</P> <IMG src="i-g-3.gif" width="200" height="230" border="0"><IMG src="i-g-4.gif" width="200" height="164" border="0"></TH> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY> </HTML>