Next: 11. オーディオ Up: HTML文書作成マニュアル Ver 5.11 Previous: 9. 表

10. フレーム

ブラウザ上の画面を分割して、左側に目次、右側に実際の内容という組み合わせができると、マニュアルの参照などで有効に活用することができます。本マニュアルも、Netscape Navigator/CommunicatorやInternet Explorerではこの形式で表示するようにしています。この機能はフレームと呼ばれています。

フレーム環境はframesetタグを使用します。この環境内でframeタグとnoframesタグを使い、実際に表示するファイルの参照などを行います。

frameset[Frameset]

<frameset attributes...>～</frameset>の書式で、フレーム環境を作成します。アトリビュートはrows、colsのどちらかを取ります。フレーム環境の中でさらにframesetを使ってより細かく画面を区切ることも可能です。framesetタグはbodyタグ(4.1 参照)の代わりに指定します。

border: [省略可]border="number"はフレームどうしを区切るボーダーラインの幅をピクセル値で指定します。値を0にすると、ボーダーラインなしになります(frameborder="no"と同じ)。
bordercolor: [省略可]bordercolor="#rrggbb"またはbordercolor="#Color"は、ボーダーラインの色を変えます。色の指定については、7 を参照してください。
class: [Frameset][省略可]class="cdata"は、タグ内のテキストへセットする情報をクラスの形で指定します。詳細は5 を参照してください。
cols: [Frameset][省略可]cols="number,[number[,...]]"は横に画面を分割するための指定です。左側の画面をブラウザ画面全体の横幅の30%、中の画面の20%、右側の画面を50%にしたい場合、cols="30%,20%,50%"となります。ピクセル値で指定する場合、*を使うことができます。たとえば上下に分割したいときに、どんな大きさになっても下側の画面は必ず100ピクセル欲しいのであれば、rows="*,100"と指定します。これにより、下側には必ず100ピクセルが準備され、残りが上側の画面になります。
frameborder: [省略可]frameborder="set"はフレームどうしを区切るボーダーラインを付けるかどうかを指定します。yesを値にするとボーダーラインあり、noを値にするとボーダーラインなしになります。
id: [Frameset][省略可]id="name"は、このタグに固有のIDを振ります。
onload: [Frameset][省略可]onload="script"はドキュメントを読み込んだときに実行するスクリプトを指定します。詳細は15 を参照してください。
onunload: [Frameset][省略可]onunload="script"は現在開いているドキュメントから別のページに移動したりブラウザを閉じようとしたときに実行するスクリプトを指定します。詳細は15 を参照してください。
rows: [Frameset][省略可]rows="number,[number[,...]]"は、縦に画面を分割するための指定です。指定方法はcolsと同じです。
style: [Frameset][省略可]style="cdata"は、このタグ内のスタイルを設定します。詳細は5 を参照してください。
title: [Frameset][省略可]title="titlename"は補助用タイトルを指定します。

frame[Frameset]

<frame attributes...>の書式で、フレーム環境内でどのようにページを表示するかを決めます。EMPTYタグです。frameタグはframesetタグのrowsやcolsで指定した順に設定を記述します。<frameset cols="80%,20%">としたとき、frameタグはこの中に必ず2つ必要で、最初に記述したframeタグが80%の側の設定、次のframeタグが20%側の設定となります。アトリビュートでは次のような設定を行います。

border

[省略可]border="number"はフレームどうしを区切るボーダーラインの幅をピクセル値で指定します。値を0にすると、ボーダーラインなしになります(frameborder="no"と同じ)。

bordercolor

[省略可]bordercolor="#rrggbb"またはbordercolor="Color"は、ボーダーラインの色を変えます。色の指定については、7 を参照してください。

class

[Frameset][省略可]class="cdata"は、タグ内のテキストへセットする情報をクラスの形で指定します。詳細は5 を参照してください。

frameborder

[Frameset][省略可]frameborder="set"はフレームどうしを区切るボーダーラインを付けるかどうかを指定します。1を値にするとボーダーラインあり、0を値にするとボーダーラインなしになります。

longdesc

[Frameset][省略可]longdesc="URI"は、フレームの説明を示したURIを指定します。

marginheight

[Frameset][省略可]marginheight="number"は、このフレームの上下に空ける空白幅を指定します。値には1以上のピクセル値を指定します。

marginwidth

[Frameset][省略可]marginwidth="number"は、このフレームの左右に空ける空白幅を指定します。値には1以上のピクセル値を指定します。

id

[Frameset][省略可]id="name"は、このタグに固有のIDを振ります。

name

[Frameset][省略可]name="ID"は、aタグ(6.2 参照)によってリンクされるときの参照ID名を指定します。目次側のフレームをクリックしたら本文側のフレームが更新される、といった使い方をするときに必要です。

