フレームタグ



1. フレームの基本
2. フレームタグ
3. インラインフレーム
4. IEのみ

1. フレームの基本


■ フレームの基本
説明 フレームのソースは基本的に次のように書く。
表記例 <HTML>
<HEAD>
<TITLE>フレームノーマル</TITLE>
</HEAD>
<FRAMESET cols="50%,*">
 <FRAME src="frame1.html">
 <FRAME src="frame2.html">
 <NOFRAMES>
  <BODY>
このページをご覧いただくにはフレーム対応のブラウザが必要です。
  </BODY>
 </NOFRAMES>
</FRAMESET>
</HTML>
表示例 フレームノーマル


2. フレームタグ


■ <FRAMESET>~</FRAMESET>
説明 フレームを設定する。
この中に<FRAME>タグを記述する。
表記例 <FRAMESET>
 <FRAME src="frame1.html">
 <FRAME src="frame2.html">
</FRAMESET>


■ <FRAMESET cols="...">
説明 フレームを横に分割する。
分割の割合をピクセル値やパーセントで書く。* は残りすべてを表す。
ユーザ環境によってウィンドウの大きさが違うので、すべてをピクセル値で指定するのはやめたほうががよい。
表記例1 <FRAMESET cols="200,*">
 <FRAME src="frame1.html">
 <FRAME src="frame2.html">
</FRAMESET>
表示例1 横分割1
表記例2 <FRAMESET cols="20%,*,30%">
 <FRAME src="frame1.html">
 <FRAME src="frame2.html">
 <FRAME src="frame3.html">
</FRAMESET>
表示例2 横分割2


■ <FRAMESET rows="...">
説明 フレームを縦に分割する。
分割の割合をピクセル値やパーセントで書く。* は残りすべてを表す。
ユーザ環境によってウィンドウの大きさが違うので、すべてをピクセル値で指定するのはやめたほうががよい。
表記例1 <FRAMESET rows="20%,*">
 <FRAME src="frame1.html">
 <FRAME src="frame2.html">
</FRAMESET>
表示例1 縦分割1
表記例2 <FRAMESET rows="50,100,*">
 <FRAME src="frame1.html">
 <FRAME src="frame2.html">
 <FRAME src="frame3.html">
</FRAMESET>
表示例2 縦分割2


■ 縦横分割
説明 上記の<FRAMESET cols="...">と<FRAMESET cols="...">を組み合わせる。
表記例 <FRAMESET cols="20%,*">
 <FRAME src="frame1.html">
 <FRAMESET rows="30%,*">
  <FRAME src="frame2.html">
  <FRAME src="frame3.html">
 </FRAMESET>
</FRAMESET>
表示例 縦横分割


■ <FRAMESET frameborder="...">
説明 境界線の表示。
"1":境界線を表示する。(デフォルト)
"0":境界線を表示しない。
※例は境界線を表示しない設定。でも細い線が表示されている。
表記例 <FRAMESET cols="20%,*" frameborder="0">
 <FRAME src="frame1.html">
 <FRAME src="frame2.html">
</FRAMESET>
表示例 境界線の表示


■ <FRAMESET border="...">
説明 境界線の太さ。デフォルトは"1"。
"0"にすると境界線が表示されない。frameborder っているの?
表記例 <FRAMESET cols="20%,*" border="0">
 <FRAME src="frame1.html">
 <FRAME src="frame2.html">
</FRAMESET>
表示例 境界線を表示しない


■ <FRAMESET bordercolor="...">
説明 境界線の色。
表記例 <FRAMESET cols="20%,*" bordercolor="#ff0000">
 <FRAME src="frame1.html">
 <FRAME src="frame2.html">
</FRAMESET>
表示例 境界線の色


■ <FRAME>
説明 1つ1つのフレームの設定。
表記例 <FRAMESET cols="20%,*">
 <FRAME src="frame1.html">
 <FRAME src="frame2.html">
</FRAMESET>


■ <FRAME src="...">
説明 フレームに表示する文書のURLを指定。
表記例 <FRAMESET cols="20%,*">
 <FRAME src="frame1.html">
 <FRAME src="frame2.html">
</FRAMESET>


■ <FRAME marginwidth="...">
■ <FRAME marginheight="...">
説明 フレームの余白。ピクセル値で指定。
marginwidth:左右の余白。
marginheight:上下の余白。
表記例 <FRAMESET cols="20%,*">
 <FRAME src="frame1.html" marginwidth="20">
 <FRAME src="frame2.html" marginheight="10">
</FRAMESET>
表示例 余白


■ <FRAME noresize>
説明 リザイズの禁止。
表記例 <FRAMESET cols="20%,*">
 <FRAME src="frame1.html" noresize>
 <FRAME src="frame2.html">
</FRAMESET>
表示例 リサイズの禁止


■ <FRAME scrolling="...">
説明 スクロールバーの設定。
auto:自動。
yes:表示する。
no:表示しない。
表記例 <FRAMESET cols="25%,25%,25%,*">
 <FRAME src="frame1.html" scrolling="auto">
 <FRAME src="frame4.html" scrolling="auto">
 <FRAME src="frame1.html" scrolling="yes">
 <FRAME src="frame4.html" scrolling="no">
</FRAMESET>
表示例 スクロールバー


■ <FRAME name="...">
説明 フレームに名前を付ける。
この名前がリンク<A>などのターゲットとなる。

例は、左側のフレーム中のリンクを右側のフレームに表示するもの。
右側のフレームの<FRAME>に name を付け、左側の<A>の taeget にその name を指定する。
※一度に複数のフレームを書き換えるにはタグだけではできない。Javascriptを使用する。
表記例 フレームのソース。

<FRAMESET cols="20%,*">
 <FRAME src="frame_link_index1.html">
 <FRAME src="frame1.html" name="framewindow">
</FRAMESET>


frame_link_index1.htmlのソース。

<HTML><BODY>
<A href="frame1.html" target="framewindow">フレーム1</A><BR>
<A href="frame2.html" target="framewindow">フレーム2</A>
</BODY></HTML>
表示例 リンク


■ <NOFRAMES>~</NOFRAMES>
説明 フレーム未対応ブラウザのための記述をする。
表記例 <NOFRAME>
こちらに、 <A href="noframes.html">フレーム未対応版ページ</A> があります。
</NOFRAMES>


3. インラインフレーム


■ <IFRAME>~</IFRAME>
説明 インラインフレームを表示する。
またこの中にインラインフレーム未対応ブラウザのための記述をする。
属性 <IFRAME align=""> 表示位置。
<IFRAME align="top"> テキストや画像の上端にフレームの上端を合わせる。
<IFRAME align="texttop"> [IE]topと同じ。
[NN]通常の大きさのテキストの上端にフレームの上端を合わせる。画像やフォントサイズは無視される。
<IFRAME align="absmiddle"> テキストや画像の中央にフレームの中央を合わせる。
<IFRAME align="middle"> [IE]absmiddleと同じ。
[NN]テキストのベースライン(Mの字の下端)にフレームの中央を合わせる。
<IFRAME align="center"> [IE]横方向で中央に表示する。
[NN]middleと同じ。
<IFRAME align="baseline"> テキストのベースライン(Mの字の下端)にフレームの下端を合わせる。
<IFRAME align="absbottom"> テキストの下端にフレームの下端を合わせる。
<IFRAME align="bottom"> baselineと同じ。
<IFRAME align="left"> 左端に表示する。周りにテキストが回り込むようになる。回り込みを解除するには<BR>のclear属性を使用する。
<IFRAME align="right"> 右端に表示する。周りにテキストが回り込むようになる。回り込みを解除するには<BR>のclear属性を使用する。
<IFRAME frameborder="..." > 枠線の表示/非表示。
1:表示。yes でもよい。(デフォルト)
0:非表示。no でもよい。
<IFRAME height="..."> 高さ。ピクセル値、またはパーセント。
<IFRAME hspace="..." > フレームの周りの横方向の余白。ピクセル値。
<IFRAME marginheight="..." > フレームの上下の余白。ピクセル値。
<IFRAME marginwidth="..." > フレームの左右の余白。ピクセル値。
<IFRAME scrolling="..." > スクロールバーの表示/非表示。
yes:表示する。
no:表示しない。
auto:自動。(デフォルト)
<IFRAME width="..." > 横幅。ピクセル値、またはパーセント。
<IFRAME vspace="..." > フレームの周りの縦方向の余白。ピクセル値。
表記例 <IFRAME src="iframe1.html"width="200" height="100">この部分は IFRAME を使用しています。</IFRAME>
表示例:



インラインフレームの例:

align="left"

align="center"

align="right"

align="top"

align="texttop"

align="middle"

align="absmiddle"

align="center"

align="baseline"

align="absbottom"

align="bottom"

frameborder="0"

height="50"

hspace="50"

marginheight="50"

marginwidth="50"

scrolling="yes"

width="100"


4. IEのみ


■ <IFRAME hspace="..." >
説明 フレームの周りの横方向の余白。ピクセル値。
表記例 <IFRAME hspace="100" src="iframe1.html"></IFRAME>
表示例


|←100→|
|←100→|
■ <IFRAME vspace="..." >
説明 フレームの周りの縦方向の余白。ピクセル値。
表記例 <IFRAME vspace="50" src="iframe1.html"></IFRAME>
表示例
 ̄ ̄ ̄↑
   50
___↓

 ̄ ̄ ̄↑
   50
___↓