- フレームタグについて -

ここではフレームタグの説明をします。即席で作成したページをそのまま使っているので、説明不足な部分があるかも知れません^^;


■<FRAME>タグについて
Webサイト閲覧をしていると、1つのページが幾つかに分かれているページを見かけませんか?
それがフレームです。例にして表すと「1枚の板の上に数枚の紙(掲示物)を貼り付ける」といった感じでしょうか。 これからそのタグの使い方について説明して行きますが、その前に一つだけ重要な話を…。

実は<FRAME>タグはHTML5で廃止される予定です。 一応タグの説明はしますが、出来れば<IFRAME>CSSでの位置指定等で代替する事をお勧めします。


■基本的な形式
ではタグの説明です。<FRAME>タグを使用したページの基本的な形式はこんな感じかな?^^;

・記述タグ
<HTML>
<HEAD>
<TITLE>ページの題名(※1)</TITLE>
</HEAD>
<FRAMESET ○(※2)="△%(※3),□%(※4)">
<FRAME src="初期表示ページのURL(※5)"name="スペース名(※6)">
<FRAME src="初期表示ページのURL(※7)"name="スペース名(※8)">
</FRAMESET>
</HTML>


補足説明 :
※1 : そのページの題名。ブラウザのタブに表示される名前です。
※2 : 分割方向の指定。左右分割ならcols、上下分割ならrowsを入れます。
※3 : 分割比率の指定。左右分割ならば左側、上下分割ならば上側の比率です。
※4 : 分割比率の指定。左右分割ならば右側、上下分割ならば下側の比率です。
※5 : 最初に表示するページの指定。左右分割ならば左側、上下分割ならば上側です。
※6 : スペース名の指定。左右分割ならば左側、上下分割ならば上側です。
※7 : 最初に表示するページの指定。左右分割ならば右側、上下分割ならば下側です。
※8 : スペース名の指定。左右分割ならば右側、上下分割ならば下側です。



これが基本となるページのタグです。 これだけでは少々解り難いかも知れませんが、下記から部分的な詳細説明をしますのでご安心を^^;


■左右分割(cols)、上下分割(rows)について
では、例で説明しますね。例と言っても、ここでは画像を使って説明します。 「大体こんな感じになるんだなぁ」程度で覚えておいて下さい。

・左右分割(cols)の例
タグ記述例 :<FRAMESET cols="50%,50%">

表示例 :
cols(左右分割)


・上下分割(rows)の例
タグ記述例 :<FRAMESET rows="50%,50%">

表示例 :
rows(上下分割)



例では分割比率を50%、50%にしています。これは合計100%になるのであれば良いので色々な分割が出来ます。 それと追記ですが、この「FRAMESET」タグ内で設定出来る事が更に有ります。
それは分割した際の境界線の有無です。 何も設定せずにフレームで分割すると境界線が表示されますが、それは消す事も出来ます。

・境界線(border)の指定
タグ記述例 :<FRAMESET cols(またはrows)="○%,□%"border="△">

補足説明 :
FRAMESETタグ内に「border="△"」という記述をを追加するだけです。
ここでの部分に0を入れると境界線は消えます。
因みに指定無しで表示される境界線は「border="1"」と同じ効果の様です。




■分割したスペースの設定(FRAME SRC)
ここでは分割した2つのスペースに、それぞれ最初に読み込むページ名前を指定する方法を説明します。 これを指定しておかないと、リンク等で面倒な事になります。なので忘れずに指定しましょう。

・左右分割(50%,50%)での例
タグ記述例 :
<HTML>
<HEAD>
<TITLE>ページの題名</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
<FRAME src="初期表示ページのURL"name="LS">
<FRAME src="初期表示ページのURL"name="RS">
</FRAMESET>
</HTML>

表示例 :
cols(左右分割)

表示例の様に<FRAME src>の一行目が左側に、二行目が右側に来ます。
つまり記述例の様にタグを打ち込むと、LSが左側、RSが右側になるワケです。

・上下分割(50%,50%)での例
タグ記述例 :
<HTML>
<HEAD>
<TITLE>ページの題名</TITLE>
</HEAD>
<FRAMESET rows="50%,50%">
<FRAME src="初期表示ページのURL"name="US">
<FRAME src="初期表示ページのURL"name="DS">
</FRAMESET>
</HTML>

表示例 :
rows(上下分割)

表示例の様に<FRAME src>の一行目が上側に、二行目が下側に来ます。
つまり記述例の様にタグを打ち込むと、USが上側、DSが下側になるワケです。


と、まぁスペース名の設定の説明はこんな感じでしょうか。 例に出したスペース名が非常に安易な気がしますが、その辺は気にしない方向で^^;


■リンクする場合は?
ここで上記説明が役立ちます。普段リンクする場合は「<A HREF="URL">名前</A>」と書きますよね?
フレームページの場合は、そこに読み込むスペースの指定を追加します。

・フレームページでのリンク
タグ記述例 :
<A href="リンク先URL"target="スペース名">表示名</A>

通常のリンクタグに「target="スペース名"」を追加するだけです。

・フレーム解除してのリンク
タグ記述例 :
<A href="リンク先URL"target="_top">表示名</A>

これはリンクするにはで軽く触れた方法です。
「target="_top"」と記述すればフレーム解除されます。

・フレーム解除してのリンク(別窓)
タグ記述例 :
<A href="リンク先URL"target="_blank">表示名</A>

これもリンクするにはで軽く触れた方法です。
「target="_blank"」と記述すればフレーム解除して別窓でリンク先を表示します。


と、フレームページでのリンクで必要な知識はこの位だと思います。 他の人のWebサイトへのリンクの場合等、用途に因って使い分けて下さいね。


■分割の応用
ここまで2分割の説明をしましたが、応用としてページを3分割等にする事が出来ます。
因みに3分割するには、今まで説明した2分割のタグに「FRAMESET」「FRAME SRC」を一行ずつ追加するだけです。

・3分割した場合の例
タグ記述例 :
<HTML>
<HEAD>
<TITLE>ページの題名</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAME src="初期表示ページのURL(左側)"name="LS">
<FRAMESET rows="20%,80%">
<FRAME src="初期表示ページのURL(右側上段)"name="RU">
<FRAME src="初期表示ページのURL(右側下段)"name="RD">
</FRAMESET>
</FRAMESET>
</HTML>

表示例 :
cols&rows(左と上下での3分割)

まず<FRAMESET cols="20%,80%">で左右に分割しています。
その後に<FRAMESET rows="20%,80%">で上下に分割してます。

と言う感じです。一応分割数は増やしたいだけ増やせますが、多分3分割位が限界かと…。
それ以上分割数を増やすと、多分物凄く見難いサイトになってしまうと思います^^;


■サイズ固定しての分割
実は人に因って、ブラウザ表示画面サイズが違う場合が多々あります。 その場合、割合(%)で分割指定をしているとレイアウトが崩れる可能性が有ります。 例えば管理人は1024x768サイズを予定してレイアウトを組んだのに、閲覧者は1280x1024サイズで閲覧してるとか…。
分割比率を割合で設定していると、表示画面サイズ800x600だろうが1280x1024だろうが、設定割合で分割して表示されます。 そうなると余白が出来過ぎたりしてレイアウトが崩れてしまいます。
ここではそれを避ける為に、ピクセル単位で分割サイズを固定する方法を紹介します。

・サイズ固定した場合の例
タグ記述例 :
<HTML>
<HEAD>
<TITLE>ページの題名</TITLE>
</HEAD>
<FRAMESET cols="200px,*">
<FRAME src="初期表示ページのURL"name="LS">
<FRAME src="初期表示ページのURL"name="RS">
</FRAMESET>
</HTML>

表示例 :
左右分割(200px,残り全て)



左側の設定数値200は、その幅を200pxで固定する為の指定。
右側の設定数値として使用した*(アスタリスク)は、残り全ての範囲を使うという指定です。


■<NOFRAMES>について
最後に<NOFRAMES>というタグについて説明します。。 これは、フレーム未対応のブラウザを使用している方の為です。 なので、フレーム対応のブラウザを使用している方には表示されません。

・記述例
<NOFRAMES>
<BODY>
<P>このページはフレームが使用されています。未対応ブラウザでの閲覧は出来ません。</P>
</BODY>
</NOFRAMES>



と言う感じが適当でしょうか。フレームが使用されていないページがあるならば、そちらへのリンクを載せておくのも良いです。

BACK< HTML講座目次 >NEXT