左フレームには「left-mokuji.html」というフアイルが表示され、右フレームには 「right-hyoji.html」というフアイルが表示されます。 左図のように、左フレームには「メニュー（リンク文字列）右フレームに」「メインのページ」を置くという使い方が一般的のようです。 (フアイル名は半角英数字なら、任意に付けられます。)
Webページをサーフインしていると、「メィン画面」をスクロールしても、左右や上の画面が静止している、というページが沢山あります。 これはフレームという機能を使っているからです。リンク文字をクリックしても、そこを残して「メィン画面」が替るといった具合です。 下に、簡単なフレームを３例表示しました。
|
|
|
||||||||
上の第１図の分割です。実際は下図のように表示されます。
左フレームには「left-mokuji.html」というフアイルが表示され、右フレームには
「right-hyoji.html」というフアイルが表示されます。
左図のように、左フレームには「メニュー（リンク文字列）右フレームに」「メインのページ」を置くという使い方が一般的のようです。
(フアイル名は半角英数字なら、任意に付けられます。)
フレームのHTMLソースです。 <html> <head> <title>フレームページ(左右に分割)</title> </head> <frameset cols="20%,80%"> <!--「100,*」でも可、[,]の左が左フレームの幅(ピクセル値)、[＊]は残りの幅--> <frame src="left-mokuji.html" name="hidari" <!--leftでも可、任意--> <frame src="right-hyoji.html" name="migi" <!--mainでも可、任意--> </frameset> </html>
以上で３っつのフアイルの役割・分担の設定が終わりましたが、これだけでは、フレーム機能が十分果たせたてとはいいません。 左フレームのフアイルに細工が必要になります。１つ目は「リンク」の設定、２つ目は画面の表示場所の指定です。
話を分かり易くするために、ここで、新たなフアイル[rei1.html]と[rei2.html]の２つを作成します。
[rei1.html]のソース
<html> <head> <title>例１のページ</title> </head> <body> <h1 style="color: red">例１のページへようこそ<br> 変化しましたか。 </h1> </body> </html>
[rei2.html]のソース
<html> <head> <title>例２のページ</title> </head> <body> <h1 style="color: blue">例２のページへようこそ<br> ２つ目の変化です。 </h1> </body> </html>
- 左フアイルのソースの記述は下記になります。 <html> <head> <title>左フレーム</title> </head> <body> <p><a href="rei1.html" target="migi">例１のページを右に表示</a></p> <p><a href="rei2.html" target="migi">例２のページを右に表示</a></p> </body> </html>
以上、４個のフアイルの ソースをコピーし、 [.html]フアイルで保存して、お試しください。
なお、「target="migi">」のフレーム・ターゲット属性の[値]に下記４っつがあります。
[ _blank] ：新しい名前の無いウインドウに表示します。（余り使いすぎないように注意）
[ _self ] ：元のドキュメントと同じフレームに表示します。
[ _parent] ：現在のフレームの親フレームに表示します。
[ _top ] ：すでにあるフレームをすべて解除して、場面一杯に表示します。
説明
フレームのHTMLソースです。
<html>
<head>
<title>フレームページ(左右に分割)</title>
</head>
<frameset cols="20%,80%">
<frame src="left-mokuji.html" name="hidari"
<frame src="right-hyoji.html" name="migi"
</frameset>
</html>
下記「framesetのDTD」に[NOFRAMES（要素）]は任意ですがとでてきますが、フレームをサポートしていない、ブラウザに配慮して、
その内容を記述します。（対応ブラウザでは、表示されません。）その他、「IFRAME」要素がありますが省略させていただきます。
下に、比較的に使用される、第４のフレーム・スタイルと共にそのソースを記載しました。
また、このサンプルでは、スクローリングなし、ボーダーなしに設定してあるため、全くのノッペラ画面になります。
| 左上 | 右のフレーム |
| 左下のフレーム |
<html>
<head>
<title>３分割フレーム設定</title>
</head>
<frameset cols="20%,*" frameborder="0">
<frameset rows="50,200" frameborder="0">
<frame src="mae.png" name="hidari-ue" scrolling="no">
<frame src="left-mokuji.html" name="hidari-sita" noresize scrolling="no">
</frameset>
<frame src="right-hyoji.html" name="migi">
<noframes>
<body>
<p>このフレーム文書は、次のとおりです。</p>
<ul>
<li><IMG src="mae.png" alt="左向き矢印画像">/li>
<li><a href="left-mokuji.html">目次欄です。</a></li>
<li><a href="right-hyoji.html">メイン画面です。</a></li>
</ul>
</body>
</noframes>
</frameset>
</html>
<![ %HTML.Frameset; [
<!ELEMENT FRAMESET - - (FRAMESET|FRAME)+ & NOFRAMES?) -- window subdivision-->
<!ATTLIST FRAMESET
%coreattrs; -- id, class, style, title --
rows %MultiLengths; #IMPLIED -- list of lengths,
default: 100% (1 row) --
cols %MultiLengths; #IMPLIED -- list of lengths,
default: 100% (1 col) --
onload %Script; #IMPLIED -- all the frames have been loaded --
onunload %Script; #IMPLIED -- all the frames have been removed --
>
]]>
解説
<![ %HTML.Frameset; [ <!-- reserved frame names start with "_" otherwise starts with letter --> <!ELEMENT FRAME - O EMPTY -- subwindow --> <!ATTLIST FRAME %coreattrs; -- id, class, style, title -- longdesc %URI; #IMPLIED -- link to long description (complements title) -- name CDATA #IMPLIED -- name of frame for targetting -- src %URI; #IMPLIED -- source of frame content -- frameborder (1|0) 1 -- request frame borders? -- marginwidth %Pixels; #IMPLIED -- margin widths in pixels -- marginheight %Pixels; #IMPLIED -- margin height in pixels -- noresize (noresize) #IMPLIED -- allow users to resize frames? -- scrolling (yes|no|auto) auto -- scrollbar or none -- > ]]>
解説
追補
「URI」について、一般的には「URL (Universal Resource Locator)」という言葉が使用されておりますが、
HTML4.0からは「URI (Uniform Resource Identifiers)」が使用されるようになっています。
URL同様に、文書・画像・ビデオ・プログラムなどのWeb上のリソースを指定することができます。 URLはURIのサブセットで、URIの方が上位の概念です。