〆 いろいろなフレームを作成します
※ 注意
フレームを用いるといくつかの弊害が発生します。
ブックマークがうまく張れない、検索エンジンでヒットしにくいなどの問題です。
個人的なサイトであれば使っても構いませんが、あまりお勧めできません。
利用する場合は、その特性を十分理解して利用してください。
企業のサイトでは、ほとんど使われていません。
・ 縦に分割します
<frameset cols="??%, ??%">, <frame src="～.html">
※ フレームを設定するhtmlファイルには、<body>～</body>がありません。
※ 分割をするときは必ずリンクの設定を行ってください。
<html>
<head>
<title> フレームサンプル１ </title>
</head>
<frameset cols="20%, 80%">
<frame src="./menu01.html">
<frame src="./main01.html">
</frameset>
<noframes>
<h1>これが表示される場合は、
フレームが表示できないブラウザです</h1>
</noframes>
</html>
|
|
フレーム分割 縦
|
| File Edit Tool Help |
Menu1
Menu2
Menu3
|
メインページ
|
表示サンプル１
|
・ 横に分割します
<frameset rows="??%, ??%">, <frame src="～.html">
<html>
<head>
<title> フレームサンプル２ </title>
</head>
<frameset rows="30%, 70%">
<frame src="./menu02.html">
<frame src="./main02.html">
</frameset>
</html>
|
|
フレーム分割 横
|
| File Edit Tool Help |
Menu1 Menu2 Menu3
|
メインページ
|
表示サンプル２
|
・ ３つに分割します
<html>
<head>
<title> フレームサンプル３ </title>
</head>
<frameset rows="30%, 70%">
<frame src="./A.html">
<frameset cols="20%, 80%">
<frame src="./B.html">
<frame src="./C.html">
</frameset>
</frameset>
</html>
|
|
 フレーム３分割
|
| File Edit Tool Help |
A
|
B
|
C
|
|
・ ４つに分割します
<html>
<head>
<title> フレームサンプル４ </title>
</head>
<frameset rows="30%, 70%" cols="20%", "80%">
<frame src="./A.html">
<frame src="./B.html">
<frame src="./C.html">
<frame src="./D.html">
</frameset>
</html>
|
|
 フレーム４分割
|
| File Edit Tool Help |
A
|
B
|
C
|
D
|
|
・ 別フレーム間のリンクを設定します
<frame name="???">,
<a href="??.html" target="???">
せっかくフレームで分割してもリンクが設定されていないと意味がありません。
フレーム分割するファイルで領域ごとに名前を付けます。（例１）
この名前を用いて、右側のメニューフレームから左側のメインフレームへ
リンクを設定します。（例２）
（例１）分割したフレームへの名前の付け方
<html>
<head>
<title> フレームサンプル５ </title>
</head>
<frameset rows="20%, 80%">
<frame src="./menu05.html" name="f_menu05">
<frame src="./main05.html" name="f_main05">
</frameset>
</html>
|
|
|
（例２）左側のメニューフレームの設定
<html>
<head>
<title> メニューサンプル </title>
</head>
<a href="main05-1.html" target="f_main03">
右側の表示を変える</a>
<a href="main05-3.html" target="_blank">
新しいウィンドウで表示</a>
<a href="main05-2.html" target="_top">
フレームを解除して表示</a>
<a href="main05-2.html" target="_parent">
フレームの親として表示</a>
</html>
|
|
表示サンプル５
|
・ スクロールバーの設定をします
<frameset scrolling="yes, no, auto">
scrolling="yes" : スクロールバーを表示
scrolling="no" : スクロールバーを非表示
scrolling="auto" : 必要に応じて、非表示、表示を切り替える
<html>
<head>
<title> フレームサンプル６ </title>
</head>
<frameset cols="20%, 80%">
<frame src="./menu01.html"
scrolling="yes">
<frame src="./main01.html">
</frameset>
<body>
～
</body>
</html>
|
|
表示サンプル６
|
・ フレームの境界線の表示、非表示を設定します
<frameset frameborder="0, 1">
frameborder="0" : 境界線を非表示
frameborder="1" : 境界線を表示(デフォルト)
※frameborder="0"と設定して、境界線を非表示としても
フレーム間の境界に白いラインが残ります。
次のborder="0" 設定することでこれを消すことができます。
<html>
<head>
<title> フレームサンプル７ </title>
</head>
<frameset cols="20%, 80%" frameborder="0">
<frame src="./menu01.html">
<frame src="./main01.html">
</frameset>
<body>
～
</body>
</html>
|
|
表示サンプル７
|
・ フレームの境界線の幅を設定します
<frameset border="境界線の幅">
border="0" : 境界線を非表示
<html>
<head>
<title> フレームサンプル８ </title>
</head>
<frameset cols="20%, 80%" border="10">
<frame src="./menu01.html">
<frame src="./main01.html">
</frameset>
<body>
～
</body>
</html>
|
|
表示サンプル８
|
・ フレームの境界線を固定します
<frame noresize >
<html>
<head>
<title> フレームサンプル９ </title>
</head>
<frameset cols="20%, 80%">
<frame src="./menu01.html" noresize>
<frame src="./main01.html">
</frameset>
<body>
～
</body>
</html>
|
|
表示サンプル９
|
・ フレームの外枠との間隔を設定します
<frame marginwidth="??" marginheight="??">
こちらを 参考のこと。インラインフレームと同じように使います。
TOP 
Web
The link to this site is free. /
Last Updated : 28.May.2012