• 締切済み

画像の上に画像

HPでcenterで例えば600サイズの外枠をつくりその中にHPの内容を表示するようにしています。 その中のひとつの写真（jpg）の上に画像(gif)を重ねて表示したいのですがスタイルシートで位置を指定したときに下記のように指定するとその指定した部分(jpg画像の上の部分)のスペースが画像のサイズ分空いて指定したところへ画像は重なります。 その空いてしまうスペースをなくしたいのですがどうにもなりませんでした。absoluteもfixedも試しましたがこれだとウィンドウサイズによって位置がずれるようです。 <span style="position: relative; left:15px; top:455px;z-index:1;"> 　<img src="./images/***.gif" border="0"></span> <td><img src="./imeges/***.jpg" ></td> すごく困ってしまっています。知っている方教えてください。

  • HTML
  • 回答数2
  • ありがとう数2

みんなの回答

  • mat-21
  • ベストアンサー率56% (91/162)
回答No.2

まず、レイヤー（position）をそのままでは、左上からのレイアウトしかできないので、センターでのレイアウトはテクニックが必要です。つまり、ブラウザ画面を横に延ばしても、センターになくてはならないレイヤー難しいのです。だからよく大手の企業のHPでは左詰のデザインが多いかと思います。 レイヤーをセンター揃えで使いたい場合は、 <body> <div style="text-align:center"> <div style="width:600px; margin:0px auto;"> <div style="position:relative; left:0px; top:0px; width:600px; z-index:1;"> <div style="position:absolute; left:0px; top:0px; width=???px; height=???px; z-index:2;"><img src="./imeges/***.jpg" ></div> <div style="position:absolute; left:15px; top:455px; width:???px; height:???px; z-index:3"><img src="./images/***.gif" border="0"></div> </div> </div> </div> という感じになります。

  • kosa
  • ベストアンサー率25% (379/1464)
回答No.1

