簡単なホームページの作り方 第7回        

7、フレーム機能について(一度に数ページもホームページを開く方法)

はじめに
 フレーム機能とは、画面を分割してそれぞれに違うHTMLファイルを表示させる機能です。
分割された部分を「フレーム」と呼びます。

フレームファイルは、<BODY>タグの代わりに<FRAMESET>タグを使い、文字を書いたり、
画像を貼ったりしないで、ただフレーム指定のみを記述します。
ただ、フレーム機能に対応していないブラウザでは、なにも表示されません。

そこで、<NOFRAME></NOFRAME>で挟んだ部分は、フレーム機能に対応していない
ブラウザにだけ表示されるので、ここにコメントを書いてHTMLファイルにジャンプ出来る
ようにリンクを貼っておく等の配慮が必要になります。

(1)ページの分割
 ページを縦に分割します。 (←ここをクリック)
 この場合は、縦に20%と80%の割合で、2分割した例です。

 ページを横に分割します。 (←ここをクリック)
 この場合は、横に20%と30%と50%の割合で、3分割した例です。

 ぺージを縦横に分割します。 (←ここをクリック)
 この場合は、上に小さなフレーム2個と下に大きなフレーム1個を作る場合です。

 (この例では、縦に130ピクセル横に画面幅の30%が左上になり、縦に130ピクセル横に70%が
  右上になり、下の大きなフレームには、縦に画面の高さから130ピクセルを引いた残りが
  表示されます。)

 フレームサイズの指定方法は、このようにピクセル数と%で表す方法とがあります。

(2)フレームの名前とターゲットについて
 ここでは、縦横に分割したフレーム機能を使ってフレームファイル間の相互の関係
 を調べて見ましょう。 ぺージを縦横に分割します。(←ここをクリック)

書式は、以下の通りです。(タグの解説は付録参照



<FRAMESET ROWS="130,*"> ・・・・・・・・・・・・・・・・・・・・・・(1)
・・・(縦に130ピクセル、及び画面の高さから130ピクセルを引いた残りがその下に表示
   される)

<FRAMESET COLS="20%,80%"> ・・・・・・・・・・・・・・・・・・・・(2)
・・・(縦に130ピクセル横に画面幅の20%が左上になり、縦に130ピクセル横に80%が右上
   に表示される)

<FRAME SRC="hidari.htm" NAME="1" SCROLLING="auto">
<FRAME SRC="migi.htm" NAME="2" SCROLLING="auto">
</FRAMESET>              ・・・・・・・・・・・・・・・・・・・・(2)'

<FRAME SRC="sita.htm" NAME="3" SCROLLING="auto">

<NOFRAMES>
<BODY>
<P>
<BR>
</P>
</BODY>
</NOFRAMES>
</FRAMESET>               ・・・・・・・・・・・・・・・・・・・・・・(1)'




 ここでは、赤色で表示されている (1)<FRAMESET ROWS="130,*">
 (1)'</FRAMESET>とが対応しており、
 また、紫色で表示した(2)<FRAMESET COLS="20%,80%">
 (2)'</FRAMESET>とが対応していることに注意してください。

(また、hidari.htm と migi.htm が画面上から130ピクセル、左から20%80%の割合で
 表示され、その下に、 sita.htm が上から130ピクセルの位置に大きく表示される)

また、各フレームにはそれぞれ名前が付けられています。

hidari.htmがあるフレームには NAME="1" migi.htmがあるフレームには NAME="2"
 sita.htmがあるフレームには、 NAME="3" とそれぞれ名前が付けられている

次に
 hidari.htmファイルから、あるファイルを指定して下の大きなフレームに目的のファイル
 を表示させるには、以下のように 
TARGET オプション で指定します。

 <B><A HREF="zigyou2.htm" TARGET="3">事業活動</A></B><BR>
 ここでは、事業活動が下の大きなフレームに表示されます。

 この TARGET="3" を 2 にするとフレーム 2 (migi.htmのあるフレーム)に目的の
 ファイルが表示されてしまいます。

 また、このほかに TARGETのバリエーションには、以下のようなものがあります。
 それぞれどのフレームに表示させるかに応じて、以下のバリエーションを使い分けます。

 TARGET="_blank" (新しいブラウザを開いて表示する)
 TARGET="_self" (リンクスイッチのあったフレームに表示する)
 TARGET="_top" (フレームをなくして画面に表示する) 
 TARGET="_parent"(リンクスイッチのあったフレームの親フレームに表示する)

  などがあります。

  ここで、もう一度3分割したフレーム機能を見て見ましょう。(←ここをクリック)

  以上、フレームの使い方には、実際にどこのフレームに表示させるかということや、また
 元に戻る時の指定の仕方など、いろいろと注意が必要です。
  (時間があれば、実際に「無線」のHPなどを見てみましょう。)



以下、次回(第8回は、ここをクリックしてください。)トップへ戻る
ホーム            タグ一覧表