授業形式でhtml・ソース・タグを勉強し、ホームページを自作する　フレーム分割

URLを指定して表示させたり、検索エンジンで検索してクリックして表示されたページは、
皆さん、すべて１枚のページでできていると思っていませんか？

実は複数のページを同時に、まるで１枚のページのように表示させる方法があるんです。
それが「フレーム」です。
フレーム分割はホームページ作成者にとって便利なものです。
しかし、一般的に検索エンジン対策には不向きと言われています。
この辺の議論はちょっと無視することにして、実際にどんな風になるのか作ってみましょう。

フレームを使ったページの冒頭の宣言は、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
になります。
フレーム内の各ページは今までどおりです。

<frameset cols="******">～</frameset>: フレームを左右に分割します。
<frameset rows="******">～</frameset>: フレームを上下に分割します。
<frame name="***" src="***.html">～</frame>: 個々のフレームを設定します。
name はリンクなどのページ切り替えで指定するためのものです。
src は呼び出すページです。

分割の量は、ピクセルでも％でも指定できます。
また、２分割の場合は片側だけ指定して他方は「*」で省略できます。
例：cols="200,*"、rows="15%,*"
3分割なら cols="200,*,160" といった感じです。

上下分割へ｜境界線（ボーダーライン）

■左右分割の練習

練習はこの左右分割で行います。
それぞれのソースをそれぞれの表題の名前で保存してください。全部で４ページになります。

◇フレーム左右分割.htmlのソース-----------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<frameset cols="240,*">
<frame name="fr1" src="a.html">
<frame name="fr2" src="b1.html">
</frameset>
<noframes>
<body bgcolor="#ffffff">
<p>このページを表示するには、<br>
フレームをサポートしているブラウザが必要です。</p>
</body>
</noframes>
</html>

◇a.htmlのソース-------------------------------------------------------------

<html>
<body bgcolor="#ffffff">
<h2>横分割</h2>
右のシートに切り替え表示<br>
<br>
<a href="b1.html" target="fr2">最初のページ</a><br>
<a href="b2.html" target="fr2">２ページ目</a><br>
<a href="b3.html" target="fr2">３ページ目</a><br>
</body>
</html>

◇b1.htmlのソース------------------------------------------------------------

<html>
<head>
<style type="text/css">
<!--
body { 
	background-color:#ffffff;
	background-image:url(gazou/bcg1.gif);
}
* { font:150%/150% 'MS UI Gothic' }
-->
</style>
</head>
<body>
最初の画面です。
</body>
</html>

◇b2.htmlのソース------------------------------------------------------------

<html>
<head>
<style type="text/css">
<!--
body { 
	background-color:#ffffff;
	background-image:url(gazou/bcg2.gif);
}
* { font:150%/150% 'MS UI Gothic' }
-->
</style>
</head>
<body>
２ページ目の画面です。
</html>

◇b3.htmlのソース------------------------------------------------------------

<html>
<head>
<style type="text/css">
<!--
body { 
	background-color:#ffffff;
	background-image:url(gazou/bcg3.gif);
}
* { font:150%/150% 'MS UI Gothic' }
-->
</style>
</head>
<body>
３ページ目の画面です。
</body>
</html>

-----------------------------------------------------------------------------

≪完成したイメージ≫

左右分割トップへ｜境界線（ボーダーライン）

■上下分割の練習

◇フレーム上下分割.htmlのソース-----------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<frameset rows="150,*">
<frame name="fr1" src="c.html">
<frame name="fr2" src="b1.html">
</frameset>
<noframes>
<body bgcolor="#ffffff">
<p>このページを表示するには、<br>
フレームをサポートしているブラウザが必要です。</p>
</body>
</noframes>
</html>

◇c.htmlのソース-------------------------------------------------------------

<html>
<body bgcolor="#ffffff">
<h2>縦分割</h2>
右のシートに切り替え表示<br>
<br>
<a href="b1.html" target="fr2">最初のページ</a>
｜<a href="b2.html" target="fr2">２ページ目</a>
｜<a href="b3.html" target="fr2">３ページ目</a>
</body>
</html>

-----------------------------------------------------------------------------
b1.html ～ b3.html は、左右分割で作ったものを利用します。
フレーム上下分割はイメージを用意していません。
あなた自身、チャレンジしてください。

左右分割トップへ｜上下分割トップへ

■境界線（ボーダーライン）について

境界線をうまく処理することで、ページのイメージが変わります。
ですから色々と試してみてください。

★境界線の表示・非表示

<frameset frameborder="0">～</frameset>　　　　0：非表示　　1：表示（デフォルト）

★境界線の固定

<frame noresize>　　通常、境界線は動かせますがこれを書くと固定できます。

★境界線の幅を指定

<frameset border="1">～</frameset>　　　　0～：数値（ピクセル）

★境界線の色指定

<frameset bordercolor="#999999">～</frameset> <frame bordercolor="#6666ff">

★スクロールバーの表示・非表示

<frame scrolling="auto">　　　　auto：自動　　yes：表示　　no：非表示

■「フレーム分割」利用時の注意点

リンクする場合の表示位置を指定すること。
特に外部のページへのリンクはフレーム内に表示しないこと。
（外部のページも許可を得たページならＯＫです）
リンク（解説・URL）の最後に書いています。