コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTMLのフレームタグ

王林

リリース： 2024-09-04 16:32:03

オリジナル

1121 人が閲覧しました

HTML フレームタグは、単一の Web ページ上に複数のサイトをセクション形式で表示するために使用されます。このタグを使用すると、コンテンツが異なる複数の Web ページを組み合わせて 1 つの Web ページに個別に表示できるように Web ページをデザインできます。これは、単一の Web ページをフレームと呼ばれるさまざまなセクションに分割することによって実現されます。個々のフレームは個別にロードできます。フレームタグはフレームセットタグと一緒に使用されます。フレームセットタグはコンテナと見なされ、その中の複数のフレームタグは複数のサイトを表します。

構文:

フレームタグの基本的な構文は次のとおりです。

<frame src = "URL">

ログイン後にコピー

src 属性はファイルのソースを指定します。タグは他のいくつかの属性をサポートしていますが、src が主要な属性です。

前述したように、タグはとともに使用されます。タグ。フレームセットは、各フレームが同じページにロードされる個々のサイトを表す複数のフレームのコレクションと考えることができます。 Frame タグは、以下のように Frameset タグとともに使用されます。

<frameset>
<frame src = " ">
<frame src = " ">
.
.
<frame src = " ">
</frameset>

ログイン後にコピー

frameset タグには終了タグがありますが、frame タグには終了タグがないことに注意してください。

HTML の Frame タグの例

HTML のフレームタグの例を以下に示します。

例 #1 – フレームを水平に整列させる

frame1、frame2、main の 3 つのファイルがあります。

フレーム1.html

コード:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>

ログイン後にコピー

ログイン後にコピー

フレーム2.html

コード:

<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>

ログイン後にコピー

ログイン後にコピー

Main.html

コード:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset cols = "50%, 50%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</head>
<body>
</body>
</html>

ログイン後にコピー

出力: ここでは、cols 属性を使用して列として指定し、各フレームの幅は 50% に設定されています。

HTMLのフレームタグ

例 #2 – フレームを垂直方向に整列させる

frame1、frame2、frame3、main の 4 つのファイルがあります。

フレーム1.html

コード:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>

ログイン後にコピー

ログイン後にコピー

フレーム2.html

コード:

<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>

ログイン後にコピー

ログイン後にコピー

フレーム3.html

コード:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 3 </h1>
</div>
</body>
</html>

ログイン後にコピー

Main.html

コード:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset rows = "30%, 30%, 30%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
<frame src = "frame3.html" >
</frameset>
</head>
<body>
</body>
</html>

ログイン後にコピー

出力: ここでは、frameset タグにcols 属性を使用してフレームを水平に分割し、高さはパーセンテージで指定されています。

HTMLのフレームタグ

例 #3 – リンクを使用してさまざまなフレームを移動する

この例では、frame1.html、frame2.html、frame3.html の 3 つのファイルは同じです。

フレームタグで name 属性を使用します。

Main.html

コード:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset cols = "30%, * " >
<frame src = "menu.html" name = "menu" >
<frame name = "frame" >
</frameset>
</head>
<body>
</body>
</html>

ログイン後にコピー

menu.html

コード:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : center;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> Menu </h2>
<a href = "frame1.html" target = "frame"> Frame 1 </a> </br> </br>
<a href = "frame2.html" target = "frame"> Frame 2 </a> </br> </br>
<a href = "frame3.html" target = "frame"> Frame 3 </a>
</div>
</body>
</html>

ログイン後にコピー

こちら Frameset タグでは、2 つのフレームを最初のフレームの 30% の幅、2 番目のフレームの残りの全幅に分割しています。最初のフレームには、ハイパーリンクの形式でメニューがリストされます。 2 番目のフレームには名前を割り当て、menu.html でターゲットをすべてのリンクのフレーム名として設定しました。したがって、このリンクはフレームを誘導し、コンテンツは同じフレームに表示されます。

出力:

HTMLのフレームタグ

注: HTML5 では、