• ベストアンサー

画像を最下段や右端等の位置に％指定で表示したい

ページのサイズが変わっても何時も同じ比率の位置に表示したいので％で位置指定をすれば良いのかと思い<DIV STYLE="position:absolute; top:100%;"> とすると画像の上側が最下段になり画像が見えません。left:100%の場合も同じですが、100%にすると画像の最下段がヘージの最下段や右画像の右端がページの右端にきたり、50%,50%にすれば画像のセンターがページのセンターに来たりページの任意の位置に％指定で表示出来るようなタグの書き方は無いのでしょうか。お教えください。

  • CSS
  • 回答数2
  • ありがとう数1

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

  • ベストアンサー
  • taka2456
  • ベストアンサー率29% (36/122)
回答No.2

タグでのやり方はわかりませんがCSSとJavaScriptを組み合わせてできると 思います <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function GO(){ winWIDTH=document.body.clientWidth; //ウィンドウの横幅 winHEIGHT=document.body.clientHeight; //ウィンドウの縦幅 //横の５０％に指定 document.all.TEST.style.posLeft=winWIDTH*0.5; //縦の90%に指定 document.all.TEST.style.posTop=winHEIGHT*0.9; } </SCRIPT> </HEAD> <BODY onLoad="GO()" onResize="GO()"> <DIV id="TEST" style="position:absolute;"> <IMAGE src="画像のURL"> </DIV> </BODY> onLoadはページが読み込まれたときの処理 onResizeはウィンドウサイズが変更されたときの処理 実際にはdocument.all.TEST.style.posLeftやdocument.all.TEST.style.posTopを増減して微調整してください 例)document.all.TEST.style.posLeft=winWIDTH*0.5+3;

その他の回答 (1)

  • Teenage
  • ベストアンサー率24% (67/278)
回答No.1

表示するのが画像だけで、端または真ん中に表示ってことならテーブルで <TABLE BORDER="0" WIDTH="100%" HEIGHT="100%"> という風にして、 <TR>または<TD>のalignやvalignの指定で位置を指定できるんじゃないでしょうか

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

関連するQ&A

  • 写真等を指定の位置に置きたい

    ＨＰをテーブルで作っていて、<center>で常に中心にテーブルが来るようにしています。 <div>で作った枠に文章やイメージ画像を入れて、テーブル（ＨＰのフォーマットのように使っています）上の決まった位置に表示したいと思っていますが、<div>で載せてる画像がposition absolute top....と数値指定のようで、常に違う位置に表示されるテーブル位置と合いません。 テーブル位置は<center>で表示したいので、それにあわせて画像を載せられる方法を教えてください。

  • HTMLの画像の位置の指定

    HTMLで、画像の位置などを決めるときに、<div align="center"></div>などを使いますが、ＣＳＳやジャバスクリプトで使用している、 position:absolute; 絶対配置 position:relative; 相対配置 position:static; 通常配置（指定しない場合はこれ） position:fixed; 上のようなポジションタグを使う事は可能ですか？ できれば、そのサンプルのようなものを書いてもらえると 助かります。

    • ベストアンサー
    • HTML
  • このタグですが、ページを右端から左へ縮めても、常に中央に位置させたいのですが、、

    このタグですが、ページを右端から左へ縮めても、常に中央に位置させたいのですが、、、 <BODY> <DIV style="top : 56px;left : 95px; position : absolute; z-index : 1; width : 336px; height : 21px; " id="Layer1" align="center"><FONT size="+4">テキスト</FONT></DIV> </BODY>

    • ベストアンサー
    • HTML
  • CSS：画像位置の指定について

    divで囲った枠の中のサイドの部分に同じ画像を上から下まで貼り付けたいのですが、 右端もしくは左端に設定する場合、 background-position:right(もしくはleft) top background-repeat:repeat-y でずらっと表示できると思うんですが、 同じ画像を右端と左端両方に表示するようにも設定することは可能でしょうか？ ↓ ○ ○ ○ ○ ○ 両サイドにこんな感じで同じ画像が表示されるようにしたいのですが…

  • タグ　位置指定

    HPの位置指定タグについてです(・_;)　　 文字や画像いろいろなものを位置指定できるタグを探しています。 それも、<center><left><right>などといった 単純な位置指定ではなく、 数字で細かく指定できるタグです(＠_＠;) 私の力では　探しきれませんでした…；；； どなたか　知っている方がいましたら 教えてください(>_<) お願いします。

  • seesaaブログで背景画像の位置を指定したい

    seesaaブログで背景画像の位置を下中央に表示させたいのですが、background-position:bottom center;と指定しても、上中央に固定されていてウンともスンとも動きません。 試しにleftに指定してみたり、タグの順番をかえてみたりしましたがダメでした。 ちなみに、忍者ブログや簡単なHTMLのページでは思い通りに表示できています。 ご存知の方、是非ご教授ください。よろしくお願い致します。 body { margin:0px; padding:0px; background-image:url("画像URL") ; background-color : #210709; background-repeat:no-repeat; background-attachment:fixed; background-position:bottom center; line-height:180%; text-align:center; }

    • 締切済み
    • CSS
  • スタイルシートで位置指定したときに表示が乱れる環境

    スタイルシートで位置指定したときに、うまく表示がされない環境について教えてください。 ホームページの中で、部分的に次のような書き方をして位置指定しています。 <SPAN STYLE="position: absolute; top: 40px; left: 10px">～</SPAN> このタグを <BODY> aaaaaaa <BR><BR><BR> <SPAN STYLE="position: absolute; top: 40px; left: 10px">～</SPAN> bbbbbbbbbbbbb <BR>cccccccc </BODY> このような書き方で<BR>タグでスペースを空け、そこに位置指定がくるようにしています。 実際にはテーブルとかフォームのタグ、Javascriptも併用したページになっています。 私の環境のWin98、IE6.0では問題なく表示されているのですが、表示が崩れる環境には具体的にどんなものが有るのでしょうか。OSによる影響、ブラウザーによる影響等個別にわかればお教えください。

  • htmlについて教えてください

    サイトを一から作っているのではなく、 ショッピングサイトの商品ページの一部分を htmlタグを使って作っています。 macで確認するとレイアウトは問題なくきれいに見れるのですが、 windowsで確認すると画像やテキストが崩れています。 これはなぜなのでしょうか？ このような感じで記述していました。 画像の上に画像を重ねて表示し、テキストをその上に表示したいのですが... <div style="position: relative;"><div align="center"> <img src="http://○○○.jpg" alt=""></div> <div style="position:absolute;left:40px;top:40px"> <b>テキスト</b></div> <div style="position:absolute;left:380px;top:100px;width:240px;"> テキスト</div> <div style="position:absolute;left:60px;top:100px"> <img src="http://○○○.jpg"></div> <div style="position:absolute;left:370px;top:22px"><img src="http://○○○.jpg"></div> </div></div> htmlの知識がほとんどないので、 なるべく易しく説明していただければ有り難いです・・・。 よろしくお願い致します。

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

    いつもお世話になります。 大きな画像の右上に小さな画像を表示するにはどうしたらよいでしょうか。 大きな画像はサイズが変わります。その大きな画像の大きさを指定しないで右上表示ができないものかと苦慮しています。大きな画像は、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;の所に大画像の幅を取得できればと試したのですが、その方法もわかりませんでした。 以下の図のような位置に小画像を表示したく思います。 +----------------------+--+ |大大大大大大大大大大大|小| |大大大大大大大大大大大+--+　　　　　　　　　　　　 |大大大大大大大大大大大大大| |大大大大大大大大大大大大大| |大大大大大大大大大大大大大| +--------------------------+ よろしくお願いいたします。

  • 画像を重ねて表示する方法を知りたいです。

    おせわになっております。 下記のようなソースを作りました。 ------------------------------------------------- <div style="position: relative;"> <img src="sideback.gif" width="182" height="812" alt="sideback"> <div style="position: absolute; top: 30px; left: 15px;"> <span style="position:absolute; top:10px; left:10px"><img src="sidemanu-canner.gif" alt="メニュー"> </span> </div> </div -------------------------------------------------- 画像を重ねたいんですが、firefoxでプレビューすると （IEでも同じです。） 下の画像（背景）の上に上の画像が表示されるはずだった場所に四角い3つぐらい色のついたマークがでて （IEは小さな資格に×マーク） 上に表示されるはずだった画像が表示できません どうしたらいいでしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する