■ フレーム

この節では1つのページ内にウィンドウをいくつか区切って。それぞれに異なった文書を表示させるフレームと、ページ内にフレームを設けるインライン・フレームの設定について述べます。

フレームの設定

フレームを設定する場合の条件として、HTMLの文書型宣言(DTD)は必ず、Frameset を指定しなくてはいけません。これはフレームが将来、廃止予定であることを意味しています。現在は非推奨扱いとなっていますが、視覚系ブラウザはサポートしています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<title>Setup for Frame</title>
</head>

<frameset>
    フレームに関する記述
</frameset>
</html>

フレームを構成する frameset要素は、通常のページで用いる body要素の代わりに用います。

複数ウィンドウのフレームの作成

frameset要素を入れ子にして記述することにより、複数のフレームを作成できます。フレーム内に文書を読み込む frame要素で、src属性を使用して、別の文書を呼びます。

以下は、3つのウィンドウを持ったフレームの設定を記述したものです。

<frameset rows="200,*">
	<frame src="top.html" name="top">
	<frameset cols="20%,*">
		<frame src="left.html" name="left">
  	<frame src="right.html" name="right">
  </frameset>
</frameset>
フレームに用いる要素と属性、およびその機能は次の通りです。
要素名属性機能
framesetフレーム設定に使用する
cols横割の設定、 * では自動的に残りの比率を割り当てる
rowls縦割の設定、 * では自動的に残りの比率を割り当てる
frameフレームに表示する文書の設定
src表示させる文書の URLを示す
nameフレームウィンドウの名前を設定する
marginwidthフレーム内の左右の余白の設定
marginheightフレーム内の上下の余白の設定
noresizeフレームのサイズの変更を禁止する
scrollingフレーム内のスクロールに関する設定を行う
frameborderフレーム枠に関する表示/非表示の設定を行う

frame要素は、frameset要素によって分割された各フレームの内容と表示方法を設定するものです。フレームの内容としては、フレームを定義している元の文書を指定することはできません。

フレームの欠点

メニューなどが常に表示されるなどの便利な機能を持つフレームですが、欠点も少なくありません。この項では、そういったフレームの欠点を幾つか挙げています。制作者側で、フレーム作成について工夫を考慮する必要があります。

フレームのアクセシビリティ

フレームには様々な欠点があります。しかしだからと言って、フレームが諸悪の根源になることはありません。フレームに用いるアクセシビリティを尊重して制作することを強くお奨めします。

フレーム未対応のブラウザへの配慮

フレーム未対応のブラウザには、noframes要素を用いて、代替のテキストあるいは、代替のページに誘導するようにします。この要素は、必ず frameset要素の中で配置します。

<frameset rows="200,*">
	<frame src="top.html" name="top">
	<frame src="left.html" name="left">
    <noframes>
      <body>
        <p>
        あなたのブラウザはフレームに対応しておりません。
     大変ご面倒ですが、こちらの
     <a href="another.html">代替ページ</a>へ移動してください。
        </p>
      </body>
    </noframes>
</frameset>

noframes要素内の、body要素は、フレーム未対応ブラウザのためのものです。

なお、noframes要素で囲まれた範囲は、フレーム対応のブラウザでは表示されません、念のため。

フレーム枠は固定しない

フレームで用いる noresize属性を使ってフレームの枠のサイズ変更を禁止してしまうと、コンテンツによっては、すべてがフレーム枠内に表示されるとは限りません。また、ユーザ側で文字サイズを大きく変更している場合には、テキストの全部が表示されなくなる危険もあります。ユーザ側で自由に枠のサイズが変更できるようにすることは、バリアフリーな優しいフレームページになります。

また、フレーム枠を非表示にしてしまうと、当然サイズ変更ができなくなります。フレーム枠はきちんと表示させるようにしましょう。

インラインフレームの設定

ページ内に別途フレームを設定するには、iframe要素でインラインフレームを使います。なお、フレーム同様、HTMLの文書型宣言(DTD)Transitionalが必須です。これも非推奨扱いで、廃止が予定されております。

インラインフレームの設定は以下の通りです。

<iframe src="anothe.html" name="another" width="500" height="400">

iframe要素の属性と値

属性機能
srcURIインラインフレームに読み込む文書を指定する
name名前

target属性によって指定する任意の名前を指定する

widthピクセルインラインフレームの横幅を指定する
heightピクセルインラインフレームの高さを指定する


This Page is HTML4.01 Valid! 初版更新日 2003年1月4日
Copyright(C) 2002-2004 banban@scollabo.com