インラインフレームを利用すれば、ブラウザの画面の好きな場所に小窓 (インラインフレーム) を開けて別のページを表示することができます。

【注意】
「HTML」の規格を策定している World Wide Web Consortium（W3C）によると、「HTML5」ではHTML4.01からiframe要素の指定できる属性が変更されました。


廃止 
frameborder/marginheight/marginwidth/scrolling/longdesc 
追加 
srcdoc/sandbox/seamless 

インラインフレームを利用する

古いブラウザによっては対応していないブラウザがあるため、実際のインラインフレームの表示を確認してください。

例：

このHTML文書は次のようになっています。

iframe.html

<html>
<body>

<iframe src="./iframe2.html" name="frame4" width="325" height="60" scrolling="yes" marginwidth="0" frameborder="1"></iframe>

</body>
</html>

iframe2.html

<html>
<body>

<pre>
　星の数ほどあるWeb ページの中でこのページに
　　　　　来てくれたことを感謝します

　　　一生懸命頑張って更新しています
　　　　見苦しさは勘弁してください
　　　　　　　
出来る限り多くの技法を提供したいと考えています
　　　最新の技法も勉強しては書いていきます
</pre>

</body>
</html>

指定できる属性は次のようになっています。

属性	説明
src	ファイルのURL
name	フレーム名（インフレーム内に他のファイルを読み込むことができるようになります。）
width	フレームの横幅（px, %）
height	フレームの高さ（px, %）
marginwidth	フレーム内の左右のマージン（px）
marginheight	フレーム内の上下のマージン（px）
scrolling	auto（自動、標準）、yes（表示）、no（非表示）
frameborder	0,1（フレームの枠の表示・非表示）
align	left,center,right（テキストの回りこみ）
srcdoc [追加]	フレーム表示する内容を属性値として指定
seamless [追加]	フレーム内のコンテンツを親ページの一部のように表示
sandbox [追加]	フレーム内のコンテンツの表示に制限を加える

スタイルシート(CSS)で廃止になったiframeの属性を満たすには

amazonのアフェリエイトなどをしている場合は次のようなタグを貼りつけていると思います。

<iframe src="アマゾンURL（「&」文字多数）" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>

ただし、HTML5では「scrolling="no"」「marginwidth="0"」「marginheight="0"」などは廃止されておりスタイルシートで対応する必要があります。

<!DOCTYPE html>
<html lang="en">
<head>
<title>amazonのiframeをcssで対応する</title>
<style type="text/css">
<!--
.amazon {
   border: 0px;
   margin: 0px;
   overflow: hidden;
   width:120px;
   height:240px;
}
-->
</style>
</head>
<body>

<iframe class="amazon" src="アマゾンURL（「&」を「&amp;」に変更）"></iframe>

</body>
</html>

なお、IE8までは「border:」の効果は無く「frameborder」の初期値が「1」のために1ピクセルの枠が表示されます。

結果は実際に利用しているので、このページの下を確認してみて下さい。

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

ページのトップへ戻る