logo
 
cpacer

4.11 フレーム

``フレーム機能''とは, Webブラウザの画面をいくつかに区切って, それぞれの領域に異なるHTMLファイルを表示させる機能のことです. 例えば「メニュー」と「内容」に画面を分割し,メニューを常時表示 するようにしてWebページを使いやすくできます.

Lynx,w3m ([*]),携帯電話などのように フレーム機能をサポートしないWebブラウザがあるので,Webページを見るユーザの 環境を考えて利用してください.

4.11.1 Webページの文書型の宣言

ファイルの冒頭で, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> と宣言して,HTML4.01 FramsetのDTDにしたがって 記述されていることを宣言します.

4.11.2 フレームの作成

フレームの枠組みを定義するためのHTMLファイルを作成します. フレームを表示するには, フレーム構成の情報を <frameset>タグと </frameset>タグ で囲みます. フレームを表示できないWebブラウザでは, <noframes>タグで囲まれた内容が表示されます.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>フレームのタイトル</title>
</head>
<frameset>
 <noframes>
  フレーム機能に対応していないWebブラウザではこの部分が表示される.
 </noframes>
</frameset>
</html>

フレームの枠組みを指定するには, <frameset>タグを用います.


<frameset cols="割合1,割合2,..." rows="割合1,割合2,...">
.............
</frameset>

<frameset>タグで指定する属性

4.11.3 フレームの設定を行う - <frame>タグ

各フレームの名前やリンク先の情報を指定するには <frame>タグを利用します.

<frame name="フレーム名" src="URL" scrolling="キーワード">

4.11.4 フレームに対応していないときに表示する - <noframes>タグ

フレーム機能をサポートしていないWebブラウザに対しては, <noframes>タグ内に記述された内容が表示されます.

 <noframes>
  ............
 </noframes>

4.11.5 別フレームへのリンク先指定

フレーム内にあるリンクをクリックすると, 通常は同じフレーム内にリンク先のが表示されます. <a>タグのtarget属性を利用すると, リンク先のHTMLファイルを 任意のフレームや新しいウィンドウに表示できます.

<a href="リンク先のWebページ" target="リンク先を表示するフレーム名">
...........
</a>

target属性には次のような値が指定できます.

図: <frame>タグを使ったWebページのサンプル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>
Frame test Page
</title>
</head>
<frameset rows="120,*,15%">
 <frame src="head.html" name="head" scrolling="no">
 <frame src="body.html" name="body" scrolling="no">
 <frameset cols="40%,*">
  <frame src="menu.html" name="menu">
  <frame src="comment.html" name="coment">
 </frameset>
 <noframes>
  <p>
   このWebページは「フレーム機能」を使用しています.
   フレーム機能の使えるWebブラウザでみましょう.
  </p>
 </noframes>
</frameset>
</html>