iframeとは何か?HTML4とHTML5での違いと、使用上の注意点を解説

2022年12月5日

iframeとは

iframeとは、Webページ内に矩形の領域を設け、入れ子としてURL(別のHTML)を読み込んで表示できるHTMLタグのことです。

iframeはニュースサイトの中に閲覧者のアクセス履歴に合わせた広告を表示するなど、HTMLに欠かせないタグの1つとして利用されています。
HTML4の時代では、コンピューターウィルスの被害が拡大し、フィッシングサイトへの誘導やコンピューターウィルスへの感染に使われたこともあるため、iframeは感染源の1つとして非推奨となったこともありました。

HTMLのバージョン5(HTML5)の現代では、利便性の高さから再度iframeが注目を集めていますが、SEOへの影響としてGoogleなどの検索エンジンから除外されることもあり、使い方に注意が必要なタグです。

基本的なiframeタグの使い方

iframeは、HTMLの文書内に別のHTMLを入れ子で配置して使用します。
このような入れ子のことをインラインフレーム(Inline Frame)と呼び、src属性と組み合わせて使用します。
また、入れ子で表示するHTMLサイズの指定、枠線の太さ、マージンなどを指定したスタイルシートの呼び出しや、id属性、class属性の指定も行います。

記述例

<iframe src="test.html" id="page-title" class="class1"></iframe>

HTML4とHTML5の相違点

iframeでは、HTMLの以前のバージョン(HTML4)から現在のバージョン(HTML5)に変わったことで、使用できる属性が変更されています。
scrollingなどの属性が廃止され、新しい属性が追加されているため、以前のHTMLを改修する場合に注意が必要です。代表的なものとしては以下の通りとなります。

HTML5ではサイズ指定はピクセル単位のみ

HTML4ではサイズ指定にパーセント指定が行えましたが、HTML5ではサイズの指定はピクセル単位でなければいけません。
HTML5のiframeタグでサイズ指定にパーセント指定を使用すると無視されるため、100%を指定したにもかかわらずデフォルトの150ピクセルで表示されるといったことがあります。

記述例

<iframe src="test.html" width="600px" height="400px></iframe>

スクロールバーの扱い方

HTML4までは、iframeタグにてスクロールバーの表示をコントロールするscrolling属性が使用できましたが、HTML5ではscrolling属性が廃止されています。
iframeで作る枠と表示するHTMLを同じサイズにすることで、1つのHTMLのように表示させることができますが、表示する枠に対してHTMLが大きい場合はWebブラウザの仕様からスクロールバーが表示されてしまいます。
スクロールバーの表示が不要な場合は、HTML5ではsrc属性で指定したリンク先ページのスタイルシートに「overflow-y: hidden;」を記述することで、iframeのスクロールバーを非表示にすることができます。

記述例

.example {
 overflow-y: hidden; /*縦方向はスクロール不可*/
 overflow-x: scroll; /*横方向はスクロール可*/
}

なお、HTML4で使用されていたscrolling属性による表示、非表示の設定がHTML5で残っていたとしてもエラーが発生するようなことはありませんが、設定自体は無効となるため注意が必要です。

iframeの便利な使い方

iframeではHTMLによるテキストや画像イメージを埋め込むだけではなく、Webブラウザ上で表示可能な動画ファイルやPDFといった様々なコンテンツの表示にも利用できます。
入れ子として表示させるHTMLを作成するのは大変ですが、PDFファイルであればWordといった文書作成ソフトから容易に作成できるため、作成コストの削減も見込めます。
動画ファイルやPDFを埋め込む方法としては、HTMLと同様にsrc属性に埋め込みたいファイルを指定します。なお、動画ファイルの埋め込みとして、HTML5ではvideoタグを使用した方がより複雑な機能を持たせた状態で動画を埋め込むことができるようになりますのでvideoタグを使用することをお勧めします。

iframeを活用する際の注意点

iframeは入れ子としてフレームを作れる便利なタグですが、Webサイト上の検索順位で上位を目指すSEOとしては効果が期待できないデメリットもあるため注意が必要です。
iframeで読み込まれたコンテンツが、コンテンツの一部として評価されないため、URLの正規化への支障や重複コンテンツと判断され、Googleからの評価が下がってしまうことに繋がります。
そのため、SEOとしての効果を重要視するコンテンツには、iframeタグは多用しないことをお勧めします。

参考

技術HTML

Posted by promapedia