フレーム
フレームを使うとページを横に分割したり、縦に分割することができます。
このサイトも前バージョンでは横に分割していました。
(前バージョン:[http://homepage2.nifty.com/hazi/2001/])
フレームページの仕組みは下のようになってます。
図を見てもらえば分かるように2つに分割する場合3つのhtmlファイルが必要になります。
a.htmlはブラウザ上では表示されません。
a.htmlにはb.htmlとc.htmlをどういう割合で表示するかを設定します。
フレームを設定する(上の図で言うとa.html)
下のように書いたファイル(a.html)を作ります。
cols="20%,80%"のcolsというのは横に20:80の割合で分割することを意味していて、
縦に分割するにはrowsにします。
3つ以上分割するにはcols="10%,20%,70%"のようにするだけです。
<head>
<title>タイトル</title>
</head>
<frameset cols="20%,80%">
<frame src="b.html">
<frame src="c.html">
</frameset>
<html>
下のように書くと、b.htmlのページの左右の余白が0pxに、上下の余白が50pxになります。
余白を指定する
<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="20%,80%">
<frame src="b.html" marginwidth="0px" marginheight="50px">
<frame src="c.html">
</frameset>
<html>
リンク先を開くフレームを指定する
リンク先のターゲットを指定します。ここでは左側のフレームにリンクを貼り、右側にリンク先を開く指定について説明します。
まずは下のリンクをクリックして確認のページを開き、ターゲット指定・未指定の違いを確認してみてください。
確認ページ
(1)フレームに名前をつける。
まずはフレームに名前をつけてやります。以下の例では「right」と名前を付けてます。
<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="20%,80%">
<frame src="b.html">
<frame src="c.html" name="right">
</frameset>
<html>
(2)リンクにターゲットを指定する。
ただ単に、<a href="abc.html">
と指定したのでは、リンクがあるフレームに開くだけです。
ターゲットを指定するには、下のようにします。
<a href="abc.html" target="right">
フレームを解除して開くには以下のようにターゲットを指定します。
<a href="abc.html" target="_top">

