インラインフレームとは、別のHTML文書等をインラインで埋め込むものです。
インターネットエクスプローラでは3.0で既に実装されておりましたが、ネットスケープでは4.x以前ではサポートされておりませんでした。
最近では、ページの中に枠が表示され、その中に文書が表示されると言うページも見かけますが、これはインラインフレームで実現しているものが多いようです。
インラインフレームは、二つの要素が使えます。
一つは、<iframe>要素、もう一つは<object>要素です。
どちらも良く似ておりますが、全く異なる要素です。
<iframe>要素の要素名は文字通りinline frame(インラインフレーム)の略です。
<iframe>要素を利用するには、HTML 4.0またはXHTML 1.0のトランジッショナル文書型かフレームセット文書型を使わなければなりません。
<iframe>要素の記述方法は以下のようになります。
<iframe width="横幅" height="高さ" src="埋め込む文書のURL" id="フレームへのID" name="フレームへのID">(インラインフレームが表示出来ない環境での代替コンテンツ)</iframe>
このとき、id属性とname属性には同じ値を指定しておきます。
<iframe>要素の内容としては、インラインフレームに対応していない環境(ネットスケープ 4.x以前や携帯電話など)で代わりの情報となるものを記述します。
インラインフレームは通常のフレーム同様、フレーム外のアンカーから埋め込んでいる文書を変更したり、逆に埋め込んでいる文書からフレーム外の文書を変更する事が出来ます。
また、インラインフレーム内のアンカーは、通常、当該インラインフレーム内のみに影響を与えます。
具体的には、フレーム外からは以下のようにtarget属性の値にてインラインフレームのIDを指定する事で、当該インラインフレームで埋め込んでいる文書を差し替える事が出来ます。
<a href="新たに埋め込みたい文書のURL" target="埋め込み先のインラインフレームのID">アンカー文字列</a>
一方、<object>要素は、HTML文書に限らず画像でも動画でも音声でも、ウェブで扱えるリソースであれば何でも埋め込める要素です。
こちらは、ストリクトな文書型でも問題なく利用する事が出来ます。
<object>要素でHTML文書を埋め込む場合の記述方法は以下のようになります。
<object width="横幅" height="高さ" type="text/html" data="埋め込む文書のURL">(インラインフレームが表示出来ない環境での代替コンテンツ)</object>
<object>要素の内容としては、指定されたリソースの埋め込みに対応していない環境(ネットスケープ 4.x以前や携帯電話など)で代わりの情報となるものを記述します。
<object>要素で埋め込んだHTML文書は、<iframe>要素とは違い、要素外のアンカーから埋め込んでいる文書を変更する事は出来ません。
但し、<object>要素で埋め込んだ文書にあるアンカーは、<iframe>要素同様、当該インラインフレーム内のみに影響を与えます。
インラインフレームも、通常のフレーム同様、CSSを用いる事で擬似的に表現する事が可能です。
具体的には、インラインフレーム風に表現したいブロックに、以下のスタイルを当てれば良いのです。
セレクタ{width:横幅;height:高さ;overflow: auto;border: solid 1px #ccc;
こうする事で、このスタイルを当てたセレクタに相当する要素は、指定された幅と高さの領域に表示される事になります。
特に、
個人的には、視覚効果だけならCSSに依る擬似インラインフレームが一番無難だと思います。
など、利点が多いからです。
但し、本当にフレーム外部からtarget属性で文書を差替えたいと言うのであれば、<iframe>要素を使うしかないでしょう。
その場合でも、インラインフレームに対応していない環境の事を常に考えて使うべきなのは言うまでもありません。
堀北真希うさぎがソフトコンタクトを着けているイラストとその場面を含む仮想TVCM動画〜平成元年〜平成 3年頃のボシュロム製品のCM風に〜
