HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座

|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさらHTML,CSS講座トップ > HTML4.01 講座インデックス > フレーム Frame
様々なブックマークサービスがご利用頂けます。

フレーム Frame

【 基本定義 】 【 境界線 】 【 境界線の太さ 】 【 境界線の色 】 【 画面のスクロール 】 【 フレームサイズ変更の可、不可 】 【 余白 】
フレームは、1つのぺージに複数のウィンドウを分割して表示します。もともと フレームは、Netscape Navigator 2.0 の独自拡張機能を仕様に取り入れた規格なので、Internet Explorer 3.0より古いバージョンでは対応していません。
また、W3C が勧告する仕様においてフレームは、HTML4.0ではフレーム設定型DTD( Frameset ) で定義します。
フレームを使用してWebページを作成するには、『 frameset要素 』を記述するHTMLファイル、分割するウィンドウの数のHTMLファイルを作成します。
こちらのサンプルページをご覧下さい。
上記のリンクで開いたサンプルページは、『 ウィンドウを縦に分割 』したフレームページです。
構成
  • frameset要素を記述した index.htm
  • 画面左側ウィンドウの menu.htm
  • 画面右側ウィンドウの body.htm
上記 3 ファイルで構成されています。
■ 基本定義 ウィンドウを左右、上下に分割
ソース  ソース 基本
<!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>フレームの基本定義</title>
</head>
<frameset cols="200,*" title="フレームテストページ">
<frame name="menu" src="menu.htm" title="メニュー">
<frame name="body" src="body.htm" title="コンテンツ">

<noframes>
<body>
フレーム非対応環境への代替内容を記述します。
</body>
</noframes>
</frameset>
</html>
■ フレーム機能関連要素の記述
frameset要素は、html要素内に body要素の代わりに記述し、文字コードセットの関係から、head要素の下に記述します。
noframes要素は、body要素を包括する事ができますので、代替内容を記述する場合は、body要素内に内容を記述します。
■ DOCTYPE宣言
フレーム設定用のDTDを記述します。
■ frameset要素
画面の分割(フレーム)を定義します。
■ cols 属性
左右に分割を定義します。
値は、画面左、右の順に数値、又はウィンドウのサイズに対するパーセンテージで、カンマ( , )で区切り記述します。数値の単位はピクセル表示ですが、単位はつけません。
cols属性は、上記の例のように、200,* (アスタリスク)と、左側ウィンドウ 200ピクセル、右側ウィンドウ 残り全部と、* (アスタリスク)を使って記述を簡略する事ができます。
■ rows 属性
上下に分割を定義します。
■ frame要素
frameset要素の中でウィンドウを分割してページを表示する各フレームを指定します。終了タグはありません。
■ name 属性
フレームに名前を付けます。
a要素, area要素, base要素, form要素, link要素の target属性でリンク先に特定のフレームを参照します。
■ src 属性
フレームに表示させるファイルのURIを指定します。
■ title 属性
音声出力環境でのブラウジングは、フレームを使用したページの内容を把握するのが苦手なので、frameset要素、frame要素共に、title属性で、ページの内容を簡単に指定する事が推奨されています。
また、title属性に言語指定が必要な値を記述する為 frameset要素より以前に meta要素で文字コードを指定しておきます。
■ noframes要素
フレーム非対応環境用に表示させる内容を指定します。フレーム機能対応のブラウザでは、noframes要素の内容は無視されて表示されません。

ページTopへ
■ frameborder属性
フレームとフレームの境界線に関する指定をします。frameborder属性の指定が無い場合は、境界線が表示されます。
frameset要素、frame要素、どちらにも指定できます。ページ全体に指定する場合は、frameset要素に、個々のフレームに対応した表示にする場合は、frame要素に指定します。
  • yes 又は 1 (境界線を表示、初期値)
  • no 又は 0 (境界線を非表示)
ソース  ソース 基本
<frameset cols="200,*" title="フレームテストページ" frameborder="0">
表示  表 示
こちらをクリック(新規ウィンドウが開きます。)
ページTopへ
■ border属性 framespacing属性
フレームとフレームの間の境界線の太さを指定します。frameset要素のみの指定になります。
値は、ピクセル数値で記述しますが、単位はつけません。両属性も、同じ機能を持ちますので、どちらか記述すれば良いです。
ソース  ソース 基本
<frameset rows="300,*" title="フレームテストページ" border="10">
表示  表 示
こちらをクリック(新規ウィンドウが開きます。)
ページTopへ
■ bordercolor属性
フレームの境界線に色を指定します。値は、カラーネーム又は、RGB値で指定します。
frameset要素、frame要素、どちらにも指定できます。ページ全体に指定する場合は、frameset要素に、個々のフレームに対応した表示にする場合は、frame要素に指定します。
<frameset rows="300,*" title="フレームテストページ" bordercolor="#ff0000">
表示  表 示
こちらをクリック(新規ウィンドウが開きます。)
ページTopへ
■ scrolling属性
各フレームの画面をスクロールする、しない、また、ウィンドウサイズに応じてのスクロールバーの表示、非表示を指定します。frame要素のみの指定になります。
scrolling属性の指定が無い場合の初期値は、auto になります。
  • yes (画面をスクロールさせる)
  • no (画面をスクロールさせない)
  • auto 
    (ウィンドウサイズとページサイズによって、自動でスクロールのする、しないを指定します。初期値)
<frameset cols="300,*" title="フレームテストページ">
<frame name="menu" src="menu.htm" title="メニュー" scrolling="no">
<frame name="body" src="body.htm" title="コンテンツ" scrolling="yes">
表示  表 示
こちらをクリック(新規ウィンドウが開きます。)
ページTopへ
■ noresize属性
各フレームのサイズは、cols 属性、rows 属性で指定しますが、この指定は初期値であって、通常は閲覧者が境界線をドラッグして自由にサイズ変更することできますので、noresize属性で、閲覧者のフレームの表示サイズの変更を禁止することができます。
scrolling属性の指定が無い場合の初期値は、auto になります。また、frame要素のみの指定になります。
<frameset cols="300,*" title="フレームテストページ">
<frame name="menu" src="menu.htm" title="メニュー" scrolling="no" noresize>
<frame name="body" src="body.htm" title="コンテンツ" scrolling="yes" noresize>
表示  表 示
こちらをクリック(新規ウィンドウが開きます。)
ページTopへ
■ marginwidth属性 marginheight属性
フレーム内に表示するページの余白を指定を指定します。値は、ピクセル数値で記述しますが、単位はつけません。
marginwidth属性はフレーム内の左右の余白、marginheight属性はフレーム内の上下の余白を指定します。
frame要素のみの指定になります。
<frameset cols="300,*" title="フレームテストページ">
<frame name="menu" src="menu2.htm" title="メニュー" marginwidth="20" marginheight="20">
<frame name="body" src="body2.htm" title="コンテンツ" marginwidth="20" marginheight="20">
表示  表 示
こちらをクリック(新規ウィンドウが開きます。)

ページTopへ
(C) いまさらHTML CSS講座 2002-2008 All right reserved