テーブルの背景にJPGを使用して、セルの中にGIFを入れれば同様のことができるのではないでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 大画像の上の右上に小画像を表示する方法

    いつもお世話になります。 大きな画像の右上に小さな画像を表示するにはどうしたらよいでしょうか。 大きな画像はサイズが変わります。その大きな画像の大きさを指定しないで右上表示ができないものかと苦慮しています。大きな画像は、width:autoで表示させています。 小画像のスタイル <div> <img src="sss.jpg "style="position:absolute; left:600px; top:5px;width:20px;"> <img src="LLLL.jpg" style="width:auto"> </div> と、いう形で行っています。 小画像のleft:600px;の所に大画像の幅を取得できればと試したのですが、その方法もわかりませんでした。 以下の図のような位置に小画像を表示したく思います。 +----------------------+--+ |大大大大大大大大大大大|小| |大大大大大大大大大大大+--+　　　　　　　　　　　　 |大大大大大大大大大大大大大| |大大大大大大大大大大大大大| |大大大大大大大大大大大大大| +--------------------------+ よろしくお願いいたします。

  • テーブルで画像を並べるときに・・

    今ホームページをつくっていて 幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。 全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。 ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか？ 環境は、WinMEでエディタにタグ打ち込んで作ってます。

    • ベストアンサー
    • HTML
  • 画像クリックで指定のテーブルの背景画像を変えたい

    文字をクリックすると指定のテーブルの背景色が変わるようにしたい、という事で <table border width=100 height=100><td id="aa">aa</td></table><br> <span onClick="aa.style.background='red'">赤</span> を教えて頂いたのですが、これをテキストではなく画像にするの場合は <span onClick="aa.style.background='gazou.gif'"><img src="gazou.gif"></span> でやってみたものの出ませんでした。これではだめなのでしょうか＾＾；

    • ベストアンサー
    • HTML
  • HPの画像のサイズ変更について

    質問です。 今HPをつくっていてTableの中に画像をいれているのですが サイズ変更がうまくいきません。今は、 <td><img src="画像名.jpg" alt="画像の説明" width="100px" height="70px"></td> としているのですが、本当はサイズを％で指定したいのです。 上の書き方で画像が表示されたので　px　のとこを　%に変えてみましたが%に変更すると表示されなくなってしまいます。 どうしたら%で表示できるのでしょうか？？ 回答よろしくお願いいたします(>_<)

  • 背景画像に任意の位置でテキストを配置する

    CSSで背景画像を読み込み、に任意の位置でテキストを配置するには テーブルでとspace.gifを使ってやるしかないのでしょうか？ もっとスマートな方法はないんでしょうか？ CSS .ac1 { background-image: url(images/index_main01_02.jpg); width: 629px; height: 390px; } HTML <table class="ac1"> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr> <tr><td valign="top">これはテストですこれはテストですこれはテストです</td></tr> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr></table>

    • ベストアンサー
    • CSS
  • HTMLについて

    現在HTMLを勉強しています そこで画像の配置についてわからないところがあるので教えてください 添付した画像のようにしたいのですが緑の画像がかなりしたになってしまいます どうすればいいでしょうか？ コードとCSSは HTML <body> ～～～省略～～～ <div class="menu_block"> <table class="menu_left"> <tr> <td class="photo"><img src="img/siri-zu.gif" style="margin-top:80px;"></td> </tr> <tr> <td class="photo"><img src="img/sekkenn.gif" style="margin-top:20px;"></td> </tr> <tr> <td class="photo"><img src="img/oiru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/jeru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/set.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/mini.gif"style="margin-top:10px;"></td> </tr> </table> <img src="img/3.gif" height="300" alt="3STEP" class="menu_right"> <img src="img/rank.jpg" style="margin-top: 80px ;" class="ranking"> <img src="img/test.jpg" width="600" height="200" style="margin-left: 200px;" class="rebyu"> </div> </div> </body> CSS @charset "UTF-8"; h1 { margin: 30px 0 30px 0; padding: 0 0 0 0; line-height: 0; text-align: center; } #wrapper { width: 1050px; margin: 0 auto 0 auto; } .menu_block { overflow: hidden; zoom: 1; } .menu_left { float: left; margin-right: 20px; } .menu_right { float: left; margin-top: 80px; margin-left: 20px; } .ranking { float: left; margin-left: 20px; } .rebyu { float: left; margin-top: 10px; } です 赤の真下に緑が来るというのが理想です

    • ベストアンサー
    • HTML
  • 初歩的で申し訳ありませんが・・

    <table><tr> <td><img src="/cat.gif">ＯＫ！ ＣＯＭＥ　ＯＮ！<img src="/cat.gif"></td> </tr></table> 画像のサイズ（高さ）が30px　文字のサイズが10px　です。 このままだと文字が下にくっつきます。文字を行の真ん中に浮かせたく、 tr td に valign="middle" や style="line-height:30px;"　をやりますが変化ありません。 この場合はどうすればよろしいでしょうか？

    • ベストアンサー
    • HTML
  • リストタグの上に変なスペースが・・・

    下記の１～４のリストを上下の画像(a.jpg/b.jpg)で囲んでいます。 なぜかa.jpgの下だけに10pxくらいのスペースが開いてしまいます。 解消方法を教えていただけないでしょうか？ 【html】 <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="../images/a.jpg" border="0"></td> </tr> <tr> <td background="../images/bg.jpg"><h3> <ul id="pointlist"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </h3></td> </tr> <tr> <td><img src="../images/b.jpg"></td> </tr> </table> 【css】 #pointlist { padding-left: 30px; padding-right: 15px; margin: 0px; list-style-type:square; list-style-position:inside; } #pointlist li{ width: auto; float: left; margin-top: 0px; padding-right: 20px; font-size: 0.9em; line-height: 1em; text-align: left; white-space: nowrap; }

  • 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>

  • マウスオーバーで複数の画像を切り替える

    こんにちわ、お知恵を拝借させて下さい。 1週間以上探していますが、なかなか答えに結びつきません。 現在下記の内容で<div id="photoAlbum"></div>内の二つの画像の同時切替を行なおうとおもっております。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script type="text/javascript" src="main.js"></script> </head> <body> <table width="570"> <tr> <td><div id="photoAlbum"><img src="19.jpg" width="280" height="280"><img src="19pt01.jpg" width="280" height="280"></div></td> </tr> <tr> <td align="center"><img src="19.jpg" width="80" height="80" id="changeButton1">&nbsp;<img src="26.jpg" width="80" height="80" id="changeButton2">&nbsp;<img src="33.jpg" width="80" height="80" id="changeButton3">&nbsp;<img src="40.jpg" width="80" height="80" id="changeButton4">&nbsp;<img src="57.jpg" width="80" height="80" id="changeButton5">&nbsp;<img src="64.jpg" width="80" height="80" id="changeButton6"></td></tr> <tr> <td align="center">&nbsp;</td> </tr> <tr> <td><table width="438" border=0 cellpadding=3 cellspacing=1 bgcolor="#999999" style="FONT-SIZE: 9pt; LINE-HEIGHT: 100%"> <tr bgcolor=#e6e6e6> <td width="30%" nowrap><SPAN style="FONT-SIZE: 8pt">&nbsp;JAN</SPAN></td> <td width="46%" nowrap><SPAN style="FONT-SIZE: 8pt">&nbsp;型番</SPAN></td> <td width="24%" nowrap><SPAN style="FONT-SIZE: 8pt">&nbsp;カラー</SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN>&nbsp;19</SPAN></td> <td><SPAN>&nbsp;BK</SPAN></td> <td><SPAN>&nbsp;<a href="#" id="changeButton7">ブラック</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN>&nbsp;26</SPAN></td> <td><SPAN>&nbsp;GY</SPAN></td> <td><SPAN>&nbsp;<a href="#" id="changeButton8">グレー</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN>&nbsp;33</SPAN></td> <td><SPAN>&nbsp;NV</SPAN></td> <td><SPAN>&nbsp;<a href="#" id="changeButton9">ネイビー</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN>&nbsp;40</SPAN></td> <td><SPAN>&nbsp;GR</SPAN></td> <td><SPAN>&nbsp;<a href="#" id="changeButton10">グリーン</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN>&nbsp;57</SPAN></td> <td><SPAN>&nbsp;OR</SPAN></td> <td><SPAN>&nbsp;<a href="#" id="changeButton11">オレンジ</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN>&nbsp;64</SPAN></td> <td><SPAN>&nbsp;RD</SPAN></td> <td><SPAN>&nbsp;<a href="#" id="changeButton12">レッド</a></SPAN></td> </tr> </table></td> </tr> </table> </body> </html> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－ window.onload = function(){ document.getElementById("changeButton1").onmouseover = function() { album2.change(["19.jpg","19pt01.jpg"]); } document.getElementById("changeButton2").onmouseover = function() { album2.change(["26.jpg","26pt01.jpg"]); } ～中略～ document.getElementById("changeButton12").onmouseover = function() { album3.change(["64.jpg","64pt01.jpg"]); } } var album2 = { change : function(imageArray){ var imgTag = document.getElementById("photoAlbum").getElementsByTagName("img"); for (var i=1; i<imgTag.length; i++){ imgTag[i].src = imageArray[i]; } var album3 = { change : function(imageArray){ var imgTag = document.getElementById("photoAlbum.mainbody").getElementsByTagName("img"); for (var i=1; i<imgTag.length; i++){ imgTag[i].src = imageArray[i]; } } } －－－－－－－－－－－－－－－－－－－－－－－－－－－－ 上記内容で試していますが、changeButton7～12が入っているテーブルを削除すると動作するのですが、この状態ではどうしても動作させることができません。 何か、良い方法はないでしょうか

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する