cssを使ってiframeの属性対応 好きな場所に別ページを表示
インラインフレームを利用すれば、ブラウザの画面の好きな場所に小窓 (インラインフレーム) を開けて別のページを表示することができます。
【注意】
「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=<!-- .amazon { border: 0px; margin: 0px; overflow: hidden; width:120px; height:240px; } -->"text/css"></style></head><body><iframe class="amazon"src="アマゾンURL（「&」を「&」に変更）"></iframe></body></html>
なお、IE8までは「border:」の効果は無く「frameborder」の初期値が「1」のために1ピクセルの枠が表示されます。
結果は実際に利用しているので、このページの下を確認してみて下さい。
スポンサードリンク
オススメ書籍
HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。
