- 締切済み
html 画像を並べて表示したい
html初心者です。 前回質問したときにインラインフレームと真ん中のロゴを並べて表示していただきました。 今回は３つ横に並べて表示したく、前に教えてもらったタグをいじってみたのですが３つ並ぶことはなく、どうしても下にずれてしまいます。 画像の右下にずれてしまった画像（オレンジのやつ）があるのですがそれを真ん中のロゴの左に移動させたいのですが どうすればできますか？ html↓ <table style="width: 100%"><tr><td style="width: 300px"> <iframe src="file:///C:/Users/yuri/Desktop/%E3%81%BF%E3%81%84hp/%E3%82%A4%E3%83%B3%E3%83%95%E3%83%AC%E5%86%85.html"frameborder="0"width="440" height="500" style="background-color: #FFC0CB">みーちゃん</iframe> </td> <td> <A Href="URLまだ" Title="JUMP!!"> <font color="#FF69B4"> <DIV style="font-size:600%; margin-right:300px"> <div align="center"> <font face="HGS創英角ポップ体,Courier New">Miiko's<br>Photo.</font> </div> </font> </A> </b> </td></tr></table> <hr style="border:dashed;color:カラーコード;"> <img src="file:///C:/Users/yuri/Desktop/%E3%81%BF%E3%81%84hp/flower4800.jpg" width="400px" height="296px" align="right"><br> <br> </div>
- yuuneko333
- お礼率58% (35/60)
- HTML
- 回答数2
- ありがとう数13
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
誰がいったか知らないが。。。 ★単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) ★ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) は1999年のHTML勧告以来、とても強く言われ続けてきたことです。 また<font>要素はありませんし、color=""やalign=""の属性も代表的な非推奨です。ブラウザは「古い仕様も対応しなければならない」のですが、それとは別 もちろん<font>という行内要素内にdivというブロック要素は入れられません。 単純に見出しですから、HTMLは、 <div class="header"> <h1><iframe>みーちゃん</iframe><a href="">Miiko's<br>Photo.</a></h1> </div> だけで良いのですよ。 あとはスタイルシートで、プレゼンテーションは指定します。あとが好きに変更できる。メンテナンスがとても楽になります。
- 田中 裕之（@bybalsendercase）
- ベストアンサー率88% (56/63)
こんばんは 1. tableは横に列を増やす場合は<td>～～～～</td> 2. 縦に行を増やす場合は<tr>～～～</tr> になります。 3. 文字のフォントは全て同じようですのでcssで統一しました、ただ画像のようなフォントが見つかりませんでしたので「メイリオ」を使っています。コチラは自由に修正してください。 4. html5ではfontタグは廃止されていると思います、但しブラウザは対応します。 5. html5ではtdの中にdivを入れることが出来ません。 6. あとhtml5では廃止になっている部分を修正しました。 今回は横に列を増やすようですので1番を使います。 横線のhrは省略してますので好みでいれてください。 画像と文字位置のバランスはverticalで調整します、現状ではmiddleにしてあります。 <title>画像を横に並べえるサンプル</title> <style type="text/css"> td{ vertical-align:middle; font-family:メイリオ; font-size:28px; font-weight:100; color:lightskyblue; } </style> </head> <body> <table style="width: 100%"><tr> <td style="width: 300px;"> <iframe src="http://okwave.jp/http://okwave.jp/" style="border:0px;width:400px;background-color: #FFC0CB;" height="500">みーちゃん</iframe> </td> <td> <a href="http://okwave.jp/qa/q8902613.html" style="color:lightskyblue;" title="JUMP!!"> 画像を並べて表示したい </a> </td> <td> Miiko's </td> <td> Photo </td></tr> </table> <hr style="border:dashed;color:aqua;"> <img alt="" src="http://okwave.jp/c221.html" style="margin-right:20px;" width="400px" height="296px" ><br> <br> </body>
関連するQ&A
- htmlでテキストを画面の中央になるように
html初心者です。 愛猫の写真のHPを、メモ帳にhtmlで打ち、自作をしています。 真ん中に大きなリンク付きロゴで入口、センタリングをして真ん中にしました。 一味足らないと思い、左にインラインフレームをテーブル（というのですか？）というのを使い、真ん中のロゴと横ならべにしたところ以下の画像のように真ん中にあったロゴが左に寄ってしまい、右側が寂しくなってしまいました。。 このロゴをセンタリングではなくどんな画面でも中央になるようにしたいのですが、どのようにタグを追加したらいいですか？ html↓ <table><tr><td> <iframe src="file:///C:/Users/yuri/Desktop/%E3%81%BF%E3%81%84%EF%BD%8D.html" frameborder="0"width="300" height="500"style="background-color: #FFC0CB"> まだーー</iframe> </td> <td> <A Href="URLまだ" Title="JUMP!!"> <font color="#FF69B4"> <DIV style="font-size:600%"> <div align="center"> <font face="HGS創英角ポップ体,Courier New">Miiko's<br>Photo.</font> </div> </font> </A> </b> </td></tr></table> <hr style="border:dashed;color:カラーコード;"> </div>
- ベストアンサー
- HTML
- tableが縮まらない
<th width="20" ><div style="background-color:#FF9;height:28px;padding-top:12px">**</div></th><td width="10" bgcolor="#CCFFFF" >**</font>**</font><br><font><font color="#000000" >45</font></font></td> どうしても <td width="10" bgcolor="#CCFFFF" > この部分が縮まらないです。何故でしょうか？？
- ベストアンサー
- CSS
- HP作成初心者です。詳しい方誰か教えて下さい！
HP作成初心者です。 Mobile Spaceで作成しています。 リアルタイムを編集しているのですが、親記事自由表示の所が合っているのか分かりません。 チェックして頂けるとありがたいです。 どうぞよろしくお願いします。 (チェックしてほしい内容です↓) <br><div align="center"><div align="center"><table width="90%" bgcolor="black" cellspacing="1"><tr><td bgcolor="white"><font color="black"> <font style="font-size:10px"><DIV align="left"></a> <blockquote> <blockquote style="margin:3px 3px 5px 5px;"><font style="letter-spacing:1px;line-height:10px">#body#</Font> #photo3# </blockquote></DIV><DIV align="right"><font color=#000000>( #td#/#etm#/#ty# #th#:#ti# </font> #tbody# </a> </a><font color=#000000>) </font> </DIV></font></td></tr></table></div>
- 締切済み
- その他（インターネット・Webサービス）
- 入力したHTMLがちゃんと表示されるか確認したい
以下のように入力したＨＴＭＬをちゃんとブラウザで表示されるか確認したいのですが、どうすれば良いのでしょうか？（下の入力内容は気にしないでください） -------------------------------------------------------------------------------------------------- <table align="center" style="border-spacing: 0px;width:100%;"><tr><td><div id="EBdescription"> <!-- Begin Description --><table border="6" bordercolor="#72799E" cellspacing="0" cellPadding="10" width="70%" align="center"> <!-タイトル＋写真 ここから--> <tr><td> <center> <font size="6" face="Tunga" color="#122276"> <b>◆FANTA GRAPE◆</b> </font> </center> </td></tr> <tr><td><br> <center> <font face="Arial">
- ベストアンサー
- HTML
- テーブルが左右上下中央表示にできない。
<style type="text/css"> <!-- .tableley { text-align: center; } .tableley table{ margin-left: auto; margin-right: auto; } .tableley caption{ margin-left: auto; margin-right: auto; } bodytd{ letter-spacing :2px; line-height :15pt; font-size:80%;font-family:'Verdana'; color:#ffffff; } br{letter-spacing:normal;} body{overflow-y:hidden; margin:0;padding:0; background-attachment:fixed; } a{ text-decoration:none; color:#000000; } a:hover{ color:#808080; } --> </style> </head> <body> <table border="0" width="100%" height="100%" cellspacing="0" summary="テーブル"> <tr> <td colspan="3" style="border-bottom:1px solid #000000" bgcolor="#000000" valign=bottom><font size=5><b>SITE NAME</b></font> </td> </tr> <tr> <TD height="80%" width="250" align="center" valign="top" colspan="3"><BR> <BR> <table style="border: 1px dotted #cccccc;"> <tbody> <tr> <TD><IMG src="ConvertImage/ice.png" width="187" height="131" border="0"></TD> <TD height="120" width="200"> <div style="width: 270px; height:140px;color:#cccccc;font-size:10px;font-family:Verdana;overflow:auto; scrollbar-face-color:#000000; scrollbar-highlight-color:#000000; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #cccccc; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #000000;"><FONT color="#cecfce">ここにテキスト<BR> </FONT></div> </TD> </tr> </tbody> </table> </TD> </tr> <tr> <td colspan="3" style="border-top:1px solid #000000" bgcolor="#000000" align="right" valign="top"><FONT color="#ffffff">SINCE</a> </td> </tr> </table> </body> と、ビルダーでフレームを使わず横三分割のサイトを作ったのですが 真ん中の白い部分にあるテーブルを白ページ上下左右中央に設置出来ず悩んでいます。どうか解決策を教えてくださいお願いします。
- ベストアンサー
- HTML
- 外部スタイルシートへの記入方法について
外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。
- ベストアンサー
- CSS
- htmlで画像の上にテキストを表示したが、ブラウザーによって見え方が違う
ホームページの制作で 部分的に画像の上にテキストをつけようと <DIV STYLE="position:absolute;"> を使って作ってみました。 IEで見るとちゃんとできているんですが、 サファリ、Firefoxで見ると当該箇所が左にずれてしまいます。 ・画像の上にテキストをつける ・その画像の中に部分リンクをつける ・どのブラウザーで見てもずれない 以上の条件を満たせば、やり方を問いません。 どなたか教えていただけませんでしょうか？ どうぞよろしくお願いいたします。 素人なので見づらく、変に複雑になっているかもしれませんが 以下ソースの一部です。 <style type="text/css"> div.先頭画像 { background-image:url(./images/先頭画像); background-position: top center; background-repeat:no-repeat; margin:0; } div.サイド { background-image:url(./images/サイド画像); background-position: top center; margin:0; background-attachment:fixed; } table.Goo{ color:#000; } </style> </head> <body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <div class="サイド"> <center><img src="./images/リンク画像" width="794" height="662" border=“0” usemap="#top"/><br /> <map name="top"> <AREA SHAPE=rect COORDS="610,0,755,30" HREF="リンク先"> </map></center> <center><IMG SRC="images/white2.gif" width="794" height="1840" border=“0”><br /></center> <!--当該箇所> <DIV STYLE="position:absolute; top:662px; left:58px"> <IMG SRC="images/背景画像" border=“0” usemap="#first"/><br /> <map name="first"> <AREA SHAPE=rect COORDS="633,18,776,228" HREF="リンク先"> </map> <DIV STYLE="position:absolute; top:165px;left:125px"> テキスト </DIV> <DIV STYLE="position:absolute; top:570px;left:125px"> テキスト </DIV> </DIV> <!--当該箇所 ここまで> <center> <table class="Goo" width="756" cellpadding="0" cellspacing="0" border=“0”> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> <img src="./画像" width="416" height="53" alt="" border=“0”/> <br /> <br /> </td> </tr> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> <img src="./画像" width="369" height="15" alt="" border=“0”/> <br /> <br /> </td> </tr> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> テキスト <br /> </td> </tr> </table> </center> </div> </body>
- 締切済み
- その他([技術者向] コンピューター)
- tableに対するdiv
テーブル内の文字色を白にしたい場合、 <style type="text/css"><!-- div.font{color:white;} --></style> <tr> <div class="font"> <td align="center" width="20%">★１</td> <td align="center" width="20%">★２</td> <td align="center" width="20%">★３</td> <td align="center" width="20%">★４</td> <td align="center" width="20%">★５</td> </div> </tr> このように指定しましたが、適用されません。 なぜでしょう？
- ベストアンサー
- HTML
- テーブルタグについて
重ね重ね質問してごめんなさい！ スタイルシートを使ってみたんですけど・・・ <HTML> <HARD> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <META name="robots" content="noindex,nofollow"> <TITLE>**************</TITLE> <style type="text/css"><!-- body{font-size:12px;} div{font-size:14pt;font-weight:bold;color:orange;text-indent:47em;} .moji{font-size:13px;font-weight:normal;color:black;text-indent:65em;} span{font-size:14px;color:orange;margin-left:75em;} .rire{font-size:12px;color:black} --></style> </HEAD> <BODY> <BR><BR><BR><BR> <div>***********</div> <BR> <div class="moji">***************</div> <BR><BR> <span><A HREF="mail.htm"><IMG SRC="image/******.gif" border=0></A>(←mail)</span> <BR><BR><BR><BR> <table class="rire" border align="right" border="0" cellpadding="0" cellspacing="1" bordercolor="orange"> <tbody> <tr> <td>**** <img src="image/***.gif"></td> <BR> <tr> <td align="left"> <table style=" border:1px;solid #ffa000; cellpadding: 3px;width: 320px;height: 63px ;color:black; font-size:12px;"> <tr> <td>****</td> </tr> </tbody> </table> ・ ・ ・ テーブルタグを閉じても文字がテーブルの中に入ってしまうんです・・・。 何が間違っているのか分かりません・・・。閉じるタブは閉じてます・・・よね？ 教えてください！
- ベストアンサー
- HTML
- スタイルシートでのデザイン
HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- CSS
