質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

11619閲覧

iframeを縮小してセンタリング表示する

q-fukutomo

総合スコア53

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/03/25 18:41

編集2022/01/12 10:55

外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
CSSで中央配置(センターリング)する方法
を参考に画面中央に<iframe>を縮小して表示しようとしているのですが、上手くいきません。

表示したい幅は645px, 高さは800px

<iframe>で表示する元のページは幅がブラウザサイズによって可変(但しmin-width:655px;), 高さは2200pxです

縦のスクロールはして問題ないのですが、横のスクロールはしないように幅を調整する方法を教えていただきたいです。
よろしくお願いします。

-追記-
transform:scale(0.5);と記述したところ<iframe>のフレーム枠の幅が0.5倍になってしまいます

現在のコード
HTML

lang

1<body> 2 <div class="center content"> 3 <iframe id="ifrm" src="http://hogehoge.com/"> 4 <a href="http://hogehoge.com/">http://hogehoge.com/</a> 5 </iframe> 6 </div> 7</body>

CSS

lang

1body{ 2 min-width: 700px; 3 padding: 0; 4 margin: 0; 5 text-align: center; 6} 7.center{ 8 margin: 0 auto; 9 text-align: left; 10} 11.content{ 12 width: 645px; 13 margin: 15px auto 0 auto; 14} 15#ifrm{ 16 width: 645px; 17 height: 800px; 18 margin: 0; 19 padding: 0; 20 border: none; 21 // <iframe>の中身を横幅半分にして表示したい 22 transform:scale(0.5); 23 -o-transform:scale(0.5); 24 -webkit-transform:scale(0.5); 25 -moz-transform:scale(0.5); 26 -ms-transform:scale(0.5); 27 // 縮小の基準点を中央一番上(645/2≒323)に 28 transform-origin:323 0; 29 -o-transform-origin:323 0; 30 -webkit-transform-origin:323 0; 31 -moz-transform-origin:323 0; 32 -ms-transform-origin:323 0; 33}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

まず大前提としてiframe内部に対してCSSを定義することは出来ません。

transform:scale(0.5);と記述したところ<iframe>のフレーム枠の幅が0.5倍になってしまいます

transformは指定した本体を変形するために使います。

ではどのようにすればiframe内部をいじるかと言うと、
JavaScriptを使って制御する方法が挙げられます。

素のJavaScriptでも良いですが簡単なのでjQueryというライブラリーを使った書き方を紹介します。

---HTML※ヘッダー内に

lang

1<!-- //jQueryの読み込み ※すでに読み込んでる場合は必要ない --> 2<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 3 4<!--//jQueryを使ってiframe内のbodyにtransform:scale(0.5);を指定する。 5<script type="text/javascript"> 6$(function(){ 7 $(document).load(function(){ 8 // #ifrmを選択→中身にアクセス→bodyタグを探す→CSSを追加する 9 $("#ifrm").contents().find("body").css("transform","scale(0.5)"); 10 }); 11}); 12</script>

しかし、JavaScriptを使った場合でも”親ページと同じドメインのiframe”しか操作は出来ません。
これはJavaScriptのセキュリティ上の仕様です。

もし、クロスドメイン(他のドメインのサイト)を弄りたいというのであれば簡単な方法では解決しません。

投稿2015/03/29 07:03

編集2015/03/29 07:17
infernoayase

総合スコア41

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問