<IFRAME>インラインフレームを作成する

<IFRAME>(Inline Frame)では、<FRAMESET>のようにウィンドウを分割する形式のフレームではなく、ウィンドウの中に別のページを読み込んで表示される「インラインフレーム」を作成できます。<FRAMESET>とは違い、ページ内に別のページを読み込みますので、より自由なレイアウトにすることが可能です。

<IFRAME>は<BODY>内に記述します。 フレーム内にはsrc属性で指定された内容が表示されます。

<IFRAME>~</IFRAME>内には、このフレーム対応していないブラウザや、フレームが表示しなかった場合に表示されたい内容を記述します。 ここで記述したものは、インラインフレームが表示されなかった場合に代替として表示されます。

またalign属性を使用する事でインラインフレームの表示位置を調整することもできます。 他にもname属性でフレームに名前を付け、その名前をtarget属性で指定すれば、下記の表示例のようにリンク(<A>タグ)を使って複数の内容を読み込むこともできます。 XHTMLの場合は、名前を指定する際ID属性を使用して下さい。

なお<IFRAME>は<!DOCTYPE>が「Transitional」の場合でも使用することができます。 Netscape Navigator4.xの場合は<ILAYER>タグなどを使用する事で、同様の表示ができるようです。

使用した時の例

<a href="iframe-sample2.htm" target="sample">リンク1</a><br />
<a href="iframe-sample3.htm" target="sample">リンク2</a><br />
<iframe src="iframe-sample.htm" name="sample" width="300" height="150">
インラインフレームの表示例です。
</iframe>

ブラウザ上の表示例

リンク1
リンク2

書式

  • <iframe src="URL" name="フレーム名">~</iframe> ・・・・・・ インラインフレームの表示

url:表示内容のurl、フレーム名:任意の名前

属性

src="url" インラインフレームに表示するページの指定
name="" 任意のフレーム名を指定
width="" インラインフレームの幅
height="" インラインフレームの高さ
align="left" インラインフレームの位置を指定
  • left・・・フレームを左揃え(初期値)
  • center・・・中央揃え
  • right・・・フレームを右揃え
frameborder="" 1またはyesで境界線を表示、0またはnoで非表示
scrolling="auto" スクロールバーの有無
  • yes・・・表示
  • no・・・非表示
  • auto・・・必要に応じて表示(初期値)
marginwidth="" フレーム枠の左右に余白
marginheight="" フレーム枠の上下に余白

対応ブラウザなどのデータ

形式 <iframe src="">~</iframe> カテゴリ フローコンテンツ / フレージングコンテンツ / エンベデッドコンテンツ / インタラクティブコンテンツ / パルパブルコンテンツ
親要素 子要素にエンベデッドコンテンツを含める要素 子要素
開始タグ 必須 終了タグ 必須
分類 インライン要素
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

frameborder、marginheight、marginwidth、scrolling、longdesc属性がHTML5では廃止。