フレームタグとは１つのページに２つ以上のページを同時に表示するタグのことです
図で説明すると次のようになります
まず２つのページを表示するためのページを用意します。
a.html
↓
次にa.htmlページ内に表示する２つのページを用意します。
|
b.html
|
c.html
|
↓
以下のタグをa.htmlに記入します。
↓
a.html内にb.htmlとc.htmlが表示されます。
| b.html | c.html |
↓
a.htmlページ全体のタグは以下のようになります。
<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="200,*" border="0">
<frame name="left" src="b.html" scrolling="yes">
<frame name="right" src="c.html" scrolling="yes">
<noframes>
<body>
フレームを表示できないブラウザへのメッセージ
</body>
</noframes>
</frameset>
<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="200,*" border="0">
<frame name="left" src="b.html" scrolling="yes">
<frame name="right" src="c.html" scrolling="yes">
<noframes>
<body>
フレームを表示できないブラウザへのメッセージ
</body>
</noframes>
</frameset>
<html>
●フレームページのポイント●
- frame nameは半角英数字であればなんでも構いません[hidari]や[migi]など
- leftからrightへテキスト(文字)でリンクする場合フレームleftに表示するページに
<a href="URL" target="right">リンク文字</a>と記入します - leftからrightへ画像でリンクする場合フレームleftに表示するページに
<a href="URL" target="right">
<img src="画像URL">
</a>と記入します - border="0"はフレーム間の枠の太さ数字を大きくすると太くなり小さくすると細くなる
bordercolor="カラーコード"を加えると色をつけることも出来ます。 - scrolling="yes"はyesだとスクロールバー表示、noだとスクロールバー非表示なります
- cols="200,*"にするとページが縦割りになり
数字が大きいと左側が広くなり右側が狭くなる数字が小さいと逆になります - rows="200,*"にするとページが横割りになり
数字が大きいと上側が広くなり下側が狭くなる数字が小さいと逆になります
※targetリンク <a href="URL" target="*****">リンク文字</a>
target=""でのリンク方法指定は以下のようになります。
- target="フレーム名"(フレーム"A"からフレーム"B"へのリンク）
- target="_blank"（別ウインドウを開いてのリンク）
- target="_top"（フレームページからフレームの無いページへのリンク）
- target="_self"（フレーム内だけを切り替えるリンク）
フレームリンクを実際に試してみて下さい
(クリックするとテストページが別窓で開きます)
↓