HTML携帯での画像配置

2023/08/03 18:00

このQ&Aのポイント

携帯用のホームページで画像を真ん中に配置する方法を教えてください。
現在、携帯用のホームページを作成中ですが、画像が中央に配置されない問題が発生しています。
携帯で表示したときに画像が中央に表示されない問題に悩んでいます。どのように修正すればいいでしょうか。

ベストアンサー

HTML。携帯での画像配置

2007/04/08 18:09

皆さんお世話になります。今、携帯用のホームページを作っているのですが、携帯で見たときに画像が真ん中にくるようにしたいのですが、どこをどう直せばいいのかが解らないのです・・・よろしくお願いします。 <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>

houei55555
お礼率33% (4/12)

ブログ
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

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

ベストアンサー

hachi_08
ベストアンサー率58% (44/75)

2007/04/08 21:12 回答No.2

HTMLで作成されているということなので、まずは TABLE／TBODY／TR／TH　のタグを全部抜いた方がいいと思います。キャリアによっては対応していません。 DIVも使わない方が無難です。 style=～　や　class=～　も携帯のHTMLでは使えません。肝心の画像を真ん中寄せにする方法は↓です。 <CENTER> ～～この間に画像のimgタグ～～ </CENTER> ちなみに、HTMLで構築する携帯サイトで使えるタグの一覧です↓ この中にある全キャリア共通のタグだけを使って作る事をオススメします。 http://www.apupu.net/pc/hp/option/tag.html 作成、頑張ってくださいね(^_^)

質問者

お礼 2007/04/09 20:18

素晴らしい回答ありがとうございます！

その他の回答 (1)

hachi_08
ベストアンサー率58% (44/75)

2007/04/08 19:24 回答No.1

すみません、補足をお願いします。これはHTMLではなくXHTMLということでしょうか？もし質問のタイトルにあるように「HTML」であった場合、cssやTABLEタグは使えません。 XHTMLで携帯サイトを作ろうとしていると仮定した場合、あまり専門的な知識がない場合はけっこうハードルが高いかもしれません。

質問者

補足 2007/04/08 20:08

回答ありがとうございます。 HTMLでやってます。XHTMLはさっぱりなんで（笑）どうやったら機種に応じて画像が真ん中にきてくれるのかな～と。 HTMLも初心者なんで（汗）よろしくお願いします

関連するQ&A

