frame要素 -- フレーム内容

基本データ

frame要素
文書型 適用 子要素 開始タグ 終了タグ 分類
Strict × 利用できません
Transitional × 利用できません
Frameset ○ 空要素 必須 禁止 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
スクロールバーを表示しません。フレームの内容が途切れてしまうと、残りの部分を表示できなくなります。
noresize
Strict: × | Transitional: × | Frameset: ○
この属性が指定されたときは、フレームのサイズが変更できなくなります。サイズが変更できるデフォルトのままのほうが便利なので、指定する必要はないでしょう。
frameborder="枠線"
Strict: × | Transitional: × | Frameset: ○
フレームの枠線を表示するかしないかを指定します。利用できる値は次のとおりです。
1
隣接するフレームとの境界に枠線を表示します。
0
枠線を表示しません。ただし、隣接するframe要素にframeborder="1"が指定されていると、そのフレームとの境界線が表示されます。
marginwidth="左右の余白"
Strict: × | Transitional: × | Frameset: ○
フレームの内容の左右の余白をピクセル値で指定します。
marginheight="上下の余白"
Strict: × | Transitional: × | Frameset: ○
フレームの内容の上下の余白をピクセル値で指定します。

解説

個々のフレームを定義するための要素です。フレームをどのように分割するかはframeset要素で指定し、その子要素にframe要素を配置します。

src属性にはフレームの初期状態で表示する文書のURIを指定します。name属性でフレーム名をつけます。a要素などでリンクするときtarget属性にこのフレーム名を指定すると、指定されたフレームにリンク先の内容が表示されます。

title属性でフレームの説明をつけることができます。フレームを扱うことのできるテキストブラウザ、音声ブラウザなどであれば、title属性の内容を元に各フレームページへのナビゲーションを利用者に提供することができます。必須属性ではありませんが、記述しておくのが望ましいです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
  <head>
    …
  </head>
  <frameset title="サイトのタイトル" cols="120,*">
    <frame src="menu.html" title="メニュー" name="left">
    <frame src="main.html" title="メイン画面" name="right">
    <noframes>
      <body>
        …
      </body>
    </noframes>
  </frameset>
</html>

ターゲット指定

フレーム内部のページのリンクをクリックしたときに、別のフレームにリンク先の内容を表示させるには、target属性で表示先のフレーム名を指定します。

まず、frame要素にname属性でフレーム名をつけておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
  <head>
    …
  </head>
  <frameset title="サイトのタイトル" cols="120,*">
  <frame src="menu.html" title="メニュー" name="left">
  <frame src="main.html" title="メイン画面" name="right">
    <noframes>
      <body>
        …
      </body>
    </noframes>
  </frameset>
</html>

次の文書は、menu.htmlの内容です。リンク先のdiary.htmlやworks.htmlなどの内容を右側のメイン画面に表示させるために、target属性でフレーム名を指定します。target属性を使うために、文書型はTransitional DTDを使います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    …
  </head>
  <body>
    <ul>
      <li><a href="diary.html" target="right">日記帳</a></li>
      <li><a href="works.html" target="right">作品</a></li>
      <li><a href="profile.html" target="right">プロファイル</a></li>
    </ul>
  </body>
</html>

base要素のtarget属性でフレーム名を指定しておけば、リンク先の内容は全て指定されたフレームに表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    …
    <base target="right">
  </head>
  <body>
    <ul>
      <li><a href="diary.html">日記帳</a></li>
      <li><a href="works.html">作品</a></li>
      <li><a href="profile.html">プロファイル</a></li>
    </ul>
  </body>
</html>

フレームの境界線のデザインを変える

frameborder="0"で枠線を消しCSSのborderプロパティで枠線のデザインを指定すれば、細い実線、点線など様々な種類の境界線が表示できます。

フレームにクラスを指定しておきます。

<frameset title="フレームのテスト" cols="120,*">
  <frame src="menu.htm" title="メニュー" name="left" frameborder="0" class="fleft">
  <frame src="main.htm" title="メイン画面" name="right" frameborder="0" class="fright">
  <noframes>
    <body>
      …
    </body>
  </noframes>
</frameset>

その後、左側のフレーム(frame.fleft)の右側の枠線(border-right)のデザインをCSSで指定します。

frame.fleft {
  border-right: 3px dotted red; /* 赤い点線 */
}

フレームのサンプル

手元のブラウザで確認してみたところ、Internet Explorer 6とMozilla 1.7.xはCSSで指定されたとおり赤い点線が表示されました。そのほかのブラウザに関しては、Firefox 1.5ではframeborder="1"のときと同じ境界線が、Opera 8ではグレーの境界線が表示され、Netscape 7では何も表示されませんでした。ブラウザによって対応状況がまちまちのようです。

Frameset DTDの定義

<![ %HTML.Frameset; [
<!-- reserved frame names start with "_" otherwise starts with letter -->
<!ELEMENT FRAME - O EMPTY              -- subwindow -->
<!ATTLIST FRAME
  %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 --
  noresize    (noresize)     #IMPLIED  -- allow users to resize frames? --
  scrolling   (yes|no|auto)  auto      -- scrollbar or none --
  >
]]>

Information

現在の位置