ホームページ > 記事 > ウェブフロントエンド > HTMLフレームセットタグ
HTMLフレームセットタグ
- WBOYオリジナル
- 2024-09-04 16:30:32439ブラウズ
HTMLのタグは複数のフレームを結合し、1つのWebページとして表示します。このドキュメントは、フレームセットに含まれるすべてのフレームで構成されます。フレームは、個々のウィンドウや Web サイトに似たものにすぎません。 Frameset タグを使用すると、複数の列または行を形成し、その下にフレームを含めることができます。この機能は HTML 5 より前から利用可能で、さまざまなドキュメントを組み合わせて一度に表示するのに便利です。各フレームにはそのコンテンツを含めることができます。通常、これらは HTML や画像などの別の Web ファイルになります。
構文
ここでは、開始タグは
の終了タグで終わります。 タグには 1 つ以上の複数のフレーム タグが含まれる場合があります。各フレームタグは で始まります。属性名「src」を持つタグ。ここにフレームのコンテンツを渡します。紹介したように、このコンテンツは HTML などの Web ファイルや画像の受け渡しなど、あらゆるものにすることができます。<frameset cols / rows = ", , , " > <frame src = "source file name. . . " > . . . . . . . . . . . . <frame src = "source file name. . . " > </frameset>
ここには、属性列または行を含む開始タグ フレームセットがあります。通常、フレームセット タグは複数のフレームを結合するために使用されるため、これら 2 つの属性はフレームセット タグとともに使用されます。これらのタグは、行または列を形成してさまざまなフレームを配置できるようにするだけです。単純なフレーム タグが開始タグの後に続きます。フレーム内にファイルを表示するには、フレームタグの「src」属性を使用し、その値としてファイル名を渡します。ドットを使用して、1 つのフレームに複数のフレームを含めることができることを示しました。そして最後に、終了タグ でフレームセット タグを閉じます。
フレームセットタグの属性
以下は、frameset タグでサポートされている属性のリストです。
1. Cols: この属性は、フレームを内部に配置するために使用されます。 Cols 属性はフレームセットを複数の列に分割し、フレームを垂直に表示します。この属性により、フレームセット内の各列の幅を設定することもできます。この属性に値を渡すことで、フレームごとに異なる値を設定できます。値は、パーセンテージ、ピクセル、または相対長で渡すことができます。この属性のデフォルト値は 100% です。
2. rows: この属性も、cols 属性に似ています。 rows 属性はフレームセットを複数の行に分割し、フレームを 1 つずつ水平に表示します。 Cols 属性と同様の値を渡して、各フレームの高さを設定できます。行と列の両方を使用すると、望ましい結果が得られます。この属性のデフォルト値も 100% です。
3. border: この属性は、フレームセット内の各フレームの幅を定義するために、frameset タグ上で使用されます。
4.フレームスペース: フレームセットタグは、「フレーム間隔」属性を使用して、フレーム内のフレーム間のギャップを確立します。
HTML フレームセット タグの実装例
以下は HTML フレームセット タグの例です:
例 #1
1 つの親ウィンドウでフレームとして異なるファイルを使用するため、複数の Html ファイルが含まれています。
コード:
メインファイル:
<!DOCTYPE html> <html> <head> <title> frameset tag in HTML </title> <style> </style> </head> <frameset> <frame src = "frame1.html" > </frameset> </html>
フレーム 1 という名前のソース ファイルが 1 つあります。
frame1.html:
<!DOCTYPE html>
<html>
<head>
<title> Frameset Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.15) ;
}
</style>
</head>
<body>
<h2> Example of Frameset tag </h2>
<h1> Frame 1 </h1>
</body>
</html>
出力:
単一のフレームとして含まれるファイルは 1 つだけなので、ページには Frame.html のコンテンツ全体が表示されます。フレームの幅と高さは、デフォルトでは 100% です。そのため、1 つのフレームがすべての領域を占めることになります。
例 #2
例にもう 1 つのフレームを追加し、cols 属性を使用して列方向に分割し、値をパーセンテージで渡してみましょう。
コード:
frame2.html:
<!DOCTYPE html>
<html>
<head>
<title> Frameset Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
</style>
</head
<body>
<h2> Hello World..! </h2>
<h1> Frame 2 </h1>
</body>
</html>
メインファイル:
<!DOCTYPE html> <html> <head> <title> frameset tag in HTML </title> <style> </style> </head> <frameset cols = "40% , 60 %" > <frame src = "frame1.html" > <frame src = "frame2.html" > </frameset> </html>
出力:
ここでは、2 つのフレームを渡し、値が 40% と 60% として渡された Cols 属性を使用してそれらを分割しました。最初のフレームの幅を 40%、2 番目のフレームの幅を 60% にします。
例 #3
rows属性を使って同じフレームを横に分割してみましょう。同じ最後の例を変更します。違いは、cols 属性が rows 属性に置き換えられることです。 rows 属性も、cols 属性と同様の値を取ります。フレーム数に応じて複数の値を渡すことができます。
コード:
メインファイル:
<!DOCTYPE html> <html> <head> <title> frameset tag in HTML </title> <style> </style> </head> <frameset rows = "50% , 50%" > <frame src = "frame1.html" > <frame src = "frame2.html" > </frameset> </html>
出力:
ここでは、出力は同じ高さ 50% の 2 つの水平フレームになります。この高さは実際のブラウザ ウィンドウに対応することに注意してください。
結論
HTMLのframesetタグとその目的、活用方法について学びました。このタグは、複数のフレームを 1 つの表示ウィンドウに結合して表示することを目的としています。利用可能な属性を使用してフレームの位置とサイズを定義することもできます。このタグは HTML 5 以降非推奨になりました。
以上がHTMLフレームセットタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。