フレーム関係のタグ．こひつじの家

　フレーム関係のタグ

ホームページ作成の部屋－タグの使用法と使用例

　フレームはブラウザの表示領域を分割し，分割したそれぞれの領域（フレーム）に異なったページを表示させる機能です。たとえば次のような利用法があります。

メニューと各ページを別のフレームに表示する。そうすればいちいちメニューのページに戻らなくても希望のページを見ることができる。
サムネイル画像とその説明を左側のフレームに置いて，大きな画像を右側のフレームに表示させる。そうすれば大きな画像とともに説明が見られる。

　ここではフレーム関係のタグについて説明します。

1．`<frameset>`	フレームを定義する
2．`<frame>`	各フレームの内容を指定する

　フレームは，HTML 4.01の厳格な仕様からは排除されています。
　フレームについては賛否両論ありますが，フレームを嫌う人もかなり多いということは知っておいた方が良いと思います。フレームが嫌われる理由としては，特に小形のディスプレイで表示したときに見にくくなってしまうこと，それにリンクが適切に設計されていないと画面が混乱したり，元に戻れなくなってしまうこと，ページの印刷や保存などが思うようにできない場合があることなどが上げられています。

1．フレームを定義する
`<frameset>⇔</frameset>`	このページのトップへ

　フレーム機能を使う場合には，最初にフレームセット専用のHTML文書を用意し，framesetタグを用いて，フレームを定義します。フレームセット専用のHTML文書にはブラウザに表示させる内容は書きませんので，bodyタグを置きません。

　フレーム機能を使わない通常のページは，単一フレームの構造をしているともいえます。

　フレームを上下に分割する

<frameset rows="☆,★">

　☆と★はピクセル数または割合（%を付ける）で，分割したフレームそれぞれの高さを指定します。

rows="☆,*"
rows="*,☆"

　一方だけ☆で指定し，残りに * を入れることができます。この場合 * を入れたフレームの高さは自動的に決まります。

　フレームを左右に分割する

<frameset cols="☆,★">

　☆と★はピクセル数または割合（%を付ける）で，分割したフレームそれぞれの幅を指定します。

rows="☆,*"
rows="*,☆"

　一方だけ☆で指定し，残りに * を入れることができます。この場合 * を入れたフレームの幅は自動的に決まります。

　フレーム境界線の太さを指定する

<frameset border="☆">　　IE3は非対応

　☆にピクセル数を入れて指定します。（デフォルトは 3～5 ）
　太さ 0 を指定すると境界線が表示されなくなります。

注意 <frameset border>はHTML 4.01の規格から除外されました。当分は使用できると思いますが，将来はブラウザが対応しなくなる可能性があります。
　境界線を表示しないときは<frame frameborder="0">を使用することが推奨されています。

　フレーム境界線の色を指定する

<frameset bordercolor="☆">　　IE3は非対応

　☆で色を指定します。
　太さも色を指定しない場合灰色っぽい線になります。
　太さが5未満の場合，IEでは白線になり，色の指定は無効になります。

注意 <frameset bordercolor>はHTML 4.01の規格から除外されました。当分は使用できると思いますが，将来はブラウザが対応しなくなる可能性があります。

　<frameset>タグの使用例

**(1) 上下に分割したフレームで，境界線については指定なし**
<html> <head> <title>上下に分割したフレーム</title> </head> <frameset rows="25%,75%"> <frame src="web-025.htm" name="upper"> <frame src="web-026.htm" name="lower"> </frameset> </html> ブラウザで見る

**(2) 上下に分割したフレームで，境界線の太さは0**
<frameset rows="25%,75%" border="0"> 　それ以外については(1)と同じ。ブラウザで見る

**(3) 上下に分割したフレームで，境界線の色を指定**
<frameset rows="25%,75%" border="10" bordercolor="#0000ff"> 　それ以外については(1)と同じ。ブラウザで見る

(4) 上下に分割して，さらに下を左右に分割

<html>
<head>
  <title>上下に分割したフレーム</title>