noresize

[Frameset][省略可]noresizeを指定すると、ブラウザの大きさを変更してもこのフレームはリサイズされません。

scrolling

[Frameset][省略可]scrolling="set"は、このフレームのスクロールバーの表示/非表示を設定します。値には次のいずれかを取ります。

auto:ページがフレームより大きくなったらスクロールバーを付けます(デフォルト)。
no:たとえページがフレームに入りきらなくてもスクロールバーを付けません。
yes:常にスクロールバーを付けます。

src

[Frameset][省略可]src="URI"は、このフレームに表示するファイルを指定します。このアトリビュートがない場合、このフレームには何も表示されません。

style

[Frameset][省略可]style="cdata"は、このタグ内のスタイルを設定します。詳細は5 を参照してください。

title

[Frameset][省略可]title="titlename"は補助用タイトルを指定します。

noframes[Frameset]

<noframes attributes...>～</noframes>は、古いブラウザやフレームを表現しにくいテキストブラウザ²⁴に同等のコンテンツを提供するためにframesetタグ環境の中で使用します。このタグに囲まれた部分は、フレームをサポートしていないブラウザで表示されます。bodyタグ環境をこのタグ環境内に持ちます。フレームをサポートしているブラウザでは無視されます。attributesには次のようなものがあります。

class: [Frameset][省略可]class="cdata"は、タグ内のテキストへセットする情報をクラスの形で指定します。詳細は5 を参照してください。
dir: [Frameset][省略可]dir="direction"は、テキストの方向を指定します。詳細は4.3 を参照してください。
id: [Frameset][省略可]id="name"は、このタグに固有のIDを振ります。
lang: [Frameset][省略可]lang="language"は、ドキュメントの言語を指定します。詳細は4.3 を参照してください。
onclick: [Frameset][省略可]onclick="script"はクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
ondblclick: [Frameset][省略可]ondblclick="script"はダブルクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
onkeydown: [Frameset][省略可]onkeydown="script"はキーを押して離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
onkeypress: [Frameset][省略可]onkeypress="script"はキーを押したときに実行するスクリプトを指定します。詳細は15 を参照してください。
onkeyup: [Frameset][省略可]onkeyup="script"はキーを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
onmousedown: [Frameset][省略可]onmousedown="script"はマウスのボタンをクリックしたときに実行するスクリプトを指定します。詳細は15 を参照してください。
onmousemove: [Frameset][省略可]onmousemove="script"はマウスを移動したときに実行するスクリプトを指定します。詳細は15 を参照してください。
onmouseout: [Frameset][省略可]onmouseout="script"はマウスを対象から離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
onmouseover: [Frameset][省略可]onmouseover="script"はマウスを対象に当てたときに実行するスクリプトを指定します。詳細は15 を参照してください。
onmouseup: [Frameset][省略可]onmouseup="script"はマウスのボタンを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
style: [Frameset][省略可]style="cdata"は、このタグ内のスタイルを設定します。詳細は5 を参照してください。
title: [Frameset][省略可]title="titlename"は補助用タイトルを指定します。

ここでフレームの単純な例を挙げましょう。

左側に目次、右側に本文というフレームセットを作成します。目次の項目でリンクしたときに更新されるのは右側の本文のフレームです。

framesetを持つファイル(仮にindex.html)を作成します。目次用ファイルはtoc.html、本文用ファイルはsec1.html、sec2.html、sec3.htmlとします。

index.htmlは次のようになります。


<html>
  <head>
  <title>フレームの例</title>
  </head>
  <frameset cols="20%,80%">
    <frame src="toc.html" name="toc"> <!-- 目次 -->
    <frame src="sec1.html" name="content"> <!-- 本文 -->
    <noframes>
      <!-- フレーム非対応の場合 -->
      <body>
        <p>フレームに対応していないブラウザのようですね。次のいずれかを選択してください。</p>
        <ul>
          <li><a href="toc.html">目次</a></li>
          <li><a href="sec1.html">本文</a></li>
        </ul>
      </body>
    </noframes>
  </frameset>
</html>

toc.htmlは次のようになります。


<html>
  <head>
    <title>目次</title>
  </head>
  <body>
    <ul>
      <!-- targetに本文フレームのnameのcotextを指定 -->
      <li><a href="sec1.html" target="context">1章</a></li>
      <li><a href="sec2.html" target="context">2章</a></li>
      <li><a href="sec3.html" target="context">3章</a></li>
    </ul>
  </body>
</html>

sec1.html、sec2.html、sec3.htmlはごく一般的に記述したHTMLファイルです。


<html>
  <head>
    <title>1章</title>
  </head>
  <body>
    <h1>本文の1章</h1>
  </body>
</html>

