- 締切済み
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>
