自習８（フレーム）
−−−−−−−−−−−−−−−−−−−−−−−−−
今回は「フレーム」を取り上げます。フレームというのは画面を
分割する技法です。今回は左右２画面で実習します。４ヶのファイル
を作る必要があります。少し大変ですが、皆さんもメモ帳になれて
きておられるので１ヶずつしっかり作成して名前を付けて保存して下さい。
１．全体の解説
それぞれのファイルの機能を説明し、あとでソースを示します。
1) 1.html・・・フレームの構造を定義
*---*--------*
| | |
| | |
| | |
*---*--------*
25%
今回は左右２画面に分割し、左側を全体の20％とします。
このファイルはフレームの構造を定義しています。
2) 2.html・・・・・最初の左側のフレームの内容（目次をかねる）
3) 3.html・・・・・最初の右側のフレームの内容
4) 4.html・・・・・第４のページ（テスト用）
２．ソースコード下記の４ヶのファイルを
準備しそれぞれ指定した名前で保存して下さい。
<!-- 1.html -->
<hrml>
<frameset cols="20%,*">
<frame src="2.html" name="left">
<frame src="3.html" name="right">
</frameset>
<body>
ここはフレーム外
</body>
</html>
<!-- 2.html -->
<hrml>
<body bgcolor="lightyellow">
2.htm
<h3>最初の左側のフレームです</h3>
<a href="4.html" target="right">４ページ目を右側フレーム
に表示</a><br><br>
<a href="4.html" target="_blank">４ページ目を新規フレーム
に表示</a><br><br>
<a href="3.html" target="right">最初のページへ</a><br>
</body>
</html>
<!-- 3.html -->
<hrml>
<body>
3.htm
<center>
<h3>最初の右側のフレームです</h3>
</center>
</body>
</html>
<!-- 4.html -->
<hrml>
<body bgcolor="magenta">
4.htm
<center>
<h3>４番目のページです。</h3>
</center>
</body>
</html>
３．表示の実験：結果の見本
1.htmlをブラウザで開き、リンクをクリックしてジャンプする様子を
確認してください。
目次の「４ページ目を右側フレームに表示」や「４ページ目を新規
フレームに表示」をクリックするといずれも4.html へジャンプします。
両者の違いを比較してみましょう。
４．デバッグのコツ
１）1.htmlをブラウザで開くと左右２画面（フレーム）に分割されます。
分割がおかしいときはこのファイルを修正する。
２）フレーム内の表示がおかしいときは、2.html や 3.html を単独で
ブラウザで開いて修正する。
３）target の指定に注意。