HTML入門の
表紙に戻る
HTML入門の表紙へ
次のページへ


1. フレームで画面分割

〜 フレームタグの使い方 〜


1-1. フレームって何？

あなたは画面が上下や左右に分割されたページをみたことがありますか？

実はそれがフレーム機能なんです。一見難しそうなこの機能も、実はタグを使って書かれているにすぎないのです。

それでは、さっそくフレームを使った簡単なページを書いてみましょう。

（＊ フレームはネットスケープ2.0以降やインターネットエクスプローラの機能です。）


1-2. フレームの基本形

まず最初に、縦に画面を2分割するフレームを書いてみましょう。

この場合には、フレームの設定をするhtmlファイルと、画面に表示される2画面分のhtmlファイルの、合計3つのhtmlファイルが必要になります。


● フレームの設定をするファイル ●
ファイル名 ”frame1.htm”
<TITLE> フレームの使用例（その１） </TITLE>

<FRAMESET ROWS="100,*">

<FRAME SRC="ue.htm" NAME="ue">
<FRAME SRC="sita.htm" NAME="sita">

</FRAMESET>


● 上に表示されるファイル ●
ファイル名 ”ue.htm”
<B>"ue.htm"です。</B> <P>

たとえばこの部分にタイトルを書いておけば、下の本文がスクロールしてもずっと表示されたままです。



● 下に表示されるファイル ●
ファイル名 ”sita.htm”
<B>"sita.hrm"です。</B> <P>

こちらにメインになる本文を書いておけば、文章が長くなってこの部分がスクロールしてしまっても、
上のタイトルはず〜っと表示されたままです。



［表示結果はこちら］
ブラウザの［戻る］ボタンで戻ってきて下さい


1-3. それぞれのタグの意味

それではフレームの設定をしている”frame1.htm”のタグの意味を順番に見ていきましょう。

  1. <TITLE> 〜 </TITLE>

    これは初級編の2節でやった通り、ブラウザの左上に表示されるページタイトルを指定しています。

    フレームを使う場合の全体のページタイトルは、この「フレームの設定をするファイル」で指定します。

  2. <FRAMESET ROWS="100,*"> 〜 </FRAMESET>

    このタグで囲まれた部分がフレームの設定になります。 <FRAMESET> タグを使用したページには、<BODY> タグは必要ありません。

    オプション指定 ROWS= は、フレームを縦に分割する指定です。横に分割する場合は COLS= を指定します。

    また、"100,*" はそれぞれのページの大きさを指定しています。最初の 100 が上（横分割の場合は左）のページの大きさ（ピクセル数）です。

    つぎの * の部分は、下（横分割の場合は右）のページの大きさですが、このように * を指定すると画面の空いた部分をすべて下（右）のページに割り当ててくれます。

    また、これらの指定は "30%,*" のように画面の大きさに対する比率（％）で指定することもできます。

  3. <FRAME SRC="ファイル名" NAME="フレームの名前">

    この部分でフレーム内に表示するファイルと、そのフレームの名前を指定します。

    先に指定した方が上（横分割の場合は左）に表示されます。

    フレームの名前は、後でそのフレームに表示するファイルを変えたい場合に必要ですので、分かりやすい名前を指定しておきましょう。



1-4. フレームリンクはTARGETで

画面を左右に分割し、左の目次をクリックすると右の本文が変わるページをよく見かけますが、普通に目次にリンクを張っただけでは目次のフレームの内容が変わってしまうだけです。

このようなフレーム間のリンクは、次のようにTARGETオプションを指定することで行います。

　　<A HREF="ファイル名" TARGET="フレーム名">
　　 リンクする文
　　</A>

こう書いておくと、指定したフレームに"ファイル名"のファイルを表示するようになります。使用例は次の通りです。


● フレームの設定をするファイル ●
ファイル名 ”frame2.htm”
<TITLE> フレームの使用例（その２） </TITLE>

<FRAMESET COLS="30%,*">

<FRAME SRC="mokuji.htm" NAME="mokuji">
<FRAME SRC="main1.htm" NAME="main">

</FRAMESET>


● 左に表示するもくじ ●
ファイル名 ”mokuji.htm”
もくじ<P>

<A HREF="main1.htm" TARGET="main">
1ページ目<P>
</A>

<A HREF="main2.htm" TARGET="main">
2ページ目<P>
</A>

<A HREF="main3.htm" TARGET="main">
3ページ目<P>
</A>
＊ 右に表示される本文 "main1.htm" "main2.htm" "main3.htm" の内容は省略。


［表示結果はこちら］
ブラウザの［戻る］ボタンで戻ってきて下さい


また、TARGETオプションにはフレーム名だけでなく次のような指定もできます。

オプション 説明
TARGET="_top" フレームを解除して画面全体に表示する
TARGET="top" 新しいウィンドウを開いて表示する


1-5. 複雑なフレーム

フレームを入れ子にすることで、より複雑なフレームを作ることができます。

次の例は、まず上下に分割し、下のフレームを左右に分割した場合です。

● フレームの設定をするファイル●
ファイル名 ”frame3.htm”
<TITLE> フレームの使用例（その3） </TITLE>

<FRAMESET ROWS="100,*">
<FRAME SRC="ue.htm" NAME="ue">

<FRAMESET COLS="30%,*">
<FRAME SRC="hidari.htm" NAME="hidari">
<FRAME SRC="migi.htm" NAME="migi">
</FRAMESET>

</FRAMESET>
＊ "ue.htm" "hidari.htm" "migi.htm" の内容は省略。


［表示結果はこちら］
ブラウザの［戻る］ボタンで戻ってきて下さい


1-6. フレームに対応していないブラウザでの表示

フレームはネットスケープ2.0以降やインターネットエクスプローラなどの、フレーム機能に対応したブラウザ以外では表示されません。

フレームに対応していないブラウザのためのページは、フレームの設定の中で <NOFRAME> 〜 </NOFRAME> で囲んで書いておきます。

先ほどの目次の例に、フレーム未対応ブラウザの設定を追加するとこうなります。


● フレームの設定をするファイル ●
ファイル名 ”frame4.htm”
<TITLE> フレームの使用例（その4） </TITLE>

<FRAMESET COLS="30%,*">

<FRAME SRC="mokuji.htm" NAME="mokuji">
<FRAME SRC="main1.htm" NAME="main">

<NOFRAME>
 フレーム未対応ブラウザの方は <P>
<A HREF="mokuji.htm"> ［ここをクリック］ </A>
</NOFRAME>

</FRAMESET>


このページはフレーム未対応ブラウザでは
［このように表示されます］
ブラウザの［戻る］ボタンで戻ってきて下さい


1-7. フレームタグのオプション指定

フレーム関係のタグにはいろいろなオプション指定があります。

まとめると次のようになりますが、ブラウザによっては指定が無視されてしまうこともあります。


　　　　　　　　　　　　　　　● <FRAMESET> タグのオプション ●
オプション 説明
FRAMEBORDER=" yes または no " フレームの境界線を表示するかしないかを指定。


　　　　　　　　　　　　　　　● <FRAME> タグのオプション ●
オプション 説明
MARGINWIDTH=ピクセル数 フレーム内の左右のマージン（すきま）を指定
MARGINHEIGHT=ピクセル数 フレーム内の上下のマージン（すきま）を指定
SCROLLING="yes／no／auto" スクロールバーの 表示／非表示／自動表示 の設定。

（自動表示 auto は、文章がフレームからはみ出す場合だけスクロールバーを付けます）
NORESIZE フレームの大きさを固定して変えられないようにします。

フレームはおわかりいただけたでしょうか？

次は、アンケートなどに使う「フォームタグ」についてです。


HTML入門の
表紙に戻る
HTML入門の表紙へ
次のページへ