iframe（インラインフレーム）とは～CSS適用とHTML5での使い方・高さ自動調整について

iframe（インラインフレーム）を適切に使い、HTMLやCSS上で高さ等調整しながら、コンテンツ作成することが可能です。

今回は、iframeのCSS適用、iframeのHTML5での使い方、iframeの高さ自動調整について中心に解説したいと思います。

iframeとは

iframeとは、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タグリファレンス

＜iframe src=”sample.html” width=”500″ height=”100″＞ この部分はインラインフレームを使用してます。 ＜/iframe＞

上記のよう、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へ移行により廃止されたタグとされてます。
※参考：波乱のiframe – BaraのWebサイト

＜iframe src=”sample.html” width=”500″ height=”100″ scrolling=”no”＞ この部分はインラインフレームを使用してます。 ＜/iframe＞

しかし、Googleクロムブラウザでscrolling属性が効かないため、src属性で指定したリンク先ページのCSSに以下のような記述をするとiframeのスクロールバーを非表示にすることが出来るようです。
※参考：iframeの右スクロールバーを消す方法

html { overflow-y: hidden; }

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

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

・jQuery で iframe 内の要素にアクセス ： iframe 内を書き換え – 実験室 – ぐたり
jqueryを活用して、iframe内の要素が切り替わるデモや、実際のソースコードを紹介してるのでとてもわかりやすいです。

・・iframeの親から子、子から親の操作をする
親ページ内からiframe内を操作したり、逆にiframe内から親ページを操作する方法を、実際のソースとデモで操作体験することができます。

iframeとtarget属性について

target属性・name属性・id属性の属性値を一致させ、aタグで指定したリンク先の内容にiframe内を変更することが可能です。
※参考：HTMLタグ/フレームタグ/インラインフレームを使用した時のリンクの設定方法 – TAG index

＜a href=”sample01.html” target=”demo01″＞デモ01のコンテンツ＜/a＞ ＜a href=”sample02.html” target=”demo01″＞デモ02のコンテンツ＜/a＞ ＜iframe src=”sample01.html” name=”demo01″ id=”demo01″＞上記アンカーテキストをクリックすることで、このiframe内がデモ01もしくはデモ02のコンテンツに切り替わります＜/iframe＞

facebookとiframeについて

iframeで検索すると、Facebookという複合キーワードで良く検索されてることがわかります。

検索結果を見ると、「iframe対応するためのfacebookページの作り方」「iframe版のLikebox」「iframe対応したfacebookページのスクロールバーを消す方法」といったコンテンツが多くみられます。

これらのコンテンツを参考に、facebookとiframeについての悩みを解決できる糸口が見るかるかもしれません。

iframeのサンプルについて

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

・ほんっとにはじめてのHTML5とCSS3：[63] インライン・フレームで 他のHTMLファイルを組み込もう ＜iframe＞
HTMLソースと動作を確認できるわかりやすいiframeのサンプルサイトです。

・インラインフレーム作成ツール
インラインフレームの大きさや枠線、スクロールバー、余白、フレーム名などを設定し、サンプルを見ながら、実際のソースコードまで取得できる便利なツールです。

iframeのSEO効果について

iframeのSEO効果はほぼ期待できないでしょう。
※参考：iframeで表示したページはコンテンツの一部になるのか

有名なSEO情報サイトでは、「iframeで読み込まれたコンテンツ」は、コンテンツの一部として評価されないことが言及されてます。

まとめ

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

評価されやすいコンテンツにし、SEO対策しながら、順位上昇を目指すことが重要です。