iframe（インラインフレーム）とは？使い方や高さの調整方法など徹底解説！

iframeとは、Webページ内に矩形の領域を設けて、その領域内にsrc属性で指定したURL（リンク先ページの内容）を読み込んで表示するHTMLタグのことです。
Inline Frameの略称で「インラインフレーム」「アイフレーム」と呼ばれます。
このiframeを不適切に扱えば、SEOへの影響が懸念されます。

一方、iframeを適切に扱えば、コンテンツの品質が保てます。
具体的には、body内で使用した場合はiFrame内のページは独立したページとして扱われることを理解して使ったり、headセクションに埋め込むことを避けて使います。
そうすれば、コンテンツの品質が保ちやすいので、検索順位の下落に繋がりづらいというわけです。

こうした良い状況にするために、iframeの特性を把握して、適切に扱いましょう。

この点踏まえて今回は、iframeの定義や使い方、高さ調整方法など中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

iframeとは？

iframeとは、Webページ内に矩形の領域を設けて、その領域内にsrc属性で指定したURL（リンク先ページの内容）を読み込んで表示するHTMLタグのことです。
このiframeは、Inline Frameの略称で「インラインフレーム」「アイフレーム」と呼ばれます。

＜iframe＞～＜/iframe＞タグの間には、iframeに対応してないブラウザ用に「この部分はインラインフレームを使用してます。」といったテキストを記述することが可能です。

iframeのCSS適用方法

iframeをCSS適用する場合、以下のような方法があります。

• iframeの枠デザインを調整
  iframeタグにstyle属性やclass属性、id属性を指定し、枠のタイプや大きさ等をCSSで調整する方法
• iframe内のコンテンツを調整
  src属性で指定したリンク先ページが読み込んでるCSSファイルを修正し、iframe内のコンテンツを調整する方法
  または、jQueryを活用し、iframeを設置してるページ（親ページ）から、iframe内のコンテンツを調整する方法

iframeのHTML5での使い方

iframeのHTML5での使い方は、基本以下のようになります。

記述例：

※参考：＜iframe＞－HTML5タグリファレンス

上記のよう、src属性でリンク先を指定し、iframe内に表示したいコンテンツを読み込ませます。
widthでiframeの横幅、heightでiframeの高さを指定しておきましょう。

また、HTML4.01からHTML5へ移行により、廃止・追加された属性もあるようです。

iframeの高さ自動調整について

iframeの高さを自動調整する方法として、以下のようなサイトで紹介されてます。

• iframeの高さを自動調整する | 0から目指すWebマスター
  iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。
• iframeで埋め込んだページの幅・高さを取得する – リズムのじかん
  
  CSSやjavascriptでスクロールを表示せず、埋め込んでない風に（いかにもページの一部ですよ風に）iframeを表示する。

iframeタグのsrc属性について

iframeタグは、src属性を使いインラインフレーム内にコンテンツを読み込ませる方法が一般的です。

そのため、iframeタグを使用する際は、読み込ませたいコンテンツのリンク先を指定するsrc属性を合わせて記述する必要があると認識しておいた方がよいでしょう。

iframeのスクロールバーについて

iframeのスクロールバーを調整するには、scrolling属性を使います。
scrolling属性により、iframeのスクロールバーの表示・非表示を調整できますが、HTML4.01からHTML5へ移行により廃止されたタグとされてます。

記述例：

このように、scrolling=”no”で非表示、scrolling=”yes”で表示、scrolling=”auto”で必要に応じてiframeが表示されます。

ちなみに、Googleクロムブラウザでscrolling属性が効かないため、src属性で指定したリンク先ページのCSSに、以下のように「overflow-y: hidden;」を記述するとiframeのスクロールバーを非表示にすることが出来るようです。

記述例：

※参考：iframeの右スクロールバーを消す方法

jquery・javascriptでiframeを操作する方法

JavaScript用のライブラリ「jquery」でiframeを操作する方法が、以下のようなサイトで紹介されてます。

• jQuery で iframe 内の要素にアクセス ： iframe 内を書き換え – 実験室 – ぐたり
  jqueryを活用して、iframe内の要素が切り替わるデモや、実際のソースコードを紹介してるのでとてもわかりやすいです。
• iframeの親から子、子から親の操作をする
  親ページ内からiframe内を操作したり、逆にiframe内から親ページを操作する方法を、実際のソースとデモで操作体験することができます。

iframeとtarget属性について

target属性・name属性・id属性の属性値を一致させ、aタグで指定したリンク先の内容にiframe内を変更することが可能です。

記述例：

※参考：HTMLタグ/フレームタグ/インラインフレームを使用した時のリンクの設定方法 – TAG index

iframeのサンプルについて

iframeのサンプルが、以下のようなサイトで紹介されてます。

• ほんっとにはじめてのHTML5とCSS3：[63] インライン・フレームで 他のHTMLファイルを組み込もう ＜iframe＞
  HTMLソースと動作を確認できるわかりやすいiframeのサンプルサイトです。
• インラインフレーム作成ツール
  インラインフレームの大きさや枠線、スクロールバー、余白、フレーム名などを設定し、サンプルを見ながら、実際のソースコードまで取得できる便利なツールです。

iframeのSEO効果について

iframeによるSEO効果はほぼ期待できないでしょう。
なぜかというと、「iframeで読み込まれたコンテンツ」が、コンテンツの一部として評価されないからです。

また、headタグ内にiframeタグを埋め込めば、一部のSEO効果を失う可能性が高まります。
例えば、iframeタグをheadタグ内のcanonicalタグの前に記述すれば、canonicalタグの内容が無視されます。
これは、iframeタグ以降がbodyタグの要素として認識されてしまうためです。

そうなれば、URLの正規化に支障が出るので、被リンクが分散したり、重複コンテンツとなってGoogleから評価されづらくなります。
結果的に、SEO効果を失うというわけです。
こうした状況を回避するためにも、iframeタグのマークアップ位置に気を配りながら、SEO対策を進めることが重要となります。

まとめ：iframeの特性を把握して、適切に扱おう

iframeで読み込む前に、テキストや画像で直接コンテンツとして組み込めないか検討しましょう。

そうして、出来るだけiframeを使わないようにして、Googleに評価されやすいコンテンツを作成することが、SEO対策を進めるためのポイントとなります。