<FRAMESET [cols|rows]="※※">
:
:
<NOFRAMES>
非フレーム版はhttp://www.oficial-pigment.co.jp/にあります.
</NOFRAMES>
</FRAMESET>
終了タグ:必須
:の部分は別で解説する.フレームは特殊なので,長々となるだろう.が,辛抱して呼んでほしい.
まず,フレームについて話す.フレームとは,画面を分割する事である.例えば,右側にメニューを表示し,左側にコンテンツを表示するというような.
表示に時間がかかるが,表示されてしまえば非常に使い勝手のいいものになる.何故時間がかかるかというと読み込むファイルの数が多いためです.一般的なHTMLは当然ながら「表示すべきファイル+イメージ」の1つですむのだが,フレームになると「フレームを設定しているファイル」が1つ,「表示すべきファイル」が最低でも2つとなるので,1+2で一度に3つのファイルを読み込むのです.
少し変な書き方ですが, [cols|rows]の部分は属性です.当然[]は不必要で書く必要はありません.cols はフレームを縦に,rows はフレームを横に分けます.
※※の部分は,何ピクセルで分けるかというものである(20%のようにすれば%指定になる).* は比率を表すものです.*は 1* と等価です.本によって成り行きと解説されているところもありますが,間違いです.(*だけであれば結果的に成り行き)以下の例を参考にしてください.
_________ _____
| |/ 200px
|_________| _____
| |/ 比率1
| |
|_________|
【HTML】
<FRAMESET rows="200,*">
:
:
</FRAMESET>
_________ _____
|_________|/ 100px
|_________|
| |
| |
|_________|
【HTML】
<FRAMESET rows="100,*,3*">
:
:
</FRAMESET>
仮にブラウザの高さが500px だとしよう.* は 1*と等価であるから500-100を1:3で分けるという事になり,上から100,100,300と書いたのと同じである.高さを1000pxとすると100,225,675と書いたのと同じである.
%に関して rows="200,80%,*" のように指定したとしよう.200px,ブラウザの高さの80%,残りと指定したわけです.問題があることが分かりますか?仮にブラウザの縦幅が500pxだったとしましょう.500pxの80%は400pxであるから,200,400,-100となってしまう.このような場合はユーザーエージェントが自動に比例計算し調整する.逆の場合も同様です.
普通のHTMLファイルには1つのHTMLと1つのBODYがある.それに対してフレーム定義ファイルには1つのHEADと,BODYと等価の1つのFRAMESETがある.簡単に訳すと,FRAMESETの前に,BODYやその中に入る要素があってはならない.その要素があった場合,ユーザーエージェントはFRAMESETを無視する.というものです.
(1)
<HTML>
【略】
</HEAD>
<BODY>
<FRAMESET [cols|rows]="※※">
:
:
<NOFRAMES>
非フレーム版はhttp://www.oficial-pigment.co.jp/にあります.
</NOFRAMES>
</FRAMESET>
</BODY>
</HTML>
(2)
<HTML>
【略】
</HEAD>
<FRAMESET [cols|rows]="※※">
:
:
<NOFRAMES>
<BODY>
非フレーム版はhttp://www.oficial-pigment.co.jp/にあります.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
これは簡単ですよね?2つともBODYがあってはいけないです.
NOFRAMESはフレーム表示できないユーザーエージェント用の文章である.フレームを使ってない文書がどこにあるか,どのような内容のページかをあらわしている文書などにリンクを貼っているのが望ましい.私の買った本では NOFRAME で紹介されてました.
<FRAME src="読み込むファイルのURL" name="フレームの名称">
終了タグ:不要
上で紹介した:の部分にこのタグを必要な分だけ入れ,どのページを読み込むかを指定する.rowsの場合は上から,colsの場合は左から順に指定する.
NAME に関しては
リンクに関するタグを参照されたい.
ちなみに,FRAMESETは入れ子にする事も出来て,以下のようなフレームの作成も可能である.
________________
| 名称:left | 名称:area |
| 1.html | 2.html |
|_______|_______|
| 名称:contents |
| 3.html |
|_______________|
【HTML】
<HTML>
<HEAD>
【略】
</HEAD>
<FRAMESET rows="*,*">
<FRAMESET cols="*,*">
<FRAME src="1.html" name="left">
<FRAME src="2.html" name="area">
</FRAMESET>
<FRAME src="3.html" name="content">
<NOFRAMES>
【略】
</NOFRAMES>
</FRAMESET>
--->
続きを読む