</head>
<frameset rows="20%,80%">
  <frame src="web-025.htm" name="upper">
  <frameset cols="20%,80%">
    <frame src="web-030.htm" name="left">
    <frame src="web-031.htm" name="right">
  </frameset>
</frameset>
</html>

ブラウザで見る

解説
　使用例(4)のように，<frameset>の中に，また<frameset>を置くことができます。こうすることによってフレームを細かく分けることが可能です。
　境界線をマウスでドラッグすることによって，境界線を移動させることができますので，トライしてみてください。

2．各フレームの内容を指定する
`<frame>`	このページのトップへ

　<frameset>タグで定義したフレームに表示するHTMLファイルを指定したり，フレームの性格を指定したりするためのタグです。
　終了タグはありません。

　フレームに表示するファイルを指定します。

<frame src="☆">（必須）

　☆にファイルのURLを入れます。

　フレームに名前を付けます。

<frame name="☆">

　☆に適当な名前（半角英数字）を入れます。
　リンク先のページを目的のフレームに表示させるときには，この名前を使います。

　フレームの左右に余白を設ける。

<frame marginwidth="☆">

　☆にはピクセル数を入れます。

　フレームの上下に余白を設ける。

<frame marginheight="☆">

　☆にはピクセル数を入れます。

　フレームにスクロールバーを設けるかどうか指定する。

<frame scrolling="☆">

`☆＝yes`	：スクロールバーを設ける
`☆＝no`	：スクロールバーを設けない
`☆＝yes`	：ブラウザが必要に応じてスクロールバーを設ける（デフォルト）

　表示されたフレームのサイズ変更を禁止する。

<frame noresize>

　値はありません。
　noresize属性を使わないかぎり，境界線をマウスでドラッグすることによって境界線を移動させ，各フレームのサイズを変更することができます。

　フレームのサイズよりもフレーム内に表示するデータのサイズが大きいにもかかわらず scrolling=no と noresize の両方を指定してしまうと，隠れているデータを見ることができなくなってしまうので，注意が必要です。

　フレーム境界線の有無を指定する

<frame frameborder="☆">

`☆＝1`	：境界線を表示する（デフォルト）
`☆＝0`	：境界線を表示しない

　フレーム境界線の色を指定する

<frame bordercolor="☆">　　IE3は非対応

　☆で色を指定します。
　太さも色を指定しない場合灰色っぽい線になります。
　太さが5未満の場合，IEでは白線になり，色の指定は無効になります。

注意 <frame bordercolor>はHTML 4.01の規格から除外されました。当分は使用できると思いますが，将来はブラウザが対応しなくなる可能性があります。

　<frame>タグの使用例

(1) フレームを使用したリンク

▼メインページ（フレームの定義だけ）　web-32.htm
<html>
<head>
  <title>メニューでフレームの色を変える</title>
</head>
<frameset cols="35%,65%">
  <frame src="web-033.htm" name="left">
  <frame src="web-034.htm" name="right">
</frameset>

</html>

▼メニューのページ　web-33.htm
<html>
<head>
  <title>メニューのフレーム</title>
</head>

<body bgcolor="#ffffff">

<h3 align="center">色メニュー</h3><br>

<b>
<a href="web-035.htm" target="right">赤色</a><br><br>

<a href="web-036.htm" target="right">黄色</a><br><br>

<a href="web-037.htm" target="right">緑色</a><br><br>

<a href="web-038.htm" target="right">青色</a><br><br>

<a href="web-034.htm" target="right">白色<br><br><br>

<a href="web-035.htm">赤色（誤り）</a>
</b>
</body>
</html>

▼色のページ（白色．他のページもほどんど同様）　web-34.htm
<html>
<head>
  <title>右フレーム白</title>
</head>

<body bgcolor="#ffffff">

<h2 align="center">白色のページです</h2><br><br>

</body>
</html>

ブラウザで見る

解説
　左側のフレームの色名リンクアンカーをクリックすることによって，色名に相当する背景色のページを右側のフレームに表示します。
　メニューのページで，リンクを設定する <a> タグに target="right" 属性を付けて，右側のフレームに表示させているところが大切です。赤色（誤り）のリンクのように target="right" を付けないと，メニューのある左側のフレームに色のページが表示され，メニューが消えてしまいます。

(2) フレームを使用したリンク．その２

▼メインページ（フレームの定義だけ）　web-39.htm
<html>
<head>
  <title>背景色の選択</title>
</head>

<frameset cols="35%,65%">
  <frame src="web-040.htm" name="left"
    marginwidth="20" marginheight="10">
  <frame src="web-041.htm" name="right"
    marginwidth="20" marginheight="10">
</frameset>

</html>

▼メニューのページ　web-40.htm
<html>
<head>
  <title>メニューのフレーム</title>
  <style type="text/css">
    a:hover {color:#ffffff; background-color:#ff6633}
  </style>
</head>

<body bgcolor="#ffffff">
<h3 align="center">色メニュー</h3><br>
<b>
<a href="web-042.htm" target="right">赤色</a><br><br>
<a href="web-043.htm" target="right">黄色</a><br><br>
<a href="web-044.htm" target="right">緑色</a><br><br>
<a href="web-045.htm" target="right">青色</a><br><br>
<a href="web-041.htm" target="right">白色</a><br><br><br>
<a href="web-046.htm" target="_top">戻る</a><br><br>
<a href="web-046.htm">戻る（誤り）</a></b>
</body>
</html>

▼色のページ（赤色．他のページもほどんど同様）　web-42.htm
<html>
<head>
  <title>右フレーム．赤</title>
  <style type="text/css">
    a:hover {color:#ffffff; background-color:#ff6633}
  </style>
</head>

<body bgcolor="#ff0000">
<h2 align="center">赤色のページです</h2><br><br><br><br><br>
　　<a href="web-039.htm" target="_top">戻る</a><br><br>
　　<a href="web-039.htm">戻る（誤り）</a>
</body>
</html>

▼親ページ（フレームなし）　web-46.htm
<html>
<head>
  <title>親ページ</title>
  <style type="text/css">
    a:hover {color:#ffffff; background-color:#ff6633}
  </style>
</head>

<body bgcolor="#ffffff">
<h3 align="center">親ページ</h3><br>
<b>
<a href="web-039.htm">背景色の選択</a><br><br>
</body>
</html>

ブラウザで見る

解説
(1)	`<frame marginwidth>` や `<frame marginheight>` を付けてフレームとテキストなどのデータとの間に余白を設けて，テキストなどがフレームに接近しすぎないようにしました。
(2)	フレームを使用するときは，リンク `<a href="☆" target=★">` の`target`属性を適切に付けることが大切です。リンク先のページを表示させるフレームについて，その名前を★に入れます。・`target="_top"`というのは，フレームを解除してからページを表示させるための記述です。ここの例では左側のフレームの「戻る」で，フレームを使用してない親ページに戻ります。「戻る（誤り）」はフレームを解除しないまま親ページを左側のフレームに表示させますので混乱します。・右側のフレームの「戻る」は，いったんフレームを解除してから，再びフレームを使用したページの最初の状態に戻ります。赤い色のページの中にある「戻る（誤り）」ではフレームの解除をしていませんので，右側のフレームの中にさらにフレームができ，混乱します。
(3)	各ページの先頭の方にある `<style type="text/css"> a:hover {color:#ffffff; background-color:#ff6633} </style>` は，マウスカーソルがリンクアンカーの上に乗ったときに，リンクアンカーの色を変えるためのスタイルシートです。これはフレームとは全く関係がありませんが，このようにすることによって，変化のあるページを作ることができますので，参考のために載せました。

　フレームの中に表示する各ページ（パーツページ）にも，ぜひ「○○へ戻る」または「戻る」というリンクアンカーを設けてください。
　通常はホームページからパーツページへリンクしていきますので，メニュー以外のフレームページについては「戻る」がなくても不便はありません。しかし検索サイトからリンクして来る場合は，ほとんどパーツページで，ブラウザにパーツページだけが表示されます。そのとき「戻る」がありませんと，訪れた人にとっては行き先がないページになってしまいます。

このページのトップへ