iframeとは何か？HTML４とHTML５での違いと、使用上の注意点を解説
iframeとは
iframeとは、Webページ内に矩形の領域を設け、入れ子としてURL（別のHTML）を読み込んで表示できるHTMLタグのことです。
iframeはニュースサイトの中に閲覧者のアクセス履歴に合わせた広告を表示するなど、HTMLに欠かせないタグの１つとして利用されています。
HTML４の時代では、コンピューターウィルスの被害が拡大し、フィッシングサイトへの誘導やコンピューターウィルスへの感染に使われたこともあるため、iframeは感染源の１つとして非推奨となったこともありました。
HTMLのバージョン５（HTML５）の現代では、利便性の高さから再度iframeが注目を集めていますが、SEOへの影響としてGoogleなどの検索エンジンから除外されることもあり、使い方に注意が必要なタグです。
基本的なiframeタグの使い方
iframeは、HTMLの文書内に別のHTMLを入れ子で配置して使用します。
このような入れ子のことをインラインフレーム（Inline Frame）と呼び、src属性と組み合わせて使用します。
また、入れ子で表示するHTMLサイズの指定、枠線の太さ、マージンなどを指定したスタイルシートの呼び出しや、id属性、class属性の指定も行います。
記述例
<iframe src="test.html" id="page-title" class="class1"></iframe>HTML４とHTML５の相違点
iframeでは、HTMLの以前のバージョン（HTML４）から現在のバージョン（HTML５）に変わったことで、使用できる属性が変更されています。
scrollingなどの属性が廃止され、新しい属性が追加されているため、以前のHTMLを改修する場合に注意が必要です。代表的なものとしては以下の通りとなります。
HTML５ではサイズ指定はピクセル単位のみ
HTML４ではサイズ指定にパーセント指定が行えましたが、HTML５ではサイズの指定はピクセル単位でなければいけません。
HTML５のiframeタグでサイズ指定にパーセント指定を使用すると無視されるため、100%を指定したにもかかわらずデフォルトの150ピクセルで表示されるといったことがあります。
記述例
<iframe src="test.html" width="600px" height="400px></iframe>スクロールバーの扱い方
HTML４までは、iframeタグにてスクロールバーの表示をコントロールするscrolling属性が使用できましたが、HTML５ではscrolling属性が廃止されています。
iframeで作る枠と表示するHTMLを同じサイズにすることで、１つのHTMLのように表示させることができますが、表示する枠に対してHTMLが大きい場合はWebブラウザの仕様からスクロールバーが表示されてしまいます。
スクロールバーの表示が不要な場合は、HTML５ではsrc属性で指定したリンク先ページのスタイルシートに「overflow-y: hidden;」を記述することで、iframeのスクロールバーを非表示にすることができます。
記述例
.example {
overflow-y: hidden; /*縦方向はスクロール不可*/
overflow-x: scroll; /*横方向はスクロール可*/
}
なお、HTML４で使用されていたscrolling属性による表示、非表示の設定がHTML５で残っていたとしてもエラーが発生するようなことはありませんが、設定自体は無効となるため注意が必要です。
iframeの便利な使い方
iframeではHTMLによるテキストや画像イメージを埋め込むだけではなく、Webブラウザ上で表示可能な動画ファイルやPDFといった様々なコンテンツの表示にも利用できます。
入れ子として表示させるHTMLを作成するのは大変ですが、PDFファイルであればWordといった文書作成ソフトから容易に作成できるため、作成コストの削減も見込めます。
動画ファイルやPDFを埋め込む方法としては、HTMLと同様にsrc属性に埋め込みたいファイルを指定します。なお、動画ファイルの埋め込みとして、HTML５ではvideoタグを使用した方がより複雑な機能を持たせた状態で動画を埋め込むことができるようになりますのでvideoタグを使用することをお勧めします。
iframeを活用する際の注意点
iframeは入れ子としてフレームを作れる便利なタグですが、Webサイト上の検索順位で上位を目指すSEOとしては効果が期待できないデメリットもあるため注意が必要です。
iframeで読み込まれたコンテンツが、コンテンツの一部として評価されないため、URLの正規化への支障や重複コンテンツと判断され、Googleからの評価が下がってしまうことに繋がります。
そのため、SEOとしての効果を重要視するコンテンツには、iframeタグは多用しないことをお勧めします。