フレームの作成/HTML基礎講座

Home | 目次 | Prev | フレーム | Next

フレームを使ったページ作成の方法を紹介します。フレームには２つの方法があり、１つはページ全体をフレームで区切るフレームセット、もう１つはページの中にフレームを設けるインラインフレームです。

どちらのフレームを使うにしろ、文書型定義は、Frameset、あるいは、Transitional を使用することになります。つまり、どちらも廃止予定の過渡期の手法だということを覚えておいてください。

■ フレームの欠点

フレームは、１つのウィンドウに幾つか区切ったフレーム内に、区切った分だけの HTML文書が必要になります。そのため、フレーム数が増えれば増えるほど容量が増え、閲覧者が受信するまで、それなりの時間を必要とします。

音声や点字、あるいはテキストのみをレンダリングするような非視覚系ブラウザと呼ばれる環境では、フレームをレンダリングする機能を持っていません。閲覧者の環境を考慮して、フレームの代替コンテンツを用意することは、作者の良心です。

またフレームは、閲覧者が希望するフレーム内の文書を印刷できない、特定のページにリンクできないなどの弊害があることも覚えてください。

■ フレームの作成

ページにフレームを利用して表示させるのには、frameset要素、および frame要素を使います。frameset要素を入れ子に記述することにより３ペイン、４ペインのフレームを作成できます。

フレームに必要な要素と属性は次の通りです。

要素名	属性	機能
frameset	cols	フレームを左から横方向に切り分ける
	rows	フレームを上から縦方向に切り分ける
	title	非視覚系ブラウザへのリンクの代替となる属性
frame	src	フレームの内容として表示させる文書のURLを指定する
	name	各フレームウィンドウに名前をつけ、リンクなどに関連付ける
	frameborder	フレームの枠線の表示/非表示を設定する 0 --- 表示させない 1 --- 表示させる (初期値)
	marginwidth	フレーム内の左右のマージンを設定する
	marginheight	フレーム内の上下のマージンを設定する
	scrolling	フレーム内のスクロールバーに関する設定 `auto`　必要に応じて表示する (初期値) `yes --` 表示させる `no ---` 表示しない
	noresize	フレームのサイズの変更を禁じる
	title	フレームの概要を示す
noframes	なし	フレーム未対応ブラウザへの代替のコンテンツを用意する

frameset要素は、body要素の代わりに記述します。body要素は noframes要素の中のみ記述が可能です。　３ペインフレームのサンプル

■ target属性の記述

フレーム内でアンカーを記述する際には、必ず target属性を書き込むようにしてください。この属性は、どのフレームに表示させるのかを指定します。指定がない場合には、アンカーを記述したフレーム内で表示されます。また、フレームから脱して他のサイトやページにリンクするには、_top という値を target属性に指定します。

例：

<a href="nextpage.html" target="name属性で指定したフレーム">Next</a>
<a href="http://www.yahoo.co.jp" target="_top">Yahoo Japan</a>

■ インラインフレーム

ページの中にフレームを表示させるのがインラインフレームで、iframe要素で定義します。以下は具体的な構文です。

<iframe src="backnm.text" name="inline" width="500" height="400">
インラインフレームで、テキストやHTML文書を表示させます。
</iframe>

■ 解説
iframe    インラインフレームを表わす属性
src       インラインフレームに表示する文書のURL
name      インラインフレームに名前をつけるます。このことによって
           target属性でインラインフレームに表示させます。
width      インラインフレームの横幅の設定、ピクセル、％単位。
height     インラインフレームの高さの設定、ピクセル、％単位。

インラインフレームのサンプル

初版更新日 2002年9月11日最新更新日 2004年3月7日