1.フレーム基本形

sample

★縦に分割(左右に分かれます)★

<html>

<head>

<title>HTML│CSSタグ辞書</title>

</head>

<frameset cols="150,*">

<frame src="frame1.html" name="left">
<frame src="frame2.html" name="right">

</frameset>

</html>

preview

explain

cols="☆,☆"・・・フレームを縦に分割

cols="150,*"(左側が150ピクセル、右側がその残り)

cols="80%,*"(左側が80%、右側がその残り、つまり20%)

使える単位は「ピクセル(単位つけない)」「%」「*(アスタリスク)」

sample

★横に分割(上下に分かれます)★

<html>

<head>

<title>HTML│CSSタグ辞書</title>

</head>

<frameset rows="150,*">

<frame src="frame1.html" name="top">
<frame src="frame2.html" name="bottom">

</frameset>

</html>

preview

explain

rows=" , "・・・フレームを横に分割

rows="150,*"(上が150ピクセル、下がその残り)

rows="80%,*"(上が80%、下がその残り、つまり20%)

使える単位は「ピクセル(単位つけない)」「%」「*(アスタリスク)」

2.境界線の表示

sample

<frameset rows="150,*" frameborder="0">

<frame src="frame1.html" name="left">
<frame src="frame2.html" name="right">

</frameset>

preview

explain

frameborder="0"

フレームの境界線を非表示にします。

0
境界線非表示
1
境界線表示(デフォルト)
3.境界線の固定>

sample

<frameset rows="150,*">

<frame src="frame1.html" name="left" noresize >
<frame src="frame2.html" name="right">

</frameset>

preview

explain

<frame src=" " noresize>

フレームの境界線が動かせなくなります。

この指定がないと、境界線の上にカーソルを持っていくと境界線を動かすことができてしまいます。

↑page top
4.境界線の幅、色

sample

<frameset rows="150,*" bordercolor="#ff3366" border="5" >

<frame src="frame1.html" name="left">
<frame src="frame2.html" name="right">

</frameset>

preview

explain

<frameset rows=" , " bordercolor="#ff3366" border="5" >

bordercolorで境界線の色指定、borderで境界線の幅(太さ)指定

5.マージン

sample

<frameset rows="150,*">

<frame src="frame1.html" name="left" marginwidth="10" marginheight="10">
<frame src="frame2.html" name="right" marginwidth="50" marginheight="50">

</frameset>

preview

explain

<frame src=" " marginwidth="10" marginheight="10">
marginwidthでフレーム内の左右のマージン(あき具合)を指定。

marginheightでフレーム内の上下のマージン(あき具合)を指定。

6.スクロールバー表示

sample

<frameset rows="200,*">

<frame src="frame1.html" name="left" scrolling="yes">
<frame src="frame2.html" name="right" scrolling="auto" >

</frameset>

preview

explain

<frame src=" "scrolling=" ">

フレーム内のスクロールバーの表示非表示の設定

auto
必要に応じて表示される(初期値)
yes
表示する
no
表示しない

7.ウィンドウ指定

sample

<frameset rows="200,*">

<frame src="frame1.html" name="left">
<frame src="frame2.html" name="right" >

</frameset>

preview

explain

<frame src=" " name="left">

name=" "で各フレームに名前をつけます。

リンク先を違うフレームに表示したい場合などに使います。

(例.<a href="http://yahoo.co.jp" target="right">yahooはこちら</a>

8.インラインフレーム

sample

<html>

<head>

<title>HTML│CSSタグ辞書</title>

</head>

<body>
<iframe src="frame_sample8_1.html"></iframe>
<br />
↑iframeで別のhtmlファイルを読み込んでいます。
</body>
</html>

preview

explain

<iframe src=" "></iframe>

別のhtmlファイルを読み込む。

更新履歴などによく使用されています。