HTMLの質問です。画像を並べて名称を表記します。
ホームページビルダーで作成しました。今回の例では画像を横4枚、縦2段に並べて画像下にテキストを表記します。各画像にはリンクを貼っています。ところが画像下のテキストの右端だけがダブって表記されます。具体的にはタイトル4とタイトル8というテキストです。問題点が分かる方はご教授願います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" type="text/css" href="hpb9tm04_8.css" id="hpb9tm04_8" a:link { 　　　　　　text-decoration:underline; 　　　　　　color:#0000FF; 　　　　　　} 　　　　　　a:visited { 　　　　　　text-decoration:underline; 　　　　　　color:#9900CC; 　　　　　　} 　　　　　　a:active { 　　　　　　text-decoration:underline; 　　　　　　color:#00FF00; 　　　　　　} 　　　　　　a:hover { 　　　　　　text-decoration:underline; 　　　　　　color:#00FF00; 　　　　　　position:relative;top:3px;left:3px; 　　　　　　}</style> </head> <body style="color: #000000; background-color: #ffffff" background="壁紙画像"> <div> <table class="hpb-main" id="HPB_LAYOUTTABLE_05" cellspacing="0" cellpadding="0" width="760" border="0"> <tbody> <tr> <td class="hpb-cnt-cell1" id="HPB_LAYOUT_LMH0" valign="top" align="center" height="18"> <table class="hpb-hmenu1" id="HPB_LINK_MENU_TABLE_01" cellspacing="0" cellpadding="0" align="center" border="0"> </table> </td> </tr> <tr> <td class="hpb-cnt-cell3-x" valign="top" align="center"><div style="float:left"><img height="43" alt="ホームページのタイトル" width="232" border="0" src="ホームページのタイトル画像" />  <table class="hpb-lb-tb1" cellspacing="0" cellpadding="0" align="center" border="0"> <tbody> <tr> <td class="hpb-lb-tb1-cell3" id="HPB_LAYOUT_CONTENTS" valign="top" height="400"> <p><div style="float:left"><img height="37" alt="ホームページのサブタイトル" width="510" border="0" src="ホームページのサブタイトル画像" /></p> <p> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル1" width="140" border="0" src="画像" /><br />タイトル1</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル2" width="140" border="0" src="画像" /><br />タイトル2</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル3" width="140" border="0" src="画像" /><br />タイトル3</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル4" width="140" border="0" src="画像" /><br />タイトル4</div></a> <div style="clear:both"></div></p> <p> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル5" width="140" border="0" src="画像" /><br />タイトル5</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル6" width="140" border="0" src="画像" /><br />タイトル6</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル7" width="140" border="0" src="画像" /><br />タイトル7</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル8" width="140" border="0" src="画像" /><br />タイトル8</div></a> <div style="clear:both"></div></p> <p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </body> </html>
- ベストアンサー
- HTML
センタリングのＨＴＭＬの挿入場所
お世話になっております。前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Ｂａｃｋ"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> 　 <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> 　　 <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> 　　 <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト
画像の配置（上下の間隔）で教えて下さい。
初心者なのですが、本についていたｒｏｍを使ってＨＰを作成中です。使用しているフォントの関係で、文字を加工して画像としてＵＰしたいのですが、その文字（画像）の間隔が広すぎて、どうしたらいいのかわかりません。 <table width="400"border="0 "align="center" cellpadding="0"lspacing="0"> <tr><td> <div align="center"><img src画像1.gif" width="700" height="300"vspace="10"> <img src画像2.gif" width="700" height="300"vspace="10"> </div></tr> </td> </tr> </table> <p align="center">　</p> こういった形になっているのですが、どう直せば画像の間隔が狭くなるのでしょうか？宜しくお願いします。
- 締切済み
- HTML
テーブルを作ったんですが…
はじめまして画像テーブルを作ったのですが、スクロールバーがでません。タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css">  </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
ハーボットのフレーム。
某サイトでハーボットのフレームの枠を配っていたのでつけようと思ってやっていましたが、枠は出来たのですがその中にハーボット本体を入れることがどうしても出来ないんですけどどうやっていれるのでしょうか？因みにhtmlは。 <TABLE width="142" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD rowspan="3" width="14" height="245"><IMG src="***/habwaku02.gif" width="9" height="247" border="0"></TD> <TD width="125"><IMG src="***/habwaku01.gif" width="127" height="37" border="0"></TD> <TD rowspan="3" width="6" height="245"><IMG src="***/habwaku03.gif" width="9" height="247" border="0"></TD> </TR> <TR> <TD width="125" align="center"><IMG src="***/hw1.gif" width="125" height="199" border="0"></TD> </TR> <TR> <TD width="125"><IMG src="***/habwaku04.gif" width="127" height="9" border="0"></TD> </TR> </TBODY> </TABLE> で=***/habwaku0*.gifの部分は全てうまく画像が出来ました。あとはここに画像URLを入れるだけとなっていましたが入れ方を教えてください。
- ベストアンサー
- フリーウェア・フリーソフト
下記が私のHPのタグなのですが
文字化けをしてしまいます。タグは文字制限を超えるため、これで全部ではありませんが、文字化けの原因はどこにあるのでしょうか？編集のプレビュー等では文字化けせず表示されますが、アップすると、文字化けしてしまうのです。下記はアップした後、右クリックでソースをコピーしたものです。文字化けの原因をお教え願います。よろしくお願い申し上げます。 <HTML> <HEAD> <META name="GENERATOR" content="IBM HomePage Builder 2001 V5.0.0 for Windows"> <TITLE></TITLE> </HEAD> <BODY><div align=center><script language="JavaScript">var jps=382116062;var jpt=1379958019</script><script language="JavaScript" src="http://bc.geocities.yahoo.co.jp/js/gg.js"></script></div><div align=center><script language="JavaScript">var jps=382116554;var jpt=1379847951</script><script language="JavaScript" src="http://bc.geocities.yahoo.co.jp/js/gg.js"></script></div><DIV ALIGN=CENTER></DIV> <TABLE width="734" height="112"> <TBODY> <TR> <TD height="81" width="116" bgcolor="#33FF00" align="left"><IMG src="im/Scome.gif" width="114" height="79" border="0"></TD> <TD height="81" width="602" bgcolor="#33FF00"><IMG src="im/midasi.jpg" width="600" height="80" border="0"></TD> </TR> </TBODY> </TABLE> <TABLE align="left"> <TBODY> <TR> <TD width="115" valign="top" bgcolor="#FFFFFF" height="601"><FONT size="3"><img src="@geocounter"><BR> <BR> <IMG src="im/M04_01.gif" width="13" height="13" border="0"><B><FONT color="#000000"><A href="col5/whatsnew.html"><FONT color="#000000">what's new</FONT></A></FONT></B><B><BR> <A href="col1/profile.html"><FONT color="#000000"><IMG src="im/M04_01.gif" width="13" height="13" border="0">・ラ・愠ユ・」。シ・</FONT></A><BR> </B><B><A href="col3/new.html"><FONT color="#000000"><IMG src="im/M04_01.gif" width="13" height="13" border="0">ツミタ�ョタモ</FONT></A></B><B><BR> <A href="col2/member.html"><FONT color="#000000"><IMG src="im/M04_01.gif" width="13" height="13" border="0">・皈ミ。シセメイ</FONT></A><BR> </B></FONT><FONT size="2"><B><FONT color="#000000" face="」ヘ」モ」ミフタトォ"><IMG src="im/M04_01.gif" width="13" height="13" border="0"></FONT></B></FONT><FONT size="3"><B><FONT color="#000000" face="」ヘ」モ」ミフタトォ">・ョ・罕鬣遙シ</FONT></B></FONT><BR> <IMG src="im/M04_01.gif" width="13" height="13" border="0"><FONT size="2" color="#000000"><FONT color="#000000" size="3"><B>ナキオ、ヘスハ<BR> </B></FONT></FONT><FONT size="2" color="#000000"><A href="http://www.wni.co.jp/cww/docs/yoho/s12.html"><FONT color="#000000"></FONT></A><A href="http://www.webleague.net/teamdb.html"><IMG src="http://www.webleague.net/teamlink/images/teamlink01.jpg" border="0"></A><A href="http://www.okaten.com/baseball/index.html"><FONT color="#000000"> </FONT></A></FONT><BR> <IMG src="im/ten-bun.gif" border="0"><BR> <A href="mailto:manesitana@ybb.ne.jp"><IMG src="im/fingermail.gif" width="77" height="20" border="0"></A><BR> <B><A href="http://www2.g-7.ne.jp/~yakyu/index.shtml"><FONT color="#00CCCC">チ鋙蠕ノ</FONT></A></B><BR> <A href="col2/fuso.html"><IMG src="im/fuso.jpg" width="112" height="20" border="0"></A><BR> <B><FONT size="2" color="#99CC00">ナミサウイネ<BR> </FONT><FONT size="2" color="#666666">ウーナ�</FONT></B><BR> <FONT color="#666666"><B>car doctor<BR> </B></FONT><FONT color="#666666" size="2"><B>・「・ム・�</B></FONT></TD> </TR> </TBODY> </TABLE> <TABLE width="618" height="388"> <TBODY> <TR> <TD align="left" valign="top" width="420"> <TABLE> <TBODY> <TR> <TD valign="top" height="150" width="208" align="center"><IMG src="im/allspirits.jpg" width="203" height="146" border="0"></TD> <TD height="150" width="196" valign="top" align="left" bgcolor="#FFCC00"><A href="butting.html"><FONT color="#000000">「」イハウリ、ケ、�鋙蝪ハツヌキ筍ヒ<BR> <SPAN style="FONT-SIZE: 9.5pt; COLOR: black; FONT-FAMILY: '」ヘ」モフタトォ'; mso-hansi-
- ベストアンサー
- HTML
コンテンツの配置について
Yahoo!のようにコンテンツ全体を中央によせ、さらに、それぞれのボックスの表示位置を縦横で指定したいのですが以下のようなソースではうまくいきません。対処方法をご教示下さい。よろしくお願いします。 <STYLE TYPE="text/css">  </STYLE> <TITLE></TITLE> </HEAD> <BODY> <DIV id="main"> <DIV id="contentsA"> <DIV id="contentsB"> <IMG src="image3.gif" border="0" width="50" height="50"> <IMG src="image2.gif" border="0" width="50" height="50"> <IMG src="image1.gif" border="0" width="50" height="50"> </DIV> </DIV> </DIV> </BODY>
- ベストアンサー
- HTML
ＨＴＭＬで画像を貼り付け
不明な点がありましたら補足要求かけてください。よろしくお願い致します。自分のＨＰにリンク先の背景を乗せ、後付けでその背景の上に動画像（heart1とbanner）２タイプを左右端上貼りたいのです。以下が背景タグでこれに画像を乗せたいのです。（プライベートな部分は★に変えてあります。） <table width="390" border="0" cellpadding="3" cellspacing="0" bgcolor="#241C43" height="80"> <tr> <td width="19%" height="52"><a href="http://www.★.net/ring/index.htm" target="_top"> </a> <a href="http://www.★.net/ring/index.htm"><img src="heart1.gif" width="66" height="50" border="0"></a> </td> <td width="81%" height="52"> <div align="center"><a href="http://www.★.net/ring/index.htm"><img src="ring_banner.gif" width="306" height="35" border="0"></a><br> <font size="1"> <font color="#FFFFFF"> 　 ★★</font></font> </div> </td> </tr> <tr> どうぞよろしくお願い致します。
- ベストアンサー
- ブログ
IE セル間に隙間が・・・
HTML初心者です。テーブルでHPをレイアウトしたいのですが、--1と--3のセル間に微妙な隙間ができてしまいます。NNでは問題なく表示されます。通常どの様なことが原因するのでしょうか？よろしくお願いいたします。 <td width="396" height="234"valign="top"><table width="100%" height="234" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="180" rowspan="2" valign="bottom" >1 <img src="../image/***" width="180" height="180" align="bottom"></td> ------1 <td width="216" height="98" valign="bottom">***</td> </tr> <tr> <td height="136" valign="bottom" ><img src="../image/*** width="91" height="61" border="1"><br>></td> </tr> </table></td> <td width="10" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="262"></td>　　　　　　　　------３ <td valign="top" >*** <br> </td>
- ベストアンサー
- HTML
cssヘッダー画像の下に配置したい画像が重なります
css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。固定ヘッダー（常に画面の上にヘッダーがあるように）を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか？よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>
- ベストアンサー
- HTML