フレームページを作ろう

フレームの設定

縦に分割する場合
<frameset cols="★">
<frame src="☆" name="■">
<frame src="☆" name="□">
<noframes>フレーム未対応ブラウザではご覧になれません</noframes>
</frameset>

横に分割の場合
<frameset rows="★">
<frame src="☆" name="■">
<frame src="☆" name="□">
<noframes>フレーム未対応ブラウザではご覧になれません</noframes>
</frameset>

縦、横に分割の場合(3つに分割)<frameset>を入れ子状に使用します
<frameset cols="★">
<frame src="☆" name="■">
   <frameset rows="★">
   <frame src="☆" name="■">
   <frame src="☆" name="□">
   </frameset>
<noframes>フレーム未対応ブラウザではご覧になれません</noframes>
</frameset>
★=分割するサイズの指定(%,*またはピクセル数)
☆=表示するそれぞれのファイル名
■=分割したウィンドゥの任意の名前(例、hidari)
□=同上(例、migi)
ここで作るフレームページはふたつのファイルを同時に表示させる
窓枠のようなものです、窓枠に表示させる複数のファイルを
<frame src="☆">で 指定するわけです
タグ使用例(縦分割の場合)
<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="left.html" name="hidari">
<frame src="right.html" name="migi">
<noframes>
<body>
フレーム未対応ブラウザではご覧になれません
</body>
</noframes>
</frameset>
</html>
ブラウザ表示
left.html





right.html





タグ使用例(縦,横3分割の場合)
<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="left.html" name="hidari">
<frameset rows="50%,*">
<frame src="right_up.html" name="migiue">
<frame src="right_down.html" name="migisita">
</frameset>
<noframes>
<body>
フレーム未対応ブラウザではご覧になれません
</body>
</noframes>
</frameset>
</html>
ブラウザ表示
left.html





right_up.html

right_down.html


フレーム境界線の設定

<frameset frameborder="★">
★=yesまたは1(境界線を表示),noまたは0(境界線を非表示)

フレーム境界線の太さの設定

<frameset border="★">
<frameset framespacing="★">
★=境界線の太さ(ピクセル数で指定)

フレーム境界線に色を付ける

<frameset bordercolor="★">
★=カラーネームまたは#カラーコード
タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<frameset cols="30%,*" frameborder="yes" border="2" bordercolor="pink">
<frame src="left.html" name="hidari">
<frame src="right.html" name="migi">
<noframe>
<body bgcolor="#008b8b">
フレーム未対応ブラウザではご覧になれません
</body>
</noframe>
</frameset>
</html>

スクロールの有無を指定

<frame scrolling="★">
★=スクロールの有無
yes(スクロールの許可) no(スクロール禁止) auto(内容に応じて自動)
タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<frameset cols="30%,*" frameborder="yes" border="2" bordercolor="pink">
<frame src="left.html" name="hidari" scrolling="auto">
<frame src="right.html" name="migi" scrolling="no">

<noframe>
<body bgcolor="#008b8b">
フレーム未対応ブラウザではご覧になれません
</body>
</noframe>
</frameset>
</html>

フレームサイズの変更を禁止する

<frame noresize;>
フレームの境界線はマウスでドラッグすると移動してフレームサイズが
変更できますがこのタグを使うとサイズの変更は出来なくなります
タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<frameset cols="30%,*" frameborder="yes" border="2" bordercolor="pink">
<frame src="left.html" name="hidari" scrolling="auto" noresize>
<frame src="right.html" name="migi" scrolling="no" noresize>
<noframe>
<body bgcolor="#008b8b">
フレーム未対応ブラウザではご覧になれません
</body>
</noframe>
</frameset>
</html>

同一ページ内でもう一つのページを表示

のみ対応です
<iframe src="★"></iframe>
★=表示させるページのファイル名またはURL
インラインフレームは複数のページを分割ウィンドウで表示させるのではなく
同じページ内に違うページを読み込みます
タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body bgcolor="#008b8b">
<iframe src="★" name="mannaka" width="450" height="120" marginheight="20" marginwidth="20" scrolling="yes">
</iframe>
</body>
</html>
上のソースのサンプルです


インラインフレーム境界線の設定(スタイルシートの項にジャンプします)