• ベストアンサー

iframeの部分表示の方法

iframeの中(エリア)に別のhtmlファイルの内容を表示したい場合、別の内容は右上の部分からエリアの範囲内に表示されると思います。 たとえばwidthやheightでサイズ調整してもカットされるのは下であり右の内容になりますよね。 これを、たとえば右の一部や下の方の一部を表示したい場合、方法はあるのでしょうか。 たとえば、表示したい内容(別のhtml)を上から300pix、左から300pixの位置から、500×500のエリアを表示する。 scrollingは"no"とし、別ファイルは加工しない前提です。

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

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

  • ベストアンサー
回答No.1

手っ取り早く使えるとしたら、これかな。 <iframe src="***.html" width="1000" height="1000" style="position:absolute; left:-290; top:-290; clip:rect(300 800 800 300);"></iframe> 表示位置は left と top で、クリップ範囲は rect 内の数値で指定。

noro6857
質問者

お礼

ありがとうございます。 数字のそれぞれの役割がよく理解できなかったため、悪戦苦闘しましたが、数字をそれぞれ色々いじりながら位置関係を確認してゆき、ようやくうまくできました。 これで目的どおりの表示ができます。 ありがとうございました。

関連するQ&A

  • Iframeとして呼び出すページを120px以下を表示したい

    Iframeを使いたいのですが、A.htmlの高さ120pixから下をIframeで指定したいときはどうしたらいいでしょうか。 <html> <head> <title>testtitle> </head> <body> <div width:100%; height:120px;> <table> <tr> <td><iframe src="A.htm" width="100%" height="100%" frameborder="0" scrolling="no" overflow:no></iframe><td> </tr> </table> </div> </body> </html> 呼び出すIframeの中身のページについて 高さを120pix以下を表示したいのですが。 よろしくおねがします。

  • iframe内MENU

    ほんと色々お世話になります。 iframeの件でご質問申し上げます。 iframe内に別ページで作成しました。 メニューページを表示させています。 (別ページ作成したcssmenuを丸投げしている感じです。 <iframe src="css_tatoeba.html"frameborder="0" height="40" scrolling="no" width="554"></iframe> こんな感じです。) 別ページでリンクを貼り親ページで試してみるとiframe内にリンク先が 一部表示されてしまいます。(レイアウト崩れのような感じで) iframe内ではなく、新たなページに表示させたいのですがどうすればよろしいのでしょうか? 色々試したのですが上手くいきません。 教えて頂ければ幸いです。

    • ベストアンサー
    • HTML
  • <iframe>内にHTMLをランダム表示するには?続きです。

    先日の<iframe>内にHTMLをランダム表示するには?の続きなのですが、 http://questionbox.msn.co.jp/qa2962976.htmlの疑問は 皆様のお力で解決しました。 誠にありがとうございました。 もう一つ教えて頂きたいことがあるのですが、 かなりの素人なので説明不足など分かりづらいところが多々あると思いますが、 何卒宜しくお願い致します。 同じhtmlに複数のiframeを配置し、 各iframeをランダムにしたいのです。 その際、各iframeは別々のフォルダーに収納されているhtmlを 表示するようにしたいです。 例えば、同じhtmlに iframe1、iframe2、iframe3があるとし、 01、02、03という3つのフォルダーの中に 01.html、02.html、03.htmlがそれぞれ収納されているとした場合、 iframe1は01のフォルダーの中のhtmlをランダムで表示し、 iframe2は02のフォルダーの中のhtmlをランダムで、 iframe3は03のフォルダーの中のhtmlをランダムで、 といったランダム表示にしたいです。 あまりの素人なので全く分かりませんので、 大変申し訳ありませんが、 多少いじってコピペするくらいまで完成されたソースを教えて頂けますでしょうか? 宜しくお願い致します。 ------------------------------------------------------------------------- 以下のソースは、 3つのiframeに同じフォルダー内のhtmlをランダムで表示させることができたソースです。 教えてもらいました。 こちらは参考までに載せました。_ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <script type="text/javascript"> <!-- function RndmSubFlame(){ rlURL= new Array(); rlURL[0]="01.html" rlURL[1]="02.html" rlURL[2]="03.html" n=rlURL.length; x1=Math.floor(Math.random()*n); x2=Math.floor(Math.random()*n); x3=Math.floor(Math.random()*n); s01.location.href = rlURL[x1]; s02.location.href = rlURL[x2]; s03.location.href = rlURL[x3]; } //--> </script> </head> <body onload="RndmSubFlame()"> <table border="1" width="84%" height="87"> <tr> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="s01" scrolling="no"></iframe></td> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="s02" scrolling="no"></iframe></td> <td width="34%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="s03" scrolling="no"></iframe></td> </tr> </table> </body> </html> ------------------------------------------------------------------------- 以下のhtmlソースに書き加えてもらえると大変助かります。 何卒、宜しくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> <table border="1" width="45%" height="448"> <tr> <td width="46%" height="210"><iframe src="01/01.html" frameborder="0" width="100%" height="190" name="01" scrolling="no"></iframe></td> <td width="54%" height="442" rowspan="2"><iframe src="03/01.html" frameborder="0" width="100%" height="190" name="03" scrolling="no"></iframe></td> </tr> <tr> <td width="46%" height="226"><iframe src="02/01.html" frameborder="0" width="100%" height="190" name="02" scrolling="no"></iframe></td> </tr> </table> </body> </html>

  • iframeにリンクを貼る

    <iframe src="qqq.gif" height="150" width="356" align="left" frameborder="0" scrolling="no" marginheight="1" name="tv" > この部分はiframe表示です </iframe> にURLを指定してリンクを張りたいのですが、どうしたらいいですか?

  • Netscape6.02におけるiframeの%表示について

    インラインフレームを使って、下の例のように%指定で表示させたいのですが、 Netscape7では問題なく表示されるのですが、Netscape6.02では表示されません。 (表示されないというか、0%と解釈されるようです。) サイズを%ではなくピクセルで指定すれば問題ないのですが、画面サイズにかかわらずフルサイズで表示されるようにしたいため、パーセンテージで指定したいのです。 何かいい方法をご存じの方がいたら、教えて下さい。 無理な場合は、Netscapeのバージョン7未満では別のページにジャンプさせるという方法でもかまいません。 よろしくお願いします。 (例) <html> <head></head> <body> <table width="100%" height="100%"> <tr> <td width="100%" height="100%"> <iframe src="http://www.okweb.ne.jp/" width="100%" height="100%"></iframe> </td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • <iframe>内にHTMLをランダム表示するには?

    かなりの素人なので説明不足などで分かりづらいところが多々あると思いますが、 何卒宜しくお願い致します。 同じhtmlに複数のiframeがあるのですが、 その全てのiframeをランダムにしたいのですが、 あまりの素人なので全く分かりません。 申し訳ありませんが、 多少いじってコピペするくらいまでのソースを教えて頂けますでしょうか? 宜しくお願い致します。 iframe一つだけのランダムは以下のソースでできました。 <head> <script type="text/javascript"> <!-- function RndmSubFlame(){ rlURL= new Array(); rlURL[0]="01.html" rlURL[1]="02.html" rlURL[2]="03.html" n=rlURL.length; x=Math.floor(Math.random()*n); sub_flame.location.href = rlURL[x]; } //--> </script> </head> <body TopMargin=0 LeftMargin=0 RightMargin=0 BottomMargin=0 STYLE="overflow:auto;height:100%;" onLoad="RndmOpen()"> <script><!-- document.write("<iframe src=\""+riURL[x]+"\"></iframe>"); //--> </body> 以下のhtmlのようなページです。 できましたら、このソースに書き加え頂けますと 大変助かります。 宜しくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> <table border="1" width="84%" height="87"> <tr> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="01" scrolling="no"></iframe></td> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="02" scrolling="no"></iframe></td> <td width="34%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="03" scrolling="no"></iframe></td> </tr> </table> </body> </html>

  • あるサイトにiframeが効かない

    iframeを指定しても全体に表示されてしまう。urlをyahooなどに変えれば出来ているのでコーディングは大丈夫だと思います。 iframeが効かないサイト(ここでは書けませんが)があるのですが、なにか工夫をすれば、できる様になるのでしょうか。 それともiframeが効かないように意図的にサイトの方で調整されているものなのでしょうか。 宜しくお願いします。 コーディング例) <iframe src="http://www.yahoo.co.jp/" height=500 width=1000 frameborder=1 scrolling=auto></iframe>

    • ベストアンサー
    • HTML
  • IFRAMEをJAVASCRIPTで表示したい。

    現在自分のHP内で以下のようにIFRAMEを使用しているのですが、 <iframe src="http://www.xxxx.com/" height="500" width="500" scrolling="no" frameborder="0"></iframe> この表記を外部呼出しのJAVASCRIPTで行うことは可能でしょうか? またもし可能なら表記、コードも教えていただけると嬉しいです。 自分なりに色々調べてみたのですが、まだまだ知識が乏しく行き詰っております。 どうかよろしくお願いします。

  • <iframe>内をリロードするたびに入れ替えたい

    <iframe>で別に作ったページが表示されるようにしているのですが、 リロードするたびに<iframe>内のページがランダムに入れ替わり、 いろんなページが見られるようにしたいと思っています。 現在このようなソースでtest1.htmlを表示させているのですが、 ここにtest2.html、test3.html、test4.htmlが表示されるように するにはどうしたらいいでしょうか? <iframe src="../test1.html" name="sample" width="500" height="500" frameborder="0" scrolling=no> この部分はインラインフレームを使用しています。 </iframe>

    • ベストアンサー
    • HTML
  • IFRAMEの設定

    インラインフレームを現在使ってAというホームページの一部から、Bというホームページの一部を覗くようにしています。(以下) <NOLAYER><IFRAME name"sample" boeder="0" frameborder="0" marginheight="0" marginwidth="0" src="http://homepage2.nifty.com/sakuya_me/111.htm" width="430" height="134" scrolling="no"></IFRAME></NOLAYER> <ILAYER SRC="http://homepage2.nifty.com/sakuya_me/111.htm" width="419" height="134" scrolling="no"></ILAYER> この文だと、111.htmの画面左上角から見えるようになりますが、 それを、適当な見たい位置にずらしす事は可能でしょうか?(虫メガネのように) よろしくお願いします。

専門家に質問してみよう