フレームに関するHTMLタグ
フレームを使うことで、同じウィンドウに複数のWebページを表示させることができます。
フレームのサンプル
垂直方向のフレームセットサンプル
このサンプルは、3つの異なるドキュメントで垂直方向のフレームセットを作る方法をデモンストレーションします。
水平方向のフレームセットサンプル
このサンプルは、3つの異なるドキュメントで水平方向のフレームセットを作る方法をデモンストレーションします。
<noframes>タグの使い方サンプル
このサンプルは、<noframes>タグを使用する方法をデモンストレーションします。
フレーム
フレームを使うことで、同じウィンドウに複数のWebページを表示させることができます。各HTMLドキュメントはフレームと呼ばれ、各フレームはそれぞれ独立しています。
<frameset>タグ
- <frameset>タグは、ウィンドウをフレームに分割する方法を定義します
- 各フレームセットは、水平方向のフレームあるいは垂直方向のフレームの1つを定義します
- 水平方向のフレーム/垂直方向のフレームの値は、各水平方向のフレーム/垂直方向のフレームが占める画面の範囲の量を示します
<frame>タグ
- <frame>タグは、各フレームにどのHTMLドキュメントを置くかを定義します
下記の例では、2つの垂直方向のフレームを備えたフレームセットを定義しています。1つめのフレームはブラウザウィンドウの幅の25%にセットされ、2つめのフレームはブラウザウィンドウの幅の75%にセットされます。HTMLドキュメント「frame_a.html」は1つめのフレームに入れられ、HTMLドキュメント「frame_b.html」は2つめのフレームに入れられます。
<frameset cols="25%,75%">
<frame src="frame_a.html">
<frame src="frame_b.html">
</frameset>基本メモ - 役立ちTips
フレームが境界線を持っている場合、ユーザーは境界線をドラッグすることによりフレームのサイズ変更することができます。これを防ぐために、<frame>タグに noresize="noresize" を加えることができます。
フレームをサポートしないブラウザのために、<noframes>タグを記述するようにしてください。
フレームのサンプル集
複雑なフレームセットのサンプル
このサンプルは、3つのドキュメントでフレームセットを作る方法、および水平方向のフレームと垂直方向のフレームにそれらを混合する方法をデモンストレーションします。
noresize属性のサンプル
このサンプルは、noresize属性の使い方をデモンストレーションします。
ナビゲーションフレームのサンプル
このサンプルは、ナビゲーションフレームを作る方法をデモンストレーションします。ナビゲーションフレームは、2つめのフレームをターゲットとしたリンクのリストを含んでいます。「tryhtml_contents.html」ファイルは3つのリンクを含んでいます。このファイルのリンクのソースコードは、
<a href ="frame_a.html" target ="showframe">フレームA</a><br>
<a href ="frame_b.html" target ="showframe">フレームB</a><br>
<a href ="frame_c.html" target ="showframe">フレームC</a>
です。2つめのフレームには、リンクしたドキュメントが表示されます。
インラインフレームのサンプル
このサンプルは、インラインフレーム（HTMLページの内部のフレーム）を作成する方法をデモンストレーションします。
フレーム内の指定されたセクションの表示サンプル
このサンプルは、ページが表示されたときにフレームの指定されたセクションを表示する方法をデモンストレーションします。
フレームナビゲーションで指定されたセクションを表示するサンプル
このサンプルは、2つのフレームを使いデモンストレーションします。左のナビゲーションフレーム（content.html）にはターゲットとして右のフレーム（link.html）へのリンクのリストを含んでいます。右のフレームは、リンクしたドキュメントを表示します。ナビゲーションフレーム中のリンクのうちの1つは、ターゲットファイル中の指定されたセクションにリンクします。ファイル「content.html」中のHTMLコードは以下の通りです。
<a href="link.html" target="showframe">アンカー無しのリンク</a><br>
<a href="link.html#C4" target="showframe">アンカー付きリンク</a>
フレーム関連のHTMLタグ一覧表
| タグ | 説明 |
|---|---|
| <frameset> | フレームの設定を定義します |
| <frame> | 1つのフレームを定義します |
| <noframes> | フレームをサポートしないブラウザへの表示を定義します |
| <iframe> | インラインフレームを定義します |