HTML のフレームは、ブラウザ ウィンドウを複数のセクションに分割する方法であり、各セクションで異なる HTML ドキュメントをロードして表示できます。 この記事では、HTML のフレームの実際的な例を見ていきます。

CSS や JavaScript は、一部の Web サイト、特に 1990 年代から 1990 年代初頭に作成された Web サイトで今でも見られます。 2000年のこと。

HTML ではフレームはどのように機能しますか?

フレームは 2 つの要素で構成されます。

1. フレームセット: 要素 は、ブラウザ ウィンドウを長方形のセクションに分割するために使用され、それぞれのセクションで独自の HTML ドキュメントを読み込むことができます。

2. フレーム: 要素 内で使用されます 個々のセクションをそれぞれ定義します。 そして、フレームセット内にロードされている他のドキュメントを呼び出すために送信します。

• 以下のように続けてください: iFrame の例

HTMLでフレームを作成する方法

フレームを含む HTML ドキュメントを作成するには、次の 2 つの非常に簡単な手順に従います。

1. 要素を使用してフレームの構造を定義する HTML ドキュメントを作成します。. 例えば：

ファイル 1: フレームセット.html

2. フレーム内にロードする 1 つ以上の HTML ドキュメントを作成します。

ファイル 2: フレーム1.html

これはフレーム 1 です

ファイル 3: フレーム2.html

これはフレーム 2 です

HTMLのフレーム属性

最も重要な要素属性のいくつか それは：

• スクロール: この属性は、フレーム内のスクロールバーの外観を制御するために使用されます。 値は「auto」、「yes」、「no」のいずれかになります。

• サイズの変更: この属性は、ユーザーがフレームのサイズを変更できないようにするために使用されます。

• ヤムイモ: この属性はフレームに名前を付けるために使用され、リンクやスクリプトでフレームを参照するのに役立ちます。

instagram story viewer

• 送信元: この属性は、フレームにロードされる HTML ドキュメントの URL を指定するために使用されます。

• 枠線: この属性は、フレームに境界線を付けるかどうかを指定します。 可能な値は「1」(境界線を表示する) または「0」(境界線を表示しない) です。 例えば、 .

• 国境: この属性は、フレーム間の境界の幅をピクセル単位で定義します。 例えば、 フレーム間に 5 ピクセルの境界線が作成されます。

• フレーム間隔: この属性は次のようなものです 国境. また、フレーム間のスペースもピクセル単位で定義します。 例えば、 フレーム間に 10 ピクセルのギャップを設定します。

• ボーダの色: この属性を使用すると、フレームの境界線の色を変更できます。 任意の有効な色を指定できます。 例えば、 フレームの境界線が赤色になります。

使用例：

特定のフレームにリンクする方法

属性を使用して、特定のフレームでリンクを開くことができます。 目標 ラベルに. の値 目標 フレーム名と同じである必要があります(ヤムイモ の属性 ). 例えば：

menu.html内
ページ1
2ページ

この場合、メニューフレームの「ページ 1」または「ページ 2」のリンクをクリックすると、「コンテンツ」フレームに対応するページが読み込まれます。

枠を壊す方法

リンクでフレームセットの外のページを開く（つまり、フレームセット全体を置き換える）場合は、特別な値を使用できます。 _上 属性の場合 目標. 例えば：

menu.html内
枠から外れてしまう

「Exit Frames」をクリックすると、ブラウザは「pageOutofFrames.html」をウィンドウ全体にロードし、フレームセットを置き換えます。

画面をフレームで2列に分割する例

この例では、画面を同じサイズの 2 つの列に分割します。 各列は異なる HTML ページをロードします。

フレーム付きのナビゲーション サイドバーを作成する例

この例では、画面の 25% を占め、ナビゲーションに使用されるサイドバーを作成します。 画面の残りの部分は、メイン コンテンツの表示に使用されます。

画面を行と列に分割する例

このより複雑な例では、画面を 4 つの等しい部分に分割します。 各セクションは異なる HTML ページをロードします。

HTMLフレームを使用したトップナビゲーションの例

連続する 2 つのフレームを定義するファイルを作成します。 定義されている 2 つのファイルは、ナビゲーション用 (ウィンドウの幅の 20% を占める) とメイン コンテンツ用 (ウィンドウの幅の残りの部分を占める) です。

次に、「navigation.html」ファイルと「content.html」ファイルを作成する必要があります。 たとえば、「navigation.html」は次のようになります。

ページ1

2ページ

3ページ目


「content.html」は次のようなものになります。

私たちのウェブサイトへようこそ！

ナビゲーションで選択したページのコンテンツが表示されます。

この場合、「navigation.html」内のリンクをクリックすると、対応するページが「コンテンツ」フレームに読み込まれます。