- ベストアンサー
画像をいくつか一列に並べ最後の画像のみ100％で指定する方法
HTMLで画像を横に一列に並べ最後の画像だけブラウザの端の最後まで表示されるようにwidth=100％と指定しましたがうまくいきません。 ソース <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div> <img src="hoge.gif"><img src="hoge2.gif"><img src="SAIGO.gif" width="100%"> </div> </td></tr> </table> はじめの2つは一列に並んでくれるのですが最後の画像のみ並んでいる画像の下（別の行に）ブラウザいっぱいに表示されます。 <div>を入れてみましたがだめでした。 希望としてはすべの画像を一列に並ばせるが最後の画像だけブラウザの右側までいっぱいに表示されるようにしたいです。 よろしくお願いいたします。
- Intel_404
- お礼率38% (213/548)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
できないですがSAIGOが切れてもいいなら nobrタグでいけるような気がします。 ただし、heightを実数指定しておかないと でかいイメージが表示されるのでげんなりですが。 <nobr><img src="hoge.gif"><img src="hoge2.gif"><img src="SAIGO.gif" width="100%"></nobr>
その他の回答 (2)
- OsieteG00
- ベストアンサー率35% (777/2173)
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10%"> <img src="hoge.gif"><img src="hoge2.gif"> </td> <td width="90%"> <img src="SAIGO.gif" width="100%"> </td> </tr> </table> tdタグのwidthを調整してみてください。
お礼
回答ありがとうございました。 なるほど。tdタグで調節ですね。了解です。
- atsunosuke
- ベストアンサー率40% (74/181)
こんにちは。 <img src="SAIGO.gif" width="100%">とすると、その画像がブラウザの横幅よりも小さい場合は拡大してめいっぱいに表示せよ、という意味になるので、width="100%" をここに入れていると他の画像と並べることは無理なのではないかと思います。 > 全ての画像を一列に並ばせるが最後の画像だけブラウザの右側までいっぱいに表示されるようにしたい 最後の画像の大きさはどれくらいですか？拡大・縮小をすることになるかと思いますがどちらを意図しているのでしょうか？補足してください。
補足
回答ありがとうございます。 最後の画像は横が10でたてが30ほどです（px) 前の画像は40、30ぐらいです。 ちなみに拡大です。（正しく言えば小さい画像を横伸ばしにする） よろしくお願いいたします。
関連するQ&A
- オブジェクトを指定してください、のエラーについて
HTML作業中、下記のようなエラーメッセージが表示されます。 エラー：オブジェクトを指定してください。 文字：3 コード：0 恐らく↓この辺りでエラーが起きているのだとは思うのですが… どなたか分かる方はいらっしゃいますでしょうか？それと、 ライン：200 ↑この数値は、ソースを表示させたときの行数でいいのでしょうか？ メモ帳で開くと「行へ移動」ができなかったもので… 他にエラー場所を知る方法があれば教えてください。 <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="right"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','img/click2.gif',1)"><img src="img/click1.gif" alt="クリック！" name="Image46" width="64" height="49" border="0"></a></td> <td colspan="2" align="right"><img src="img/suga-3.gif"></td> </tr> </table> <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="12" colspan="4"><img src="img/ue.gif" width="179" height="12"></td> </tr> <tr> <td width="14" height="124" background="img/hidari.gif"><img src="img/hidari.gif" width="14" height="7"></td> <td width="146" background="img/back.gif"><table width="145" height="110" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="img/main1.gif" width="70" height="102" hspace="2"></td> <td valign="top" class="text12">画像</td> </tr> </table> <img src="img/botan.gif" width="146" height="17"></td> <td width="19" background="img/migi.gif"> </td> </tr> <tr> <td height="12" colspan="4"><img src="img/sita.gif"></td> </tr></table>
- 締切済み
- HTML
- table内画像について
携帯サイトを作成しているのですが、下記の内容を記述したところ、上下の画像が2px程表示されませんでした。 test1.gifは画像下部分、test2.gifは画像上部分が表示されませんでした。 このような状態はどのような原因があるからでしょうか？ <table width="240" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="test1.gif"></td> </tr> <tr> <td bgcolor="#ffffcc"> テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト </td> </tr> <tr> <td><img src="test2.gif"></td> </tr> </td> </tr> </table>
- ベストアンサー
- デザイナー・クリエイティブ職
- 画像の配置（上下の間隔）で教えて下さい。
初心者なのですが、本についていたｒｏｍを使って ＨＰを作成中です。 使用しているフォントの関係で、文字を加工して画像としてＵＰしたいのですが、その文字（画像）の間隔が広すぎて、どうしたらいいのかわかりません。 <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
- Webの表で画像を並べたい
テーブルを使って画像を並べているのですが、どうしても空白ができてしまいます。ソースを見ても何が原因だかわかりません。 左側に145*89のセルが一つあり、右上に604*54のセル、右下には35*35、60*35、509*35の3つのセル（今後増やす予定です）を作り、画像を並べたいと思っています。 が、左の画像と右下（2つ）の画像、右下（2つ）の画像と右上の画像との間にそれぞれ少しだけ空白ができてしまいます。 何が原因だか分かりますか？どうかよろしくお願いします。 ソースは以下の通りです。 <table width="749" height="89" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="3" width="145" height="89"><IMG SRC="images/main_up_01.gif" width="145" height="89"> </td> </tr> <tr> <td width="604" height="54" colspan="10"><IMG SRC="images/main_up_02.gif" width="604" height="54"> </td> </tr> <tr> <td width="35" height="35"> <img src="images/top.gif" width="35" height="35"> </td> <td width="60" height="35"> <img src="images/top2.gif" width="60" height="35"> </td> <td width="509" height="35"> </td> </tr> </table>
- ベストアンサー
- HTML
- 画像の四隅を丸くしたい
html初心者です。 あるメイン画像の左上に、透過gif画像を重ねて表示させたいのですが、そのようなことは可能なんでしょうか・・・ メイン画像は長方形です（通常の画像のように、ふちは角ばっている）。その画像の左上に、透過gif画像を重ねて表示させようとしています。 htmlには： <TABLE> <TR> <TD> <div id="corner"><IMG SRC="images/frame4_03.gif"></div> <div id="inner"><IMG SRC="screen05_04.jpg"></div> </TD> </TR> </TABLE> cssには： #corner{ position:absolute; left:251px; top:98px; width:99px; height:39px; BACKGROUND-COLOR:#FFFFFF; } #inner{ position:absolute; left:251px top:98px; width:999px; height:799px; } と書いています。 WindowsXP、IE7で表示させています。 よろしくおねがいいたします。
- ベストアンサー
- HTML
- 画像と画像の間の空白
画像と画像を左右に並べて配置したかったので、 <table> <tr> <td><img src="○○.gif"></td> <td><img src="○○.gif"></td> </tr> </table> したのですが、少し画像と画像の間に空白を作りたいと思っています。 どのようにすればいいですか？ 又、画像と文字の場合も同じやり方でできますか？ これとはまったく別のやり方でも構いません。 教えてください。
- ベストアンサー
- HTML
- スタイルシートに関しての質問です。margin0 padding0と指定し居るのに、変なスペースが入ってしまいます。。。
スタイルシートで、 *｛ padding:0; margin:0; ｝ img{ padding:0; margin:0; } と指定しているのですが、なぜか画像でへんなスペースが入ってしまいます。どうしてでしょうか？ ソースは下記の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <META http-equiv=Content-Type content="text/html; charset=Shift_JIS"> <META content="新築マンション,賃貸,敷金ゼロ,礼金ゼロ,ペット可,内覧可能,水商売可,風俗可,東京,都内,マンション,アパート,一戸建, name=keywords> <title>株式会社</title> <link href="css/mainstyle.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wapper"> <div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" ></div> <div id="sidememu"> <table width="150" border="0" cellpadding="0" cellspacing="0" > <tr> <td><a href="#"><img src="img/menu1.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu13_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu5_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu4.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu11_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu10_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu3.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu9_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu6_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu8_h.gif" width="150" height="40" border="0"></a></td> </tr> </table> </div> <div id="main"> <div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div> <div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div> </div> </div> </body> </html> cssは、 /* CSS Document */ *{ padding:0; margin:0; } img{ padding:0; margin:0; } body{ margin-left:auto; margin-right:auto; text-align:center; } #wapper{ width:820; } #head{ margin-top:20px; text-align:left; border-bottom:2px #000099 solid; } #sidememu{ margin-top:20px; background-color:#F00; float:left; } #main{ margin-left:10px; margin-top:20px; float:right; } です。すみません。教えてください！
- ベストアンサー
- その他([技術者向] コンピューター)
- <td> 内のテーブルを上寄せにするには？
すみません教えていただけますか？ 初心者です。 このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。 上寄せにしたいのですが、どのようにすればよいでしょうか？ よろしくお願いします。 <table width="960" border="1"> <tr> <td width="160"> <!-- TABLE A --> <table width="160" border="1"> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> </table> </td> <td width="800" height="1200" border="1"> </td> </tr> </table>
- ベストアンサー
- HTML
- HTMLファイルの画像について
メモ帳で２００枚近くある画像（50x50ピクセル）が載ったアルバムを作ったのですがファイルが重くてなかなか開きません。 そこでわたしが考えた対策は、基本的に画像は非表示でオンマウス、またはマウスオーバーで個々の画像を表示するというやり方です。 けど、肝心のプログラムの仕方が分かりません（初心者です）。 とりあえず今の現状なんですけど、 <table> <tr> <td><img src="http://***1.gif">１</td> <td><img src="http://***2.gif">２</td> <td><img src="http://***3.gif">３</td> <td><img src="http://***4.gif">４</td> <td><img src="http://***5.gif">５</td> </tr> <tr>残り省略</tr> </table> こんな感じで延々２００行続いています。 （画像は著作権がない物です） そこで質問なんですけど、わたしが考えた対策でも、それ以外の方法でも構わないので画像数を減らす事なくファイルを軽くする方法があったら教えてください。 宜しくお願い致します。
- ベストアンサー
- ブログ
- CSSでの画像の自動縮小について
あるホームページを作成しているのですが、ブラウザを縮小した時、画像を自動で縮小したいのですがうまくいきません。 テーブルのレイアウトを崩したくないので、幅は固定したまま、かつ画像はブラウザサイズによって自動縮小にするようにしたいのですが、どうやってもうまくいきません。 ソースコードは下の通りです。 やはり、フレームレイアウト（waku）と、テーブルの幅を可変（パーセント表示）にしないと、画像の伸縮は難しいのでしょうか。 ＊＊＊＊ HTML部分（CSSは外部） ＊＊＊＊＊ <body> <div id="waku"> <div id="a"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> <tr> <td> <div id="b"> 画像の説明 <img src="01.jpg"> </div> </td> </tr> </table> </div> <div id="c"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> </table> </div> </div> </body> ＊＊＊＊ style.css(CSS部分) ＊＊＊＊＊ #waku { width:900px; border: 1px solid #000; } #a { width:800px; } #b img { max-width: 600px important!; width: 100% important!; max-height: 300px important!; height: 100% important!; } #c { width:800px; }
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 <nobr>を入れたら一発で解決しました。ありがとうございました。