フレーム
目次
T.フレームの基本構成
U.フレーム内での表示方法を設定する
V.フレームを区切る枠を消す
W.フレーム内にリンク先を指定する
X.インラインフレーム

T.フレームの基本構成

<FRAMESET rows="分割高さ">〜</FRAMESET>
<FRAMESET cols="分割幅">〜</FRAMESET>
<FRAME src="URL" name="フレーム名">

分割高さ横割した時の各区切りの高さを指定(ピクセル、%、*)
分割幅
縦割した時の各区切りの幅を指定(ピクセル、%,*)
URL
フレームの内容として表示するHTML文書のURL
フレーム名
リンクなどの表示先として指定する場合に利用する名前

例ーTソース
FRAM1.HTML
FRAM2.HTML
FRAM3.HTML
<HTML>
<HEAD>
<TITLE>フレーム</TITLE>
</HEAD>
<FRAMESET rows="*,*,*">
<FRAME src="FRAM1.HTML">
<FRAME src="FRAM2.HTML">
<FRAME src="FRAM3.HTML">
<NOFRAMES>
<BODY>
このHomepageはフレーム対応のブラウザで見て下さい
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
サンプル


注)
フレームを指定する場合、本来BODY要素を記述する部分にFRAMESET要素を配置し
BODY要素は記述しません。
ただし、<NOFRAMES>〜</NOFRAMES>(フレーム未対応ブラウザ対応)
には必要です。

例ーUソース
F
R
A
M
1
.
H
T
M
L
F
R
A
M
2
.
H
T
M
L
F
R
A
M
3
.
H
T
M
L
<HTML>
<HEAD>
<TITLE>フレーム</TITLE>
</HEAD>
<FRAMESET cols="*,*,*">
<FRAME src="FRAM1.HTML">
<FRAME src="FRAM2.HTML">
<FRAME src="FRAM3.HTML">
<NOFRAMES>
<BODY>
このHomepageはフレーム対応のブラウザで見て下さい
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
サンプル


例ーVソース
FRAM1.HTMLFRAM2.HTML
FRAM3.HTMLFRAM4.HTML
<HTML>
<HEAD>
<TITLE>フレーム</TITLE>
</HEAD>
<FRAMESET rows="*,*" cols="*,*">
<FRAME src="FRAM1.HTML">
<FRAME src="FRAM2.HTML">
<FRAME src="FRAM3.HTML">
<FRAME src="FRAM4.HTML">
<NOFRAMES>
<BODY>
このHomepageはフレーム対応のブラウザで見て下さい
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
サンプル


例ーWソース
FRAM1.HTML
FRAM2.HTMLFRAM3.HTML
<HTML>
<HEAD>
<TITLE>フレーム</TITLE>
</HEAD>
<FRAMESET rows="*,*">
<FRAME src="FRAM1.HTML">
<FRAMESET cols="*,*">
<FRAME src="FRAM2.HTML">
<FRAME src="FRAM3.HTML">
</FRAMESET>
<NOFRAMES>
<BODY>
このHomepageはフレーム対応のブラウザで見て下さい
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
サンプル


備考
<NOFRAMES>〜</NOFRAMES>
は、フレーム未対応のブラウザ対応です。

U.フレーム内での表示方法を設定する

<FRAME scrolling="スクロールバーの制御" noresize>
<FRAME marginwidth="左右のマージン" marginheight="上下のマージン">

スクロールの制御auto
yes
no
必要に応じてスクロール可能(デフォルト)
常にスクロール可能(スクロールバーを表示)
常にスクロール不可(スクロールバーを非表示)
noresizeフレームのサイズ変更禁止
左右のマージンフレーム内の左右のマージン(ピクセル)
上下マージンフレーム内の上下のマージン(ピクセル)

<HTML>
<HEAD>
<TITLE>フレーム内での表示方法を設定する</TITLE>
</HEAD>
<FRAMESET rows="70,*" cols="*,*">
    <FRAME src="FRAM1.HTML" scrolling="no" noresize>
    <FRAMESET cols="150,*">
        <FRAME src="FRAM2.HTML" marginwidth="0" marginheight="0">
        <FRAME src="FRAM3.HTML" marginwidth="50" marginheight="30">
    </FRAMESET>
<NOFRAMES>
<BODY>
このHomepageはフレーム対応のブラウザで見て下さい
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
サンプル

V.フレームを区切る枠を消す

<FRAMESET frameborder="0" border="0" framespacing="0">〜</FRAMESET>

<HTML>
<HEAD>
<TITLE>フレーム</TITLE>
</HEAD>
<FRAMESET rows="*,*" frameborder="0" border="0" framespacing="0">
<FRAME src="FRAM1.HTML">
<FRAMESET cols="150,*">
    <FRAME src="FRAM2.HTML">
    <FRAME src="FRAM3.HTML">
</FRAMESET>
<NOFRAMES>
<BODY>
このHomepageはフレーム対応のブラウザで見て下さい
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
サンプル

W.フレーム内にリンク先を指定する

<A href="URL" target="ターゲット名">

[ターゲット名]
_topフレームを解除して、リンク先をウインドウ全体に表示辞する
_parent リンク先をリンク元のフレームの親フレームに表示する。
親フレームがない場合には、「self」と同様の結果になる
_selfリンク先をリンク元と同じフレームに表示する。
_blank新しいウインドウを開いて、リンク先をそのウインドウに表示する。

メインソース
<HTML lang="ja">
<HEAD>
<TITLE>フレームサンプルーT</TITLE>
</HEAD>
<FRAMESET rows="100,*">
  <FRAME src="html_9A1.html" NAME="f1">
  <FRAMESET COLS="*,*">
    <FRAME src="html_9G1.html" NAME="f2">
    <FRAME src="html_9A2.html" NAME="f3">
  </FRAMESET>
<NOFRAMES>
<BODY>
このHomepageはフレーム対応のブラウザで見て下さい
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
左側のフレームのソース
<HTML>
<HEAD>
<TITLE>フレーム</TITLE>
</HEAD>
<BODY>
<A HREF="html_9A2.html" target="f3">フレームーU</A>
<A href="html_9A3.html" target="f3">フレームーV</A>
<A href="html_9A4.html" target="f3">フレームーW</A>
</BODY>
</HTML>
サンプル

X.インラインフレーム

<IFRAME src="URL" name="フレーム名">〜</IFRAME>

[その他に指定可能な属性]
widthフレームの幅(ピクセルまたは%)
heightフレームの高さ(ピクセルまたは%)
marginwidthフレーム内の左右のマージン(ピクセル)
marginheightフレーム内の上下のマージン(ピクセル)
scrollingスクロール(auto:自動/yes:あり/no:なし
frameborderフレーム枠の表示/非表示(1:表示/0:非表示)
align行揃え(left・right・center)

例ーTソース

<HTML lang="ja">
<HEAD>
<TITLE>インラインフレーム</TITLE>
</HEAD>
<BODY>
<IFRAME src="html_9H.html" name="f1" width="300" height="200">
</IFRAME>
</BODY>
</HTML>

[メインに戻る]