IFRAMEを使いこなす

ウェブのページを作る際に他所のページを組み込む方法としては昔からiframe(インラインフレーム)タグを使うのが普通。iframeはひっくり返す以外はそんなにクセがあるわけではないので普通にできると思うけど、某掲示板で悩んでる人がいたので説明用に臨時でこのページを作成。そしたら意外と見に来る人の多いページになったので再整備して残している。

シンプルなiframeの例
ズレた位置にiframeを表示させる
iframeの中のコンテンツの任意の位置を表示する
iframeの中のコンテンツを拡大・縮小させる
iframeを回転させる
iframeの中のコンテンツを左右反転させる
iframeの中のコンテンツを半透明化させる

1. シンプルなiframeの例

先ずはスタイル無し、HTMLタグだけでiframeを入れる。敢えてスクロールバー表示指定も付ける。

(下のコードは表示の都合でiframeタグが途中で改行されているように見えるがタグの途中で改行してはいけない。<iframe hogehoge>の部分は1行で書く。読み飛ばす人がいるのでしつこく書く。HTMLタグは "<" から ">" の途中で改行してはいけない。<hoge>example</hoge>のexampleの部分はいくらでも改行して良い)

1 2	<iframe seamless src="https://denwa.intaa.net/" width="500" height="200" scrolling="yes"> </iframe>

表示結果

2. ズレた位置にiframeを表示させる

次はインラインスタイルを使ってインラインフレームを組み込む範囲や位置を指定。重なり合わせもインラインフレームの側を最前面とします。本来表示される筈の位置から右に50ドット・下に50ドットずらしてみた。
(下のコードは見易いようにスタイルシート部分を改行しているが、実際にタグを書くときは途中で改行してはいけない。下のコードだと<div hogehoge>や<iframe hogehoge>の部分は改行無しで書かなければならない。)

<div style="
	width:500px;
	height:200px;
	background:#fff;
	text-align:left;
	color:#000;
	">
    <iframe seamless src="https://denwa.intaa.net/" width="500" height="200" scrolling="no"
     style="
	position:relative;
	top:50px;
	left:50px;
	overflow:hidden;
	z-index:10;
	">
    </iframe>
</div>

表示結果

本来の位置(参考)

3. iframeの中のコンテンツの任意の位置を表示する

インラインフレーム自体の位置は変えずにインラインフレームの中のコンテンツの位置を任意に指定して組み込む。
下の例ではインラインフレームの中のページの上から100px; 左から100px;を指定したのと同じになる。実際にはマイナスのマージン値を指定することで本来の表示エリアから左100px;上100px;分をはみ出させて表示しないようになっている。
(下のコードは見易いようにスタイルシート部分を改行しているが、実際にタグを書くときは途中で改行してはいけない。下のコードだと<div hogehoge>や<iframe hogehoge>の部分は改行無しで書かなければならない。)

<div style="
	width:600px;
	height:200px;
	margin:0;
	overflow:hidden;">
    <iframe seamless width="800px" height="800px" frameborder="0" scrolling="no"
     style="
	margin-left:-100px;
	margin-top:-100px;
	overflow:hidden;
	" src="https://denwa.intaa.net/">
    </iframe>
</div>

表示結果

4. iframeの中のコンテンツを拡大・縮小させる

インラインフレームの中のコンテンツを拡大・縮小して組み込む。
transform:scale(0.5,0.5)を使い縦横共に50%のサイズにするが、面倒でも主要ブラウザのベンダープレフィックス付きも指定する。-moz(mozilla系), -webkit(chrome,safari系), -o(opera系),-ms(internet explorer)。ちなみに中の写真の大きさ変わらないのは中の写真が可変サイズで指定されているから。その他は正しく縮小している。
(下のコードは見易いようにスタイルシート部分を改行しているが、実際にタグを書くときは途中で改行してはいけない。下のコードだと<div hogehoge>や<iframe hogehoge>の部分は改行無しで書かなければならない。)

<div style="
	width:1000px;
	height:200px;
	margin:0;
	overflow:hidden;
	">
    <iframe seamless allowfullscreen src="https://denwa.intaa.net/" scrolling="no"
     style="
	width:1000px;
	height:400px; 
	-moz-transform:scale(0.5,0.5);
	-webkit-transform:scale(0.5,0.5);
	-o-transform:scale(0.5,0.5);
	-ms-transform:scale(0.5,0.5);
	transform:scale(0.5,0.5); 
	overflow:hidden;
	position:relative;
	top:-50%;
	left:-25%;
	">
    </iframe>
</div>

表示結果

5. iframeを回転させる

上の縮小したものを回転させてみる。transform:rotate(15deg)とすると右に15度傾く。マイナス値指定で左に傾く。
(下のコードは見易いようにスタイルシート部分を改行しているが、実際にタグを書くときは途中で改行してはいけない。下のコードだと<div hogehoge>や<iframe hogehoge>の部分は改行無しで書かなければならない。)

<div style="
	width:1000px;
	height:200px;
	margin-top:150px;
	overflow:hidden;
	-moz-transform:rotate(15deg);
	-webkit-transform:rotate(15deg);
	-o-transform:rotate(15deg);
	-ms-transform:rotate(15deg);
	transform:rotate(15deg);
	">
    <iframe seamless allowfullscreen src="https://denwa.intaa.net/" scrolling="no"
     style="
	width:1000px;
	height:400px;
	-moz-transform:scale(0.5,0.5);
	-webkit-transform:scale(0.5,0.5);
	-o-transform:scale(0.5,0.5);
	-ms-transform:scale(0.5,0.5);
	transform:scale(0.5,0.5);
	overflow:hidden;
	position:relative;
	top:-50%;
	left:-25%;
	">
    </iframe>
</div>

表示結果

6. iframeの中のコンテンツを左右反転させる

今度は左右を反転させてみる。transform:scaleX(-1)で左右の反転となる。scaleY(-1)で上下反転となる。
(下のコードは見易いようにスタイルシート部分を改行しているが、実際にタグを書くときは途中で改行してはいけない。下のコードだと<div hogehoge>や<iframe hogehoge>の部分は改行無しで書かなければならない。)

<div style="
	width:1000px;
	height:200px;
	margin-left:-500px;
	overflow:hidden;
	-moz-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	-o-transform:scaleX(-1);
	-ms-transform:scaleX(-1);
	transform:scaleX(-1);
	">
    <iframe seamless allowfullscreen src="https://denwa.intaa.net/" scrolling="no"
     style="
	width:1000px;
	height:400px;
	-moz-transform:scale(0.5,0.5);
	-webkit-transform:scale(0.5,0.5);
	-o-transform:scale(0.5,0.5);
	-ms-transform:scale(0.5,0.5);
	transform:scale(0.5,0.5);
	overflow:hidden;
	position:relative;
	top:-50%;
	left:-25%;
	">
    </iframe>
</div>

表示結果

なお、反転の際は例えば左右反転なら反転対象の右辺を軸にパタンと本のページをめくるようにひっくり返す処理となるので元々の位置までマイナス値のmargin-leftなどで左に移動させる必要がある。上下反転の場合も下辺を軸に下側にひっくり返すのでマイナス値のmargin-topなどで上に移動させる必要がある。(反転ではここを知っておかないと途方に暮れる)
文字で書いても伝わらないので図にしてみた(下)。

7. iframeの中のコンテンツを半透明化させる

最後にインラインフレームを半透明化させる。基本的にはopacity:0.5;で半透明度50%になるが面倒でも主要ブラウザのベンダープレフィックス付きも指定する。さらにIE8以下は手間のかかる子なのでそれ用も追加。
(下のコードは見易いようにスタイルシート部分を改行しているが、実際にタグを書くときは途中で改行してはいけない。下のコードだと<div hogehoge>や<iframe hogehoge>の部分は改行無しで書かなければならない。)

<div style="
	background-image:url(/wp-content/uploads/2014/05/bg1.png);
	width:600px;
	height:338px;
	">
    <div style="
	width:1000px;
	height:200px;
	position:relative;
	top:69px;
	left:50px;
	overflow:hidden;
	">
        <iframe seamless allowfullscreen src="https://denwa.intaa.net/" scrolling="no"
         style="
    	    width:1000px;
	    height:400px;
	    -moz-transform:scale(0.5,0.5);
	    -webkit-transform:scale(0.5,0.5);
	    -o-transform:scale(0.5,0.5);
	    -ms-transform:scale(0.5,0.5);
	    transform:scale(0.5,0.5);
	    filter:alpha(opacity=50);
	    -ms-filter:alpha(opacity=50);
	    -moz-opacity:0.5;
	    -webkit-opacity:0.5;
	    -o-opacity:0.5;
	    opacity:0.5;
	    overflow:hidden;
	    position:relative;
	    top:-50%;
	    left:-25%;
	    ">
        </iframe>
    </div>
</div>

表示結果

このページではスタイルシートを全てインラインスタイルで記述しているが、HTMLヘッダでスタイルを指定しても別ファイルのスタイルシートでももちろん構わない。ただ、インラインフレーム使うのって例外的(限定的)なことが多いように思っているのでソースが汚らしくなってもインラインスタイルを使うかなと。

2016年12月3日: この記事の初稿公開から暫くしてからコード部分をSyntax Highlighterで表示するように変更したんだけど、初稿で意図した表示と大きく変わっていることに気付いたので弄った。ついでに記事自体も少し見易くした(つもり)。

がとらぼ