フレーム

フレームとは

フレームはその名前が示すように画面をフレームと呼ばれる単位に分割し、それぞれのフレームに別々なページを表示できる機能です。

たとえば、サイトの目次を常に表示しておき、目次を選択するとそのページが表示されるようにしたい場合にフレーム機能を使います。

フレームは通常のページの制作に比べ、フレーム間の依存関係など把握しにくい部分もあるので設計には十分気をつけてください。

フレームを使ったページは単一のファイルではなく、次の文書ファイルが必要です。

  1. フレームを定義するHTML文書
  2. 各フレーム内に表示するHTML文書

フレームの使用例を示します。次の文はフレームの定義です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>簡単なフレームの例</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="frame1.html">
<FRAME src="frame2.gif">
</FRAMESET>
<FRAME src="frame3.html">
<NOFRAMES>
<P>このフレームの文書には次のものが含まれています。
<UL>
<LI><A href="frame1.html">何かが入っています</A>
<LI><IMG src="frame2.gif" alt="image">
<LI><A href="frame3.html">その他の何かが入っています</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>

フレーム内に表示する文書は次のようにBODY要素から始まります。

<BODY>frame1.htmlです。</BODY>
<BODY>frame3.htmlです。</BODY>

この文書はここをクリックすると表示されます。

フレームの作成

フレームを使ったページを作成するとき、通常のページとはいくつか異なる点があります。

  1. ボディ部を示すBODY要素の代わりにフレームを定義するFRAMESET要素を使う。
  2. フレームを表示できる場合とできない場合の両方に対応できるようにする。

FRAMESET要素を使うとページを上下あるいは左右で任意に分割できます。ページを上下に分割したいときはrows属性を、左右に分割したいときはcols属性を使います。分割するフレームの幅や高さは上下あるいは左右のページの高さや幅に対してのパーセンテージやピクセル数で指定します。

<FRAMESET rows="50%, 50%">
その他の設定
</FRAMESET>

この例はここをクリックすると表示されます。

次に示す例はフレームを左右に3分割するもので、中央のフレームを250ピクセルの幅に固定し、左のフレームは残っている幅の1/4(25\%)に、右のフレームは3/4(75%)に設定しています。

<FRAMESET cols="1*,250,3*">
その他の設定
</FRAMESET>

この例はここをクリックすると表示されます。

次の例は2行×3列のフレームを作る場合の設定です。

<FRAMESET rows="30%,70%" cols="33%,34%,33%">
その他の設定
</FRAMESET>

この例はここをクリックすると表示されます。

次の例は上下に4つのフレームを作るものです。仮にウィンドウの高さが1000ピクセルあであるとします。最初のフレームは30\%の高さつまり、300ピクセルに、2番目のフレームは400ピクセルになります。残り300ピクセルを2つのフレームが使います。3番目のフレームが*(1*と同じです)、4番目のフレームが2*なので残り300ピクセルを1:2で分け合うことになります。つまり100と200ピクセルです。

<FRAMESET rows="30%,400,*,2*">
その他の設定
</FRAMESET>

この例はここをクリックすると表示されます。

フレームのネスト

フレームの定義の中に新しいフレームを定義できます。これをフレームのネスト(入れ子)といいます。ネストの例を示します。

<FRAMESET cols="33%, 33%, 34%">
最初のフレームの設定
  <FRAMESET rows="40%, 50%">
  二番目のフレームの設定
  </FRAMESET>
三番目のフレームの設定
</FRAMESET>

この例はここをクリックすると表示されます。

フレームの枠線

フレームの枠線を表示しなくないときは、frameborder属性を指定します。この属性には次の二つの値を指定できます。

  1. YES 境界線を表示します。これがデフォルトの値です。
  2. NO 境界線を表示しません。

フレーム内の設定

これまでの設定でフレーム自体ができましたが、そのフレームに対して名前や表示するHTML文書を指定する必要があります。その指定にはFRAME要素を使います。

FRAME要素の属性を以下に示します。

name
フレームの名前を指定する属性です。フレームの名前は他と重複しては行けません。
src
フレームの表示するHTML文書のURIを指定します。
noresize
フレームのサイズを利用者が変更でいないようにする。値はありません。
scrolling
フレームのスクロールを制御する属性です。設定できるのは次の三つの値です。
auto
フレームのスクロールが必要であれば自動的にスクロールできるようにします。これがデフォルトの値です。
yes
常にフレームをスクロールできるようにします。
no
フレームのスクロールはできないようにします。
marginwidth
フレームの内容とフレーム左右の枠までのマージンをピクセル単位で指定します。
marginheight
フレームの内容とフレーム上下の枠までのマージンをピクセル単位で指定します。

最低限必要な属性はnameとsrc属性の二つが必要です。

ではフレーム内容までを含んだ例を示します。

<HTML>
<HEAD>
<TITLE>フレーム</TITLE>
<FRAMESET col="35%,65%">
<FRAME name="toc" src="toc.html">
<FRAMEname="main" src="main.html">
</FRAMESET>
</HTML>

この例はここをクリックすると表示されます。

target属性

フレーム内にリンクがある場合、リンク先の文書を表示するとフレームの状態は変化せず、リンクのあったフレーム内に文書が表示されます。リンク先の文書を表示するフレームを指定するにはA要素のtarget属性を使い、フレームを指定します。

<A href="リンク先文書のURI" target="リンク先文書を表示するフレーム名">

リンク先文書を新しいウィンドウで開く

リンク先の文書を新しいウィンドウで開くにはtarget属性に指定するフレーム名を定義されていない名前にします。

特別なフレーム名

フレーム名はページ制作者が自由に定義できます。しかし、次の名前は予約された名前で特別な意味を持ちます。

_blank
リンク先の文書は名前の無い新しいウィンドウに表示されます。
_self
このリンクのあるフレームにリンク先の文書を表示するときに使います。
_parent
フレームの親にあたるウィンドウにリンク先の文書を表示します。
_top
リンク先の文書をもとウィンドウ全体で表示します。この名前を指定するとフレームをクリアする目的で使います。