フレームの割り付け

「フレームの割り付け」されたページを見たことはありませんか。下図のように幾つかの画面が分かれているページのことです。

同じ画面の中で、1つめのフレームを「案内メニュー」に利用し、2つめのフレームを「主文書」にするなど、一貫性のとれたページを作ることができます。

【注意】
「HTML」の規格を策定している World Wide Web Consortium（W3C）によると、「フレームの割り付け」は以下の理由から「HTML5」「XHTML1.1」では廃止されました。

・ お気に入り（ブックマーク）・履歴表示・印刷が正しくできない
・ フレーム未対応のブラウザでは正しく表示できない
・ 画面表示によってはフレームページごとにスクロールバーがつき、見づらくなる
・ フレーム内に外部コンテンツを表示させる行為は著作権侵害の恐れがある

フレームの割り付け方法

「フレームの割り付け」は、画面に表示される一般的な HTML文書 と、それらに指示をするための表示されないHTML文書（フレーム設定文書）で構成されています。

（上図の例では 3つのHTML文書と、1つのフレーム設定文書で構成されています）

画面に表示される一般的な HTML文書は、特に注意する点はありません。次のような3つのHTML文書を作成してください。
ファイル名：top.html

<html>
<head>
<title>トップ</title>
</head>
<body bgcolor="#ffff00">

<p>トップです<p>

</body>
</html>

ファイル名：left.html

<html>
<head>
<title>レフト</title>
</head>
<body bgcolor="#ff00ff">

<p>左です<p>

</body>
</html>

ファイル名：right.html

<html>
<head>
<title>ライト</title>
</head>
<body bgcolor="#00ff00">

<p>右です<p>

</body>
</html>

上の3つのHTML文書を、1つの画面に表示するには、次のような「フレーム設定文書」を作成する必要があります。
ファイル名：frame.html

<html>
<head>
<title>フレーム製作</title>
</head>

<frameset rows="20%,80%">
 <frame src="top.html" name="top"  scrolling="no">

 <frameset cols="27%,73%">
  <frame src="left.html" name="left"  scrolling="yes">
  <frame src="right.html" name="right"  scrolling="yes">
 </frameset>

</frameset>

</html>

ブラウザで確認するには、この「フレーム設定文書」である「frame.html」を開いてください。

各要素・属性の説明

フレーム設定文書では、1つの headと、 body の位置を占める1つの fremeset が存在します。

要素	説明
frameset	画面を 複数の長方形の領域 に分割する

次の例では、外側のframeset 要素が、利用可能空間全体を縦3列に等分しています。内側のfremeset 要素は、2つ目の列を高さが異なる2つの行に分けている例です。

<frameset cols="33%, 33%, 34%">
     …最初のフレームの内容…
     <frameset rows="40%, 50%">
          …2つ目のフレームの第1行の内容…
          …2つ目のフレームの第2行の内容…
     </frameset>
     …3つ目のフレームの内容…
</frameset>

rows 属性を設定すると、1つのフレーム設定文書における、各行の子領域数が定まります。 cols 属性が設定されると、各列の子領域数が定まります。

属性	説明
rows	各行の高さ（水平方向）を上から下へを設定
cols	各列の幅（垂直方向）を左から右へ設定

次に、各フレームの内容を定義するには frame 要素を利用します。

要素	説明
frame	1つのフレームの内容と見かけを定義

frame 要素では、「各フレームに表示するHTML文書へのリンク指定」や「フレームの装飾」などに利用します。

frame 要素の代表的な属性を次に示します。

属性	説明	補足
src	フレームに含まれる初期のリンク先を指定
name	当該フレームの名前を示す	当該フレームへのリンク目標として利用
scrolling	当該フレームのスクロール情報を指定	auto ： デフォルト値yes ： スクロールありno ： スクロール無し
frameborder	フレームウインドウの区切り線のタイプを指定	1 ： 区切り線あり0 ： 区切り線なし
framespacing	フレーム間に間隔を挿入する	デフォルト値は2ピクセル
noresize	フレームのサイズ変更を禁止する	属性値なし

フレームへのリンク方法

「フレームの割り付け」を行った場合、各フレームへリンクを張る方法が若干異なります。

例えば、「左フレーム」から「右フレーム」にリンクを張る場合、次の方法ではいけません。

<a href="right2.html">左フレームから右フレームにリンク</a>

上の例では、「左フレーム」の内容が変更され、「右フレーム」の内容は変更されません。

最初の「フレーム設定文書（frame.html）」に、各フレームを区別するために「name 属性」を加えています。

name 属性により、「target」属性を利用して次のようにリンクを指定することで、好きなフレームに表示ができます（例では右フレーム）。

<a href="right2.html" target="right">左フレームから右フレームにリンク</a>

以上のように、表示したいフレームの指示名を target属性を利用して指定してやります。

属性	説明
target	文書を開かせるフレームの名称を指定する

また、target 属性は、次のような属性値をもっています。

target属性の属性値	説明
フレーム名	名前のついたフレームに表示
_top	全フレームを破棄して、全画面にしてから表示
_blank	新規画面を開きます（フレーム使用以外でも利用可能）
_parent	入れ子構造のフレームの1つ上の親フレームに表示
_self	現在のフレームに表示

例えば、全画面で表示したい場合は、次のように指定します。

<a href="all.html" target="_parent">全画面で表示</a>

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

ページのトップへ戻る