図書館員のコンピュータ基礎講座

• TOP
• 参考資料
• HTML講座
• 7.フレーム

HTML講座

7. フレーム

この章では、フレーム操作をおこないます。
フレームは、フレーム内に表示する複数のファイルと、フレーム操作をおこなうことを記述するファイルを用意する必要があります。今までに作成した、「welcome.html」と「greeting.html」をフレーム内に表示させてみましょう。

1.フレーム操作をおこなうファイルを作成する。

メモ帳で新しいHTML文書を作成し、「frame.html」という名前で保存します。

ようこそ CyberLibrarianのホームページへ ごあいさつ コンピュータの基礎 ビットとバイト 拡張子 拡張子 拡張子 内容 .sys システムファイル（System file）
ごあいさつ ようこそ！ 新しくホームページを開設しました。 トップページへ

■ 解説
作成した「frame.html」を開くと、2つのファイルをフレーム表示します。
<frameset>タグでフレームの分割の仕方を定義します。rows属性で縦に分割する際の、cols属性で横に分割する際の、フレームの大きさや割合を指定します。
フレームセット指示で使用できる属性の見本は以下の通りです（フレーム内の色は、わかりすくするためにつけているだけです）。

HTMLの記述	ブラウザでの表示	解説
<frameset rows="30%,*">	上 下	縦に2分割。 上フレーム：30% 下フレーム：自動（70%）
<frameset rows="*,70%">	上 下	縦に2分割。 上フレーム：自動（70%） 下フレーム：30%
<frameset rows="10%,*,70%">	上 中 下	縦に3分割。 上フレーム：10% 中フレーム：自動（20%） 下フレーム：70%
<frameset cols="30%,*">	左 右	横に2分割。 左フレーム：30% 右フレーム：自動（70%）
<frameset cols="150,*">	左 右	横に2分割。 左フレーム：150ピクセル 右フレーム：自動

<frame>タグは、src属性と組み合わせてフレーム内に表示するファイルを指定します（フレーム内の色は、わかりやすくするためにつけているだけです）。

HTMLの記述	ブラウザでの表示
<frame src="welcome.html"> <frame src="greeting.html">	welcome.html greeting.html

scrolling属性で、フレームのスクロールバーの表示・非表示を指定できます。指定できる値は、「yes」「no」「auto」です。「auto」を選択すると、スクロールが必要な場合のみ自動的にスクロールバー（）を表示します。デフォルトは、「auto」です。

HTMLの記述	ブラウザでの表示
<frame src="welcome.html" scrolling="yes"> <frame src="greeting.html" scrolling="yes">	welcome.html greeting.html
<frame src="welcome.html" scrolling="no"> <frame src="greeting.html" scrolling="no">	welcome.html greeting.html

target属性を使用すれば、フレーム内にリンクを記述した場合、リンク先ページをどのフレームに表示するかを指定することができます。
まず、name属性で、各フレームに名前を付けます。
<frameset rows="30%,*">
  <frame src="A.html" name="frame1">
  <frame src="B.html" name="frame2">
</frameset>
このように記述すると、上フレームに「frame1」、下フレームに「frame2」という名が定義されます。
次に、「A.html」内に「C.html」へのリンクを張ります。

A.html C.htmlへのリンク B.html

ブラウザでの表示（クリック前）

HTMLの記述	ブラウザでの表示（クリック後）
<a href="C.html">C.htmlへのリンク</a>	C.html B.html
<a href="C.html" target="frame1">C.htmlへのリンク</a>	C.html B.html
<a href="C.html" target="frame2">C.htmlへのリンク</a>	A.html C.html

同じ例で、target属性に、「_self」「_top」「_parent」「_blank」などの値を指定することもできます。
「_self」は、自分自身のフレームに表示します。上例のtarget属性を省略したとき、および「frame1」を指定したときと同じ結果になります。
「_top」は、分割されているフレームを全て解除して表示します。
「_parent」は、分割されているフレームを1つだけ解除して表示します。
「_blank」は、現在のウィンドウとは別に、新規にウィンドウを作成して表示します。

HTMLの記述	ブラウザでの表示（クリック後）
<a href="C.html" target="_self">C.htmlへのリンク</a>	C.html B.html
<a href="C.html" target="_top" >C.htmlへのリンク</a>	C.html
<a href="C.html" target="_parent" >C.htmlへのリンク</a>	C.html
<a href="C.html" target="_blank">C.htmlへのリンク</a>	A.html B.html + C.html

横に2分割し、さらに右フレームを縦に2分割したいような場合は、<frameset>タグを入れ子にして記述します。

HTMLの記述	ブラウザでの表示
<frameset cols="30%,*">   <frame src="A.html">   <frameset rows="30%,*">     <frame src="B.html">     <frame src="C.html">   </frameset> </frameset>	A.html B.html C.html

この場合、下の例のように、「B.html」内に「D.html」へのリンクを張ったとすると、target属性の値に「_top」と指定しても「_parent」と指定しても全てのフレームが解除されます。

A.html B.html D.htmlへのリンク C.html

ブラウザでの表示（クリック前）

上と同じ、横に2分割、右フレームを縦に2分割は、次の方法でも記述できます。
まず、「B.html」と「C.html」とを縦2分割のフレームとして記述し、「frame2.html」という名前で保存します。

HTML（frame2.html）の記述	ブラウザでの表示
<frameset rows="30%,*">   <frame src="B.html">   <frame src="C.html"> </frameset>	B.html C.html

次に、「A.html」と「frame2.html」とを横2分割のフレームとして記述し、「frame1.html」という名前で保存します。

HTML（frame1.html）の記述	ブラウザでの表示
<frameset cols="30%,*">   <frame src="A.html">   <frame src="frame2.html"> </frameset>	A.html B.html C.html

この場合、下の例のように、「B.html」内に「D.html」へのリンクを張ったとすると、target属性の値に「_top」と指定すると全てのフレームを解除してしまいますが、「_parent」と記述すると、「frame2.html」のフレームのみを解除して「D.html」を表示します。

A.html B.html D.htmlへのリンク C.html

ブラウザでの表示（クリック前）

フレーム使用に関する問題点
フレームは大変便利な機能ですが、下記のような問題点があり、できるだけ使用しない方が良いとされています。

1. プリントアウトがうまくできないことが多い。
2. 特定ページをフレーム内に表示させた状態で、ブックマーク（お気に入り）やリンクに登録することが困難。
   フレームを表示させた状態でフレーム内の特定のページにリンクしようとすると、そのフレームのトップページにリンクが張られてしまいます。また、フレーム内の特定のページにリンクを直接張ると、そのページの作者の意図と違った形（フレームなし）で表示されることになっていまいます。
3. ロボット型検索エンジンの検索結果には、フレーム内のページがフレーム無しの状態で表示されてしまうことが多い。
   メニューなどを別フレームにしておくと、他のページへのナビゲーションが出来ないなどの問題が生じます。また、自分の意図と違った形（フレームなし）で表示されることになっていまいます。
4. 視覚障害者などが使用している「音声ブラウザ」では、利用者がフレームを認識しにくいなどの、Webアクセシビリティに問題がある。
5. フレーム機能に対応していないブラウザも存在している。

/