- 公開日： 最終更新日：
iframe（インラインフレーム）の使い方と例！注意点も紹介
Webページに外部コンテンツを埋め込む方法としてiframe（インラインフレーム）が使われます。ホームページ制作でも利用されることがありますが、作り方や注意点について気になる方も多いのではないでしょうか。
このページでは、iframeの書き方や使用例、注意点について解説します。iframeが表示されない原因についても触れているので、正しく活用するための参考にしてください。
目次
iframe（インラインフレーム）とは
iframe（インラインフレーム）とは、Webページ内に別のページやコンテンツを埋め込むためのHTML要素です。YouTube動画やGoogleマップなど、外部コンテンツを表示する際によく使用されます。
かつて、HTML4.01ではiframeは非推奨のタグとされていましたが、HTML5では正式にサポートされ、現在も利用可能です。
ただし、SEOの評価が低いことや、セキュリティリスクなどの理由から、使用には注意が必要です。近年では、Webサイトのユーザビリティ向上やセキュリティ対策の観点から、iframeを使わない方が良いと考えられる場面も増えています。
そのため、JavaScriptやoEmbedなどを使った他の埋め込み方法を検討することが推奨されることもあります。
iframeを利用するシーン
iframe（インラインフレーム）は、他のサイトのコンテンツをWebページ内に埋め込む際に利用されます。
例えば、クロスドメインの外部コンテンツを表示するケースでは、直接リンクを設置するとユーザーがサイトから離脱してしまう可能性がありますが、iframeを活用すればページ内でコンテンツを表示しつつ、スムーズな閲覧体験を提供できます。
また、Webサイトのキャプチャ画像を掲載する代わりに、iframeを使用すれば最新の状態を維持できるというメリットもあります。キャプチャ画像の場合、元サイトがリニューアルされると情報が古くなってしまうため、リアルタイムで内容を反映したい場合にiframeが役立ちます。
ただし、クロスドメインの制約により、すべてのサイトがiframeでの埋め込みを許可しているわけではありません。接続が拒否されましたというエラーが発生することもあるため、事前に埋め込み可能かどうか確認することが重要です。
iframeで使われる属性
ここでは、iframe（インラインフレーム）を使用する際に重要な属性を紹介します。
src属性
src属性は、iframe内に表示するコンテンツのURLを指定するための属性です。
<iframe src="https://example.com" width="600" height="400"></iframe>
この属性が正しく設定されていないと、iframeが正常に表示されない原因となることがあります。
width・height属性
widthやheight属性は、iframeの表示サイズを指定するためのものです。ピクセルや％の値を指定できます。
<iframe src="https://example.com" width="100%" height="500"></iframe>
％指定を活用することで、レスポンシブデザインにも対応しやすくなります。
allow属性
allow属性は、iframe内で許可する機能を制御するための属性です。たとえば、カメラやマイクの使用、全画面表示の許可などを設定できます。
<iframe src="https://example.com" allow="fullscreen; microphone"></iframe>
この属性を適切に設定することで、埋め込んだコンテンツの動作を制御でき、不要な機能を制限することでセキュリティリスクを軽減できます。
sandbox属性
sandbox属性は、iframe内のコンテンツに対する制限を設定し、セキュリティを強化するための重要な属性です。指定することで、スクリプトの実行やフォーム送信などを制限できます。
<iframe src="https://example.com" sandbox></iframe>
このように記述すると、iframe内のスクリプトが実行されなくなり、安全性が向上します。特定の機能を許可したい場合は、オプションを追加することも可能です。
<iframe src="https://example.com" sandbox="allow-scripts allow-same-origin"></iframe>
クロスドメインのコンテンツを埋め込む際は、iframeセキュリティリスク対策のためにsandbox属性の使用を検討することが推奨されます。
name属性
name属性は、iframeを識別するための名前を指定する際に使用します。特に、JavaScriptでiframeを操作する場合や、target属性と組み合わせてリンク先を制御する際に利用されます。
<iframe src="https://example.com" name="exampleFrame"></iframe>
この属性を活用すると、iframe内に別のリンク先を表示することが可能です。
<a href="https://another-example.com" target="exampleFrame">このリンクをクリック</a>
これにより、同じページ内でユーザーが選択した異なるリンク先をiframe内に表示させることが可能となり、ユーザーの利便性を向上させることができます。
iframeの書き方
ここでは、iframe（インラインフレーム）の基本的な書き方について解説します。
iframe内のHTMLを作成する
iframeの使用では、まずHTMLに<iframe>タグを記述し、src属性に埋め込むコンテンツのURLを指定します。
<iframe src="https://example.com/" width="600" height="400"></iframe>
このコードでは、https://example.com/のWebページを幅600px、高さ400pxのサイズで埋め込んでいます。
CSSでiframeのスタイルを調整する
デフォルトのiframeは枠線が表示されることがあります。これを非表示にしたり、デザインを調整したりする場合は、CSSを適用します。
iframe {
border: none;
display: block;
margin: 0 auto;
}
また、iframeの表示エリアを中央に配置したい場合は、display: block;に加えてmargin: auto;を指定すると、横幅を固定した状態で中央寄せが可能になります。
iframeをレスポンシブに対応する
スマートフォンやタブレットなどの画面サイズに応じてiframeのサイズを調整するには、widthを100%に設定し、高さをaspect-ratioで調整する方法が一般的です。
.responsive-iframe {
width: 100%;
aspect-ratio: 16 / 9;
}
または、高さを手動で指定する場合は以下のように position: relative;を活用することもできます。
<div class="iframe-container">
<iframe src="https://example.com" frameborder="0"></iframe>
</div>
<style>
.iframe-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9のアスペクト比 */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
このようにCSSを適用することで、デバイスの画面サイズに応じてiframeを適切に調整することができます。
iframeの使用例
ここでは、iframe（インラインフレーム）を活用した使用例を紹介します。
YouTube
YouTubeでは、動画ごとに埋め込み用のHTMLコードが用意されているため、取得方法を紹介します。
まず、埋め込みたいYouTube動画のページにアクセスして、共有ボタンをクリックします。
その後埋め込むボタンをクリックします。
表示された右側にある動画の埋め込みコードをコピーしてHTMLに埋め込めば完了です。また、開始位置を調整するためには、開始位置のチェックボックスをクリックすれば問題ありません。
ちなみに開始位置の時間は、埋め込むボタンを押したタイミングになります。
Googleマップ
次にホームページにGoogleマップを埋め込む方法を解説します。
まずGoogleマップで埋め込みたい場所を検索します。
左側に詳細情報が表示されているので、埋め込みたい場所が表示されていれば、共有ボタンをクリックします。
地図を埋め込むタブをクリックして、サイズを調整したら、HTMLをコピーするをクリックします。
コピーしたHTMLをホームページにペーストすれば完了です。
iframeの注意点
ここでは、iframe（インラインフレーム）を使用する際の重要な注意点を解説します。
SEO効果は弱い
iframeを使用すると、埋め込んだコンテンツの内容が検索エンジンに認識されにくくなります。
Googleなどの検索エンジンは、iframe内のテキストを直接クロールしないため、ページの評価に影響を与えにくいのが特徴です。そのため、検索エンジンに認識させたい重要なコンテンツは、通常のHTMLで記述する方が適切です。
HTML5で廃止された属性もある
HTML4で使用できたiframe関連の属性の一部は、HTML5では非推奨や廃止されました。
例えば、frameborderはHTML5では廃止され、代わりにCSSでborderを設定する方法が推奨されています。同様に、scrollingも非推奨となり、スクロールの可否はCSSのoverflowを使って制御することが推奨されます。
これらの仕様変更に対応しないと、最新のブラウザで正常に動作しないことがあるため注意が必要です。
セキュリティ対策が必須
iframeを使用すると、クロスサイトスクリプティングやクリックジャッキングといったセキュリティリスクが発生する可能性があります。
外部サイトを埋め込む場合、不正なスクリプトが実行されることを防ぐために、sandbox属性を設定すると安全性が向上します。また、X-Frame-Optionsヘッダーを適切に設定することで、悪意のあるサイトによるクリックジャッキングを防ぐことができます。
セキュリティリスクを考慮し、必要な対策を施すことが重要です。
iframeが表示されないことがある
iframeを使用しても、クロスドメインの制約やサーバーの設定によって正しく表示されないことがあります。
埋め込み先のサイトがX-Frame-OptionsをDENYやSAMEORIGINに設定している場合、iframe内での表示が制限されるため、埋め込みがブロックされることがあります。また、ブラウザの設定やセキュリティポリシーにより、iframe内のコンテンツがブロックされることもあります。
さらに、srcの指定ミスや、httpとhttpsのプロトコルの違いによって、正常に読み込まれないケースもあるため、動作確認を行うことが重要です。
iframeのまとめ
iframe（インラインフレーム）は、Webページ内に外部コンテンツを埋め込むための便利なHTML要素です。YouTubeやGoogleマップの埋め込みなど、さまざまな用途で活用できます。
しかし、SEOの評価が低いことやセキュリティリスク、クロスドメインの制約などのデメリットもあるため、使用する際は注意が必要です。特に、ホームページ制作においては、iframeが表示されないケースや、代替方法の検討も考慮することが大切です。
適切に活用すれば、ユーザー体験を向上させることができるため、使用する場面を見極めながら、適切な設定や対策を行うことが重要です。