フレームセットのファイルindex.htmlをブラウザで見てみると、効果がわかります。aタグ(6.2 参照)のtargetアトリビュートでindex.htmlの本文側のframeタグで指定したnameアトリビュート値contextを参照しています。これにより、目次側のフレームでリンクポイントを選択すると、本文側のフレームがそのURIで更新されます。

フレームを使っているページからフレームを使っていないページにリンクするときには、aタグのtargetアトリビュートにtopまたは_topを指定します。topは新しいウィンドウを開いてそこにリンク先のファイルを表示しますが、_topは新しいウィンドウを開かず、同じウィンドウを更新します(6.2 参照)。またフレームの中をさらにフレームで分けているような入れ子のフレームのうち、親(1つ上位)フレームにあたる部分のフレームセットを変更したいときには、_parentを値として指定します。これらを指定しない場合、_selfが指定されたものと見なして、ブラウザはリンク元となったフレームにリンク先のファイルを表示します。

iframeタグを使うと、ページの中にフレームに似たウィンドウを埋め込んだインラインフレームを作成することができます。

iframe[Transitional]

<iframe attributes...>～</iframe>は、指定した個所にインラインフレームを作成します。ブラウザがこのタグをサポートしていない場合、～の部分が表示されます。attributesには次のようなものが入ります。

align

[Transitional][省略可]align="Justification"は、インラインフレームを表示する横位置を指定します。

center:中寄せです。
justify:左右のマージンをもとに調整します。
left:左寄せです(デフォルト)。
right:右寄せです。

class

[Transitional][省略可]class="cdata"は、タグ内のテキストへセットする情報をクラスの形で指定します。詳細は5 を参照してください。

frameborder

[Transitional][省略可]frameborder="set"はボーダーラインを付けるかどうかを指定します。値を1にするとボーダーラインあり、0にするとボーダーラインなしになります。

height

[Transitional][省略可]height="number"は、インラインフレームの高さを指定します。単位は、数値だけの場合ピクセル、%を付けると画面全体の高さに対するパーセンテージになります。

id

[Transitional][省略可]id="name"は、このタグに固有のIDを振ります。

longdesc

[Transitional][省略可]longdesc="URI"は、フレームの説明を示したURIを指定します。

marginheight

[Transitional][省略可]marginheight="number"は、上下に空ける空白幅を指定します。値には1以上のピクセル値を指定します。

marginwidth

[Transitional][省略可]marginwidth="number"は、左右に空ける空白幅を指定します。値には1以上のピクセル値を指定します。

name

[Frameset][省略可]name="ID"は、aタグ(6.2 参照)によってリンクされるときの参照ID名を指定します。

scrolling

[Transitional][省略可]scrolling="type"は、スクロールバーの表示/非表示を設定します。値には次のどれかを取ります。

auto:ページがフレームより大きかったらスクロールバーを付けます(デフォルト)。
no:たとえページがフレームに入りきらなくてもスクロールバーを付けません。
yes:常にスクロールバーを付けます。

src

[Transitional][省略可]src="URI"では、表示するファイルのURIを指定します。このアトリビュートがない場合、何も表示されません。

style

[Transitional][省略可]style="cdata"は、このタグ内のスタイルを設定します。詳細は5 を参照してください。

title

[Transitional][省略可]title="titlename"は補助用タイトルを指定します。

width

[Transitional][省略可]width="number"は、インラインフレームの幅を指定します。単位は、数値だけの場合ピクセル、% を付けると画面全体の幅に対するパーセンテージになります。

リンクによる変更の多くが特定のフレームをターゲットとしている場合、baseタグを使ってターゲットのデフォルトを設定することができます。

base[Strict][Transitional]

<base attributes...>は、そのページの基準となるパス名を記述します。EMPTYタグで、headタグ環境の中で宣言します。アトリビュートには次のようなものを取ります。

href: [Strict][Transitional][必須]このページ内でaタグ(6.2 参照)が使われたときに基準となるURIを指定します。たとえば、URIがhttp://kmuto.jp/index.htmlのページの中で<base href="http://www.foo.jp/bar/index.html">という宣言を行うと、このページ内で使うリンクの相対パスなどはすべてhttp://www.foo.jp/bar/index.htmlを基準にします。たとえば<a href="foo.html">と指定した場合、通常はhttp://kmuto.jp/foo.htmlにリンクされますが、baseタグの指定があるため、http://www.foo.jp/foo.htmlにリンクします。
target: [Transitional][省略可]このページ内のリンクのターゲットフレームを指定します。明示的にaタグ(6.2 参照)にtargetアトリビュートを付けない限り、この指定が使われます。

Next: 11. オーディオ Up: HTML文書作成マニュアル Ver 5.11 Previous: 9. 表

Kenshi Muto
平成11年9月19日