iframe要素 -- インラインフレーム

基本データ

iframe要素
文書型 適用 子要素 開始タグ 終了タグ 分類
Strict × 利用できません
Transitional ○ インライン要素 必須 必須 インライン要素
Frameset ○

属性

固有属性

src="URI"
Strict: × | Transitional: ○ | Frameset: ○
フレームに表示させる文書のURIを指定します。
name="フレーム名"
Strict: × | Transitional: ○ | Frameset: ○
フレーム名を指定します。a要素などでリンクするときにtarget属性でこのフレーム名を指定すると、リンク先の内容がこのフレーム内に表示されます。
longdesc="フレームの説明ページのURI"
Strict: × | Transitional: ○ | Frameset: ○
フレームの機能などを説明するページのURIを指定します。title属性での短い説明を補完するために利用できます。
scrolling="スクロールの制御"
Strict: × | Transitional: ○ | Frameset: ○
スクロールバーの表示を指定します。利用できる値は次のとおりです。
auto
必要なときにスクロールバーが表示されます。
yes
常にスクロールバーが表示されます。
no
スクロールバーを表示しません。フレームの内容が途切れてしまうと、残りの部分を表示できなくなります。
frameborder="枠線"
Strict: × | Transitional: ○ | Frameset: ○
フレームの枠線を表示するかしないかを指定します。利用できる値は次のとおりです。
1
隣接するフレームとの境界に枠線を表示します。
0
枠線を表示しません。ただし、隣接するframe要素にframeborder="1"が指定されていると、そのフレームとの境界線が表示されます。
marginwidth="左右の余白"
Strict: × | Transitional: ○ | Frameset: ○
フレームの内容の左右の余白をピクセル値で指定します。
marginheight="上下の余白"
Strict: × | Transitional: ○ | Frameset: ○
フレームの内容の上下の余白をピクセル値で指定します。
width="横幅"
Strict: × | Transitional: ○ | Frameset: ○
フレームの横幅を指定します。
height="縦幅"
Strict: × | Transitional: ○ | Frameset: ○
フレームの縦幅を指定します。
align="表示位置"
Strict: × | Transitional: ○ | Frameset: ○
インラインフレームの表示位置を指定します。利用できる値は次のとおりです。
bottom
下揃え
middle
中央揃え
top
上揃え
left
インラインフレームを文章の左に回りこませます
right
インラインフレームを文章の右に回りこませます

解説

HTML文書内にフレームを表示するための要素です。Transitional DTDとFrameset DTDで利用することができます。Strict DTDでは使えません。

src属性でインラインフレーム内に読み込むファイルのURIを指定します。name属性ではフレームに名前をつけることができ、a要素などでリンクするときにtarget属性でこのフレーム名を指定すると、リンク先の内容をフレーム内に表示することができます。また、title属性でフレームの説明をつけることができます。

フレームに対応していないブラウザは、iframe要素の中身を代わりに表示します。iframe要素の中身には代替文書などへのリンクを設けておきましょう。

<ul>
  <li><a href="sakura.jpg" target="view">
    <img src="sakura-s.jpg" alt="桜の写真"></a></li>
  <li><a href="ume.jpg" target="view">
    <img src="ume-s.jpg" alt="梅の写真"></a></li>
  <li><a href="tsubaki.jpg" target="view">
    <img src="tsubaki-s.jpg" alt="椿の写真"></a></li>
</ul>
<p>
  <iframe
    src="iframesamp.html" name="view"
    width="400" height="400"
    title="画像をクリックすると、このウィンドウに大きな写真を表示します">
  このページではインラインフレームを利用しています。
  フレームに対応したブラウザであれば、フレーム内に
  大きな写真が表示されます。
  </iframe>
</p>
  • 桜の写真
  • 桃の花の写真
  • ツツジの写真

object要素で埋め込み

object要素を使ってもHTML文書中に別のファイルを埋め込むことができます。ただし、object要素の場合はリンク先の内容をobject要素内に表示することはできません。

フレーム風のデザイン

ただフレーム風のデザインにするだけなら、別ファイルを用意してそれをiframe要素で読み込むといった面倒な作業をしなくても、CSSを書くだけで済みます。

.frame {
  border: 1px gray inset;
  overflow: auto;
  width: 200px;
  height: 100px;
}
<dl class="frame">
  <dt>2006年1月1日</dt>
  <dd>開設</dd>
  <dt>2006年2月1日</dt>
  <dd>何かを更新</dd>
  <dt>2006年3月1日</dt>
  <dd>何かを更新</dd>
  <dt>2006年4月1日</dt>
  <dd>何かを更新</dd>
  <dt>2006年5月1日</dt>
  <dd>何かを更新</dd>
</dl>
2006年1月1日
開設
2006年2月1日
何かを更新
2006年3月1日
何かを更新
2006年4月1日
何かを更新
2006年5月1日
何かを更新

日本の個人のサイトには更新履歴をインラインフレームで表示する習慣(？)がありますが、わざわざ別ファイルに分ける必要はないでしょう。この方法のほうがフレーム未対応のブラウザに優しく、望ましいでしょう。

Transitional DTDの定義

<!ELEMENT IFRAME - - (%flow;)*         -- inline subwindow -->
<!ATTLIST IFRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #IMPLIED  -- link to long description
                                          (complements title) --
  name        CDATA          #IMPLIED  -- name of frame for targetting --
  src         %URI;          #IMPLIED  -- source of frame content --
  frameborder (1|0)          1         -- request frame borders? --
  marginwidth %Pixels;       #IMPLIED  -- margin widths in pixels --
  marginheight %Pixels;      #IMPLIED  -- margin height in pixels --
  scrolling   (yes|no|auto)  auto      -- scrollbar or none --
  align       %IAlign;       #IMPLIED  -- vertical or horizontal alignment --
  height      %Length;       #IMPLIED  -- frame height --
  width       %Length;       #IMPLIED  -- frame width --
  >

Information

現在の位置