HTML フレーム

フレームを使用することで、同じブラウザウィンドウ内に複数のページを表示することができます。

垂直フレーム
この例では、3つの異なるドキュメントを使用して垂直フレームを作成する方法を示します。
水平フレーム
この例では、3つの異なるドキュメントを使用して水平フレームを作成する方法を示します。

このページの下部にさらに例を見つけることができます。

フレーム

フレームを使用することで、同じブラウザウィンドウ内に複数のページを表示することができます。各HTMLドキュメントはフレームと呼ばれ、各フレームは他のフレームに独立しています。

フレームの使用の欠点:

  • 開発者は多くのHTMLドキュメントを同時に追跡する必要があります。
  • 全体のページを印刷することは難しいです。
フレーム構造タグ(<frameset>)
  • フレーム構造タグ(<frameset>)は、ウィンドウをフレームに分割する方法を定義します。
  • 各framesetは、一連の行を定義します。または
  • rows/columnsの値は、各行または各列がスクリーンを占める面積を指定します。

編集者注:framesetタグもフレームセットとして翻訳されることがあります。

フレームタグ(Frame)

Frameタグは、各フレームに配置されるHTMLドキュメントを定義します。

以下の例では、2つの列を持つフレームセットを設定しました。第1列はブラウザウィンドウの25%を占めるように設定され、第2列はブラウザウィンドウの75%を占めるように設定されました。HTMLドキュメント "frame_a.htm" は第1列に配置され、HTMLドキュメント "frame_b.htm" は第2列に配置されています:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

基本的な注意事項 - 有用なヒント:

フレームが見える枠を持っている場合、ユーザーは枠をドラッグしてサイズを変更することができます。このような状況を避けるためには、<frame>タグに以下を追加できます:noresize="noresize"。

フレームをサポートしないブラウザに対して<noframes>タグを追加してください。

重要なヒント:<body></body>タグと<noframes></noframes>タグを同時に使用することはできません。ただし、テキストを含む<noframes>タグを追加する場合は、このテキストを<body></body>タグ内にネストする必要があります。(以下の最初の例でその実装を見ることができます。)

さらに多くの例

<noframes>タグの使用方法
この例では、<noframes>タグの使用方法を示しています。
混在フレーム構造
この例では、3つのドキュメントを持つフレーム構造を作成する方法を示しています。これらを行と列に混在させます。
noresize="noresize"属性を持つフレーム構造
この例では、noresize属性の使用方法を示しています。この例では、フレームはサイズを変更することができません。フレーム間の枠にマウスをドラッグすると、枠が移動できないことがわかります。
ナビゲーションフレーム
この例では、ナビゲーションフレームの作成方法を示しています。ナビゲーションフレームには、2番目のフレームをターゲットとしているリンクリストが含まれています。"contents.htm"という名前のファイルには3つのリンクが含まれています。
インラインフレーム
この例では、インラインフレーム(HTMLページ内のフレーム)の作成方法を示しています。
フレーム内の指定されたセクションにジャンプする方法
この例では、2つのフレームを使用しています。そのうちの1つは、別のファイル内で指定されたセクションにリンクする設定がされています。この「link.htm」ファイル内で指定されたセクションは、<a name="C10">で識別されています。
フレーム内の指定されたセクションにナビゲートするためのフレームを使用する方法
この例では、2つのフレームを使用しています。左側のナビゲーションフレームには、リンクリストが含まれており、これらのリンクは2番目のフレームをターゲットとしています。2番目のフレームはリンクされたドキュメントを表示します。ナビゲーションフレーム内のリンクは、ターゲットファイル内で指定されたセクションにリンクされています。