インラインフレームが画面サイズを変えるとずれてしまう

このQ&Aのポイント
  • メニューが書かれている画像をクリッカブルマップを使用して、その画像内にインラインフレームを表示させたいと思うのですが、画面サイズを変えるとインラインフレームの位置がずれてしまいます。
  • 元の画面サイズが1280x1024で綺麗に表示されるのですが、変更後の画面サイズが1024x768だとインラインフレームの位置がずれて表示されてしまいます。
  • クリッカブルマップを使用した画像の位置はどんな画面サイズになっても画面のど真ん中にくるようになっていますが、インラインフレームだけがどうしてもずれてしまいます。どなたか詳しい方、教えていただけると助かります。
回答を見る
  • ベストアンサー

インラインフレームが画面サイズを変えるとずれてしまう

メニューが書かれている画像をクリッカブルマップを使用して さらにその画像内にインラインフレームを表示させたいと思うのですが、 その画像の上にインラインフレームを乗せるとこまでは上手くいったのですが 解像度(画面サイズ)を変えて見たところ、 インラインフレームの位置がずれて表示されてしまいます。 元の画面サイズが1280x1024(綺麗に表示される)で、 変更後の画面サイズは1024x768(ずれて表示される)です。 どんな画面サイズからでもHPが見れるようにしたいのです。 ちなみに、クリッカブルマップを使用した画像の位置は どんな画面サイズになっても画面のど真ん中にくるようになっています。 インラインフレームだけがどうしてもずれてしまうのでお手上げです; どなたか詳しい方、教えていただけると助かります。 宜しくお願いします。

  • HTML
  • 回答数1
  • ありがとう数3

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

下の例のような感じで。 (クリッカブルマップを含むブロックを好きなように配置すれば、 iframeの位置も親ブロックに従って配置されます) <html> <head> <title></title> <style type="text/css"> #box{position:relative;}/*iframeを相対配置するために*/ #if01{ /*親(#box)の左上からの位置を指定*/ position:absolute; top:XXpx; left:YYpx; } </style> </head> <body> <div id="box"> <img ><!-- クリッカブルマップ --> <iframe id="if01"></iframe> </div> </body> </html>

elmoge
質問者

お礼

ご回答有難うございました!! 分かりやすくタグで説明してくださったおかげで、 どんなサイズでもぴったり表示されるようになりました! 半日かかっても解決しなかったので本当に助かりました。 早く聞けばよかったです。 本当に有難うございました!

関連するQ&A

  • クリッカブルマップとインラインフレームを組み合わせたい

    こんにちは。自分でも検索してしらべたのですが、どうしてもわからないので、質問させていただきます。 現在、ページを製作中なのですが、タイトルのとおり、クリッカブルマップ画像の上にインラインフレームを組み合わせる方法がわからず、困っています。 透過したインラインフレームを、女の子の画像に重ねて表示してあります。この女の子の画像にメニューが書いてあるので、それをクリッカブルマップにして、インラインフレームにリンクを表示したいと思っています。 画像の上にインラインフレームを重ねて表示するのには成功しましたが、クリッカブルマップのタグを書き加えると、画面が真っ白になってしまいます。 クリッカブルとインラインを組み合わせたデザインのサイトは結構あるので参考にしようとしてみましたが今いちわからなくて・・・ 回答よろしくお願いします。

  • クリッカブルマップ(?)にインラインフレーム

    クリッカブルマップの背景にインラインフレームをのせる時はDIVタグしかないですか? DIVでのせているんですが、他の人が見るとずれてるというのです。 誰が見ても同じ所にインラインフレームをおくにはどうすればいいのですか? テーブルのタグでやってみたのですが背景画像の下にいってしまって余計ずれてしまいました。

  • インラインフレームのスムーズな表示

    メニューとメインの画面の単純なフレームを、ウィンドウのセンターに表示したくて、インラインフレームに入れました。 実際にウェブで表示させると、いつも同じところで分割されて、完全に表示するのにカクカクっと出てきます。 多少待てば完全に表示されるので、良いといえばいいのですが、なにぶんその切れる位置に画像があり、企業の代表の頭部のところで切れるので困っています。(`Д` ;) スムーズに表示させる方法はないでしょうか・・

  • ホームページ内のインラインフレームについて

    ホームページ内に設置するインラインフレームについて 教えてくださいませ。 たとえばフレームサイズが横幅300ピクセルあって、 その中にお勧めのHPとか画像を入れたいとき、 そのHPとか画像のサイズが500ピクセルだった場合、 きれいに表示されないですよね。 (足りないサイズ分表示が途切れてしまう) インラインフレーム内の画像というか、表示させる 部分を縮小して表示させるやり方はあるのでしょうか? そんなやり方はない! いやある! ごぞんじのかたいましたらお願いいたします m(__)m

  • インラインフレームで可能ですか?

    作成したいページの構造としては上部にタイトル、左にメニュー、右に表示したいページ。の3分割です。今はインラインフレーム、フレームは作成していません。やりたいことは、左のメニューをクリックするとトップのタイトルと左のメニューはそのままで右側にそれぞれメニューでクリックしたページが表示されることです。フレームを使えば可能だと言うのはわかるのですが、背景を設定したいのです。http://www.peachjohn.co.jp/ こちらのサイトは背景がピンクになっていて画面の大きさによって背景の見える範囲が変わっています。このように壁紙も設定したいのです。フレームで3分割せずに右側をインラインフレームにしてメニューをクリックするとインラインフレームのみ表示が切り替わるということ出来ますでしょうか?質問の仕方が下手くそですみません・・・お願いいたします。m(__)m

  • ホームページの画面表示サイズについて

    当方の環境は少々古いのですが。 XP・SP3、使用ソフト:HomePageBuilder12 モニタもまだ、HP作成/編集様には最大解像度SXGA:1280x1024のをメインに使っておりまして、 ビルダー12の、ツール=オプション=ページサイズ の設定の欄では、 「940x1200 1280x1024 ディスプレイ 標準」なる項目に設定していまして、 Webページの壁紙に使っている画像も1280x1024の画像ですが、 そこで、 最近のPCの環境/表示能力は、フルHDの普及もごく普通になってきましたし、 又、当方はノートPC(モニタは最大設定1680x1050)Thinkpadも使っているのですが、 作ったWebページをそのThinkpadで確かめると、 壁紙に用いている画像が1280x1024ですから画面右側に境界線が出来て、 画面右端側に、画像の左端部分が現れてしまうのですが、 Q:作成ページの表示を、壁紙にしている画像などのピクセルサイズに依らずとも、 閲覧側の表示スペックに順応して自動的に、閲覧側サイズに適応して画面サイズに収まる様な、 ビルダー12で設定などは出来ないものなのでしょうか?(意味が伝わっていますかどうか…)。 ビルダー12ではその機能は備わっていないのでしょうか? ビルダー12のヘルプはちょいちょい見てはみたのですが…。 当方は、Web制作等のプロレベルの知識は無いです。

  • インラインフレームで高さの指定

    インラインフレームで高さを指定する際に、クライアントの画面解像度に合わせて、最大の高さで表示させることは出来るのでしょうか? ちなみに属性にheight="100%"と入力すると画面領域全域には表示されませんでした。

  • クリッカブルマップ上でカーソルを追うタグ

    HPでカーソルを追っかけるアイコン(マウスストーカー?)を付けたいのですが、 普通に付けることは出来たのですが クリッカブルマップを使用していて、その上にカーソルをもっていくと アイコンが消えてしまいます。 クリッカブルマップで使用している画像からカーソルを外すと 再びカーソルを追いかけてきます。 マップ上にメニューなどあるので画像の上でも追いかけられるように したいのですが、どうしても出来ません。 それともクリッカブルマップ上では追いかけることは不可能なのでしょうか。 どなたか詳しい方、教えていただけると助かります。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • インラインフレームを使ったページのレイアウト

    センス向上の為、色々テンプレート配布サイトさんを見回っていた所、数か所のサイト様で、テーブルとインラインフレームを組み合わせたテンプレートを配布されている所を見付けました。 まずインラインフレームは枠線、境界線(表現、これで合っているでしょうか?デフォルトの状態だと、枠線を消しても窪んだ様な感じになっていますよね?それの事です)共に表示されておらず、 スクロールバーもない為に、スクロールはされないものの、インラインフレームの大きさが読み込むページによって変容していました。 また、あるサイト様ではインラインフレームの箇所に画像を使用しており、画像内の文字のみ変わる様な仕組みになっていました。 参考にして自分なりの物を作ろうと思ったのですが、思った様に行きませんでした。 width、heightは100%としましたが、インラインフレームの大きさは変わらず、frameborderだけでは境界線も消えず、マージンも指定しましたが、表示位置も変わりませんでした。 勿論とほほさんやTAG indexさんで勉強はして、その通りに打ち込んだつもりですが効果なし。 マージンに関して言えば、一応、少しだけは変わりましたが、明らかに指定した数値とは違う位置に表示されました。(指定は150px、表示位置は50pxにも満たない様な位置でした) ネットサーフィンで見かけたサイト様でしたので、その数か所のサイト様がどこから見かけたものか忘れてしまい、URLやソースを控えておく事もしていなかったので、 そのテンプレート配布者様がどの様なタグでその様にしたかが分かりません。 見かけたサイト様の様に表示させるにはどうしたらいいのでしょうか? それとも諦めてフレーム辺りで落ち着くべきでしょうか?

  • インラインフレームの中の表示位置を調節する

    私のXOOPSのサイトにインラインフレームを設置し そのインラインフレームの中から私のXOOPSのサイトを見れるようにしたのですが それだとサイドメニューとヘッダーが表示され 目的のものが非常にみづらいので インラインフレームの中の表示する部分を指定し目的の部分だけ見えるようにしたいのですが 表示する位置を指定したりはできないのでしょうか?

専門家に質問してみよう