フレームを作ろう

Lesson４：フレーム機能

フレームとは？

色々なホームページを見ていると、ブラウザのウィンドウを幾つかに分割したページを見かけませんか？
これを、フレーム（frame）と言います。

フレーム機能を使用すると、好きな数だけウィンドウを分割して、
一つのウィンドウに別々のファイルを表示する事が可能になります。

●フレームの使用例●
フレーム使用例

画面を分割したい！

<FRAMESET ★>～</FRAMESET>

★・・・・・	COLS="ピクセル数または%" ROWS="ピクセル数または%"	[縦割り指定] [横割り指定]

フレーム機能を使うと、1つのブラウザのウインドウをいくつか区切って、それぞれ別の内容を表示させることが出来ます。このフレームを作成する時に一番基本となるタグが<FRAMESET>で、このタグでフレームを定義します。<BODY>のタグは省略してください。
　分割のしかたは、COLS（縦割り）、ROWS（横割り）属性で指定し、分割して出来るフレームの大きさは、ピクセル数かパーセンテージで記入します。ピクセル数ではブラウザのウインドウサイズに左右されない絶対的な大きさで、パーセンテージではブラウザのウインドウサイズに対する大きさで表示されるので、適した方を使ってください。（併用もできます！）この時記入した数値の数だけフレームが作成されますが、設定が有効になるためには、以下のことに注意が必要です。

●各数値をコンマ（,）で区切り、スペースは入れない
●すべてを％だけで記入するときは、数値の合計が100%になるようにする。

　また、数値の代わりにアスタリスク（*）を入れ、フレームサイズをブラウザに計算させるという便利な方法もあります。たとえば、"100,*"と記入すれば、これは「ウインドウを2分割して、1つは100ピクセル、もう１つは残り（ウインドウサイズから100ピクセル引いた値）の大きさのフレームを作成する」という指示をしていることになるのです。

<HTML>
<HEAD>
<TITLE>フレームを作ろう</TITLE>
</HEAD>

<FRAMESET ★>
　　　:
（フレームを作成するタグ）
　　　:
</FRAMESET>

</HTML>

<FRAMESET COLS="20%,80%">
縦に2分割し、左側に20%、右側に80%のサイズのフレームを作成する。

<FRAMESET ROWS="150,*">
横に2分割し、上段に150ピクセル、下段にウインドウサイズから上段分の
150ピクセルを引いたサイズのフレームを作成する。

フレ－ムに表示されるファイル

<FRAME SRC="★">

★・・・・・URL

<FRAMESET>タグでフレームを定義したら、具体的な内容は<FRAME>タグで指定していきます。
フレーム機能は、作成されたウインドウごとにそれぞれ別のHTMLファイルとして表示される内容を保存しておき、これをリンクを使って読み込む仕組みになっています。このとき使われるタグが<FRAME SRC="★">なのです。★にはファイルのパス（URL）を記入します。任意で絶対パスか相対パスかを選択してください。（通常のリンクと同じです）
また<FRAME>タグは、<FRAMESET>タグで設定したフレームの数と順番に一致させます。

index.html の内容
　（ウインドウに表示されません）

<HTML>
<HEAD>
<TITLE>やっぱ中華街でしょ！</TITLE>
</HEAD>

<FRAMESET COLS="25%,75%">
<FRAME SRC="menu.html">
<FRAME SRC="top.html">
</FRAMESET>

</HTML>

menu.html の内容
（左側のウインドウに表示されます）

<HTML>
<HEAD>
<TITLE>やっぱ中華街でしょ！</TITLE>
</HEAD>
<BODY BGCOLOR="#FF6600" TEXT="#FFFFFF">

－ＭＥＮＵ－ 
 
○おすすめ！ 
 
○肉まん 
 
○チャイナ服 
 
○リンク

</BODY>
</HTML>

top.html の内容
　（右側のウインドウに表示されます）

<HTML>
<HEAD>
<TITLE>やっぱ中華街でしょ！</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<H1 ALIGN="center">やっぱ中華街でしょ！</H1>
 


ヨコハマと言えば中華街 
中国四千年の伝統を食せ

 
 
 
中華街をブラブラ歩く楽しみは、とても奥が深くて楽しいもの。 
評判の店の肉まんをほお張りながら 
中国雑貨の店をひやかす、なんてのも楽しいぞ！


</BODY>
</HTML>

上記３つを作成し、フレームの設定をした "index.html"のファイルにアクセスすると！ → 見本完成図

フレームの形式を決める　その１

<FRAME SRC="★" ☆>

●フレーム内のページ余白を指定します。
★ … ☆ …	URL MARGINHEIGHT="上下の余白" （単位はピクセル数） MARGINWIDTH="左右の余白" （単位はピクセル数）

<FRAME>タグにいろいろな属性を指定して、フレーム形式を整えていきましょう。
MARGINHEIGHT、MARGINWIDTHはフレームの中のテキストの余白（マージン）を指定します。
単位はピクセル数です。

index.html の内容
　（ウインドウに表示されません）

<HTML>
<HEAD>
<TITLE>やっぱ中華街でしょ！</TITLE>
</HEAD>

<FRAMESET COLS="25%,75%">
<FRAME SRC="menu.html" MARGINHEIGHT="65" MARGINWIDTH="15">
<FRAME SRC="top.html" MARGINHEIGHT="65" MARGINWIDTH="20">
</FRAMESET>

</HTML>

"menu.html"と"top.html"のファイルは「フレームに表示されるファイル」で作成したものをお使い下さい。
上記内容を入力した後"index.html"のファイルにアクセスすると！ → 見本完成図

フレームの形式を決める　その２

<FRAME SRC="★" SCROLLING="☆">

★・・・・・URL
☆・・・・・auto 、 yes 、 no

SCROLLING属性は、ウインドウに対してスクロールバーの表示非表示を指定します。"auto"指定するとコンテンツに応じてスクロールバーが必要かどうかをブラウザが判断し、必要な時には自動的にスクロールバーが表示されるようになります。これがデフォルトです。"yes"は常にスクロールバーを表示し、必要な時にはスクロールが可能になりますが、"no"を指定すると、常にスクロールバーは表示されず、コンテンツがウインドウサイズを超えた場合であっても表示されません。

index.html の内容
　（ウインドウに表示されません）

<HTML>
<HEAD>
<TITLE>やっぱ中華街でしょ！</TITLE>
</HEAD>

<FRAMESET COLS="25%,75%">
<FRAME SRC="menu.html" SCROLLING="yes">
<FRAME SRC="top.html" SCROLLING="no">
</FRAMESET>

</HTML>

フレームの形式を決める　その３

<FRAME SRC="★" FRAMEBORDER="☆">

●フレームを区切る線の表示・非表示を指定します。
★ …	URL
☆ …	"1" → 境界線の表示 "0" → 境界線の非表示

<FRAME SRC="★" NORESIZE>

●フレームのリサイズを禁止します。
NORESIZE…	フレームを区切る線の位置を固定します。

　フレームとフレームを区切る、境界線にアレンジを加えてみましょう。FRAMEBORDER属性で 0 もしくは no を指定すると、フレーム境界線を消すことが出来ます。BORDERCOLOR属性では境界線の色を指定します。この二つ属性はFRAMESETタグとFRAMEタグのどちらにも指定できます。
　また通常それぞれのフレームの境界線は、ユーザーが任意に動かす（resize）ことが出来るようになっています。これを固定して、変更不可にするのがNORESIZE属性なのです。この属性はFRAMEタグのみに指定可能です。

境界線無しの場合

index.html の内容
　（ウインドウに表示されません）

<HTML>
<HEAD>
<TITLE>やっぱ中華街でしょ！</TITLE>
</HEAD>

<FRAMESET COLS="25%,75%" FRAMEBORDER="0">
<FRAME SRC="menu.html">
<FRAME SRC="top.html">
</FRAMESET>

</HTML>

"menu.html"と"top.html"のファイルは
「フレームに表示されるファイル」で
作成したものをお使い下さい。

上記内容を入力した後"index.html"の
ファイルにアクセスすると！ → 見本完成図

境界線に色を付け、固定した場合

index.html の内容
　（ウインドウに表示されません）

<HTML>
<HEAD>
<TITLE>やっぱ中華街でしょ！</TITLE>
</HEAD>

<FRAMESET COLS="25%,75%">
<FRAME SRC="menu.html" BORDERCOLOR="#000000" NORESIZE>
<FRAME SRC="top.html">
</FRAMESET>

</HTML>

"menu.html"と"top.html"のファイルは
「フレームに表示されるファイル」で
作成したものをお使い下さい。

上記内容を入力した後"index.html"の
ファイルにアクセスすると！ → 見本完成図

リンクした内容をロードするウインドウを指定したい！

<FRAME SRC="▲" NAME="★"> <A HREF="△" TARGET="☆">

▲・△ …	URL
★ …	フレーム名（任意名称）
☆ …	表示先（フレームorウィンドウ）の指定 _blank、_self、_parent、_top、任意名称

通常リンクを指定すると、内容はリンクボタンがあるのと同じウインドウ内にロードされます。ですが、せっかくフレーム機能でウインドウを分割しているのですから、別のウインドウにロードできるようにしてみましょう。
　このためにはまず各ウインドウに名前を付けてく必要があります。これは<FRAME>タグのNAMEオプションを使います。NAMEオプションは、フレーム機能で作成された個々のウインドウに名前を付ける時に使い、TARGETオプションにこの名前を指定して、リンクするページを読み込むウインドウに指定します。そしてリンクタグ<A HREF>にTARGETオプションを書き加え、ロード先のウインドウを指定します。これでリンクボタンのあるウインドウはそのままで、指定したウインドウにリンク内容がロードされるのです。
　また _blank、_self、_parent、_top という属性を使って、リンクした内容を読み込む時のウインドウの状態を指定する事もできます。

_blank	…	常に空白ウィンドウを新規で開き、そこにリンク先の内容を表示します。
_self	…	今のフレーム（またはウィンドウ）に表示します。
_parent	…	ウィンドウがフレームに分割されていた場合、１段前の分割（１つ上の親フレーム）を解除して表示します。
_top	…	ウィンドウがフレームに分割されていた場合、分割を全て解除してそのウィンドウに表示します。
任意名称	…	今のウィンドウがフレームに区切られている場合、フレームに付けたれた名前と一致した場合は、そのフレームにリンク先を表示する。ウィンドウ名と一致している場合は、その名前のウィンドウに表示します。名前が一致しない場合は新しくウィンドウが開く。

index.html の内容
　（ウインドウに表示されません）

<HTML>
<HEAD>
<TITLE>やっぱ中華街でしょ！</TITLE>
</HEAD>

<FRAMESET COLS="25%,75%">
<FRAME SRC="menu.html" NAME="hidari" MARGINHEIGHT="65" MARGINWIDTH="15" SCROLLING="no">
<FRAME SRC="top.html" NAME="migi" MARGINHEIGHT="65" MARGINWIDTH="20" SCROLLING="yes" >
</FRAMESET>

</HTML>

menu.html の内容
（左側のウインドウに表示されます）

<HTML>
<HEAD>
<TITLE>やっぱ中華街でしょ！</TITLE>
</HEAD>
<BODY BGCOLOR="#FF6600" TEXT="#FFFFFF">

－ＭＥＮＵ－ 
 
○<A HREF="osusume.html" TARGET="migi">おすすめ！</A> 
 
○<A HREF="nikuman.html" TARGET="migi">肉まん</A> 
 
○<A HREF="china.html" TARGET="migi">チャイナ服</A> 
 
○<A HREF="link.html" TARGET="migi">リンク</A>

</BODY>
</HTML>

osusume.html、nikuman.html、china.html、link.htmlの内容
　（右側のウインドウに表示されます）

どんな内容でも構いませんので、自分で作ってみよう！

"top.html"のファイルは「フレームに表示されるファイル」で作成したものをお使い下さい。
上記内容を入力した後"index.html"のファイルにアクセスすると！ → 見本完成図

練習問題（４）

全てのLessonが終わったら、早速練習問題を解いてみましょう！

練習問題（４）へ！