home
information

for contents

how-to HTML files

default layout

browsers

pictures

table

frame
upload
tags

form
bbs
HP Guide for Beginners(タイトルロゴ)

["frame"]

---フレームページは嫌い、という人は少なくないようです("フレーム撲滅委員会"なんてHPも?)。---が、その一方で、"フレーム(ページ)なんていらない"と言いながら自分ではフレームを使っている人もいるくらいで、書く方にとって、実に魅力的なものだったりもします。

確かに、見づらいフレームページは少なくありません。---が、それは、"そのページがフレームだから"ではありません。---作者のちょっとした配慮さえあれば、ノンフレームページより見やすいページにすることも不可能ではないのです。

(私のページは、レイアウトやページの構成を考えて、計算した上でフレームを駆使して書いている---つもりですが、見ている人はどう思っているのでしょう? (反響はというと)今のところ、概ね好評のようですが、フレーム嫌いな人は返事くれないでしょうし・・・)


    frameライティング

     "画面分割"
     フレーム間リンク
     "フレームセット・オプション"
     フローティング・フレーム

    フレームのメリット、デメリット&その克服法

    "正しい"<NOFRAMES>の書き方


〔frameライティング〕

HP作成のページの中には、"フレームはビギナーの最後の難関"なんて書いてあるものもあったりしますが、"画面分割の概念"さえのみこんでしまえば、テーブル(表組み)などよりずっと簡単です。(---要は、"画面の分割"と、"フレーム間リンク"&枠をどのようにするか指定する、ただそれだけですから)

フレ-ムページの作成法というのは、HTMLファイルを画面のどのフレーム(区画)に配置していくか、につきます。
---ですから、HTMLファイルはあらかじめ用意しておく必要がありますが、別に完成されていなくてもかまわないので、コンテンツができていない場合は、とりあえず背景(自分のイメージしているおおよその色または柄)だけでも指定しておいて下さい。


("画面分割")

フレームページを書くには、"フレーム割り当て指定ファイル"(画面分割の仕方と、そこに最初に表示されるファイルを指定するファイル)が必要です。
(この(HTML)ファイルは、通常のHTMLファイルとは違って、<BODY>タグは必要ありません)

では、"フレーム指定ファイル"の書き方を解説していきたいと思います。

<HTML>
<FRAMESET xxx="p,p">
<FRAME SRC="file name" NAME="name">
<FRAME SRC="file name2" NAME="name">
</FRAMESET>
</HTML>
(xxx: COLS または ROWS
 (COLS: 左右に分割 ROWS: 上下に分割)

p: パーセンテージ、ピクセル数または *
 (*:"残り全部"の意("25%,*"のように書いて下さい))
name: 任意の名前)


もっとも基本的なタイプ(左右または上下に2分割する場合)はこれだけでOKです。---といってもわかりにくいかもしれませんので、例として、"Coolest Moment"で使用している"フレーム指定ファイル"の一つをサンプルとして挙げたいと思います。

  ex) sample

 (見終わった後は、(立ち上がった)ウインドウを閉じて下さい)

 1 2-3-4
<HTML>
<FRAMESET COLS="25%,75%">
<FRAME SRC="pc_menu0.html" NAME="1">
<FRAME SRC="pc_frame2.html" NAME="2-3-4">
</FRAMESET>
</HTML>

  (<HEAD>タグの部分は省略してあります)

"サンプル"の(HTML)ファイルのソースは上図のようになっています。

(左側の黒い画面: "pc_menu0.html"が表示
右側の白い画面: "pc_frame2.html"が表示)


この例では<FRAMESET COLS="25%,75%">なので、画面を左右に25:75に分割します。
("ROWS"の場合は、上下に25:75に分割)
"NAME"というのは、いってみれば、分割された画面のエリアそれぞれに付けられた名前です。(---"フレーム間リンク"では、この"NAME"でリンクする"エリア"を指定します)---(名前は)どんなものでもかまいませんが、必ず付けて下さい。
(例では、左側の黒い画面を"1"、右側の白い画面を"2-3-4"と名付けています)

---2分割の場合は"FRAME SRC=・・・"を続けて書けばいいのですが、3分割(以上)の場合は"FRAMESET・・・"をネスト(入れ子)して書く必要があります。
  ex) sample 2

 (見終わった後は、(立ち上がった)ウインドウを閉じて下さい)

5-1
5-2 5-3

<HTML>
<FRAMESET ROWS="11%,89%">
<FRAME SRC="pc_topmenu.html" NAME="5-1">
<FRAMESET COLS="65%,35%">
<FRAME SRC="pc_howto_h_f2.html" NAME="5-2">
<FRAME SRC="pc_tags1-2.html" NAME="5-3">
</FRAMESET>
</FRAMESET>
</HTML>
(<HEAD>タグの部分は省略してあります)

(上部の黒い画面: "pc_topmenu.html"が表示
左下の白い画面: "pc_howto_h_f2.html"が表示
右下のライトブルーグレーの画面: "pc_tags1-2.html"が表示)


こちらは、まず上下に11:89に分割し、その上で下部のフレームを左右に65:35に分割しています。

(左右の分割を先にする時は、たとえば、

<HTML>
<FRAMESET COLS="11%,89%">
<FRAME SRC="pc_topmenu.html" NAME="5-1">
<FRAMESET ROWS="65%,35%">
<FRAME SRC="pc_howto_h_f2.html" NAME="5-2">
<FRAME SRC="pc_tags1-2.html" NAME="5-3">
        ・
        ・
        ・
のように、"COLS"を先に書きます)

(画面の分割数に制限はありませんが("FRAME SRC・・・"を表示させたい順(左側または上部が優先)に書いていけばOK)、あまり細かく分割しすぎると誰も見に来てくれなくなるので、ほどほどにしましょう)


(フレーム間リンク)

フレームページの場合、通常のリンクの書き方をすると、"延々と"同じフレーム内でリンクしてしまいます。
---ふつう、フレームページを書く時は、いずれかのフレームにメニューを置き、そこのリンクボタンを押すと別のフレームにリンク先のファイルが表示されるようにするので、それではまずいでしょう。

そこで、"フレーム指定ファイル"を書く際に指定した<FRAME SRC="file name" NAME="name">中の「NAME="name"」が使われるわけです。

では、先ほどの"sample 2"を例にして解説したいと思います。

5-1
5-2 5-3

(上部の黒い画面: "pc_topmenu.html"が表示
左下の白い画面: "pc_howto_h_f2.html"が表示
右下のライトブルーグレーの画面: "pc_tags1-2.html"が表示)

<A HREF="file name" TARGET="name">

例えば、"pc_topmenu.html"に"1.html"へのリンクボタンを置き、それを今"pc_howto_h_f2.html"が表示されているフレームに表示したい場合、次のように書きます。

 <A HREF="1.html" TARGET="5-2">here</A>

同様に、pc_tags1-2.htmlが表示中のフレームへのリンクの場合、

 <A HREF="1.html" TARGET="5-3">here</A>

---他のフレームからリンクを張る場合も同様です。


("TARGETオプション")

'TARGET="name"'が最もよく使われる形ですが、他に、次のようなオプションがあります。
  1. <A HREF="file name" TARGET="_top"> (すべてのフレームを破棄)
  2. <A HREF="file name" TARGET="_blank"> (新規にウインドウを(次々)開く)
  3. <A HREF="file name" TARGET="_new"> (新規にウインドウを(1つ)開く)
  4. <A HREF="file name" TARGET="_parent"> (一つ前のフレームに戻す)
  5. <A HREF="file name" TARGET="_self"> (同じフレーム内でリンク("デフォルト"))

この中で最もよく使われるのは1. ,次いで2. になります。(5. はデフォルトですし、4. はフレームのうちの一つを"フレーム指定ファイル"でさらに分割した後、そのフレームの部分だけ元に戻す、という時ぐらいしか使いません)


 ('TARGET="_top"')
他のサイトへのリンクや、フレームページからノンフレームページへの変更、また、いったんフレームを破棄した上で新しい"フレームの枠組み"を作る時(<A HREF="'フレーム指定ファイル'名" TARGET="_top">と書けばOK)に使われます。

 ('TARGET="_blank"')
フレーム対応ブラウザでこれを指定しておくと、フレームページ、ノンフレームページにかかわらず、もう一つ新しくウインドウが開きます。
(指定してあるリンクをクリックするたびに新規に次々ウインドウが開きます)


 ('TARGET="_new"')
フレーム対応ブラウザでこれを指定しておくと、フレームページ、ノンフレームページにかかわらず、もう一つ新しくウインドウが開きます。
('TARGET="_blank"'とは違い、ウインドウが1つ新規に開いた後は、指定してあるリンクをクリックするたびにそのウインドウ内でリンク先が入れ替わります)

(ネットスケープでは、'TARGET="_blank"'と同じく、指定してあるリンクをクリックするたびに新しくウインドウが開きます)

(Note:
'TARGET'の書き方には、細心の注意を払って下さい。---書き方を誤ると、別フレームに表示させるはずだったのにウインドウが立ち上がってしまったり、狭いフレーム内だけで延々とリンクしてしまったりして、見ている人に多大な迷惑をかけることになります。

(---私も、これで大失敗したことがあります。---他のサイトへのリンクがまだ少なかった頃、左側のフレームにリンクを表示し、'TARGET="_top"'と指定するという書き方をしていたのですが、リンクの一つに'TARGET="_top"'を入れ忘れ---リンク先のHPが延々と左側のフレーム内で表示される羽目になってしまいました。---幸い、その頃私のページを見ていた人はほとんどいなかったようですが・・・))


(フレームページでのハイパーリンク)

(こう張らなければならない、という決まりはありませんが)一般的には、左側のフレームがメニューページだとすると、右側にリンク集ページをブラウズし、リンクの一つ一つに'TARGET="_top"'(または'TARGET="_blank"')と指定することが多いようです。


("フレームセット・オプション")

<FRAMESET>または<FRAME SRC>の中にオプションを書くことにより、スクロールの有無、フレーム枠の色、幅&有無、フレーム枠と文字の間隔を指定することができます。


 (スクロール("<FRAME SRC>のオプション"))
<FRAME SRC="file name" NAME="name" SCROLLING="xx">

 (xx: yes, no, autoのいずれか; デフォルトはauto)

各フレームごとにスクロールさせるかどうかを指定します。(特にこだわりがなければ、何も書かなくていいでしょう---ブラウザの方で、スクロールバーが必要な時は表示してくれます)

('SCROLLING="no"'と指定する時は、ディスプレイの解像度800*600以下(できれば640*480)で画面に表示されるかどうか確認して下さい(表示させたくない場合は別ですが))


 (マージン("<FRAME SRC>のオプション"))
<FRAME SRC="file name" NAME="name" MARGINHEIGHT="*" MARGINWIDTH="*">

 (*: ピクセル数)

フレーム枠と文字の間隔を指定します。(---このページは、'MARGINHEIGHT="15" MARGINWIDTH="30"'で指定されています)


 (枠の有無("<FRAMESET>のオプション"))
<FRAMESET xxx="p,p" BORDER="x" FRAMEBORDER="xx" FRAMESPACING="*">

 (x: 1(デフォルト)または0 xx: yes(デフォルト)またはno *: ピクセル数)

'BORDER'は枠の表示の有無、'FRAMEBORDER'は枠を立体的にするかどうか、'FRAMESPACING'は枠の幅を指定します。

(この3つをすべて"0"にすると、枠が消えます(ネットスケープでは、'BORDER="0"'だけでも枠が表示されなくなります)

(---このページで、IEのみ一見枠がないように見えるのに上下の画面の大きさを変えることができるのは、'FRAMEBORDER="no" BORDER="0" FRAMESPACING="1"'と指定しているからなのです。(---目を凝らしてみると、細いグレーの枠があるのがお分かりになると思います))

 (枠の有無("<FRAME SRC>のオプション"))
<FRAME SRC="file name" NAME="name" NORESIZE>

(枠を表示させた上で)フレームの大きさが変わらないようにします。


 (枠の色("<FRAMESET>&<FRAME SRC>のオプション"(ネットスケープ、IE4以上有効)))
<FRAMESET xxx="p,p" FRAME BORDERCOLOR="#******">または<FRAMESET xxx="p,p" FRAME BORDERCOLOR="color name">
 (*:0~9またはa~f "color name": 任意の色)

枠に色を付けます。("<FRAMESET>の場合はすべてのフレーム、<FRAME SRC>の場合は特定のフレームの枠のみに有効)


(フローティング・フレーム)

一つのページの中に別のページを表示させます。表示のされ方は"イメージ"とほぼ同じ(例外としてスクロールバーが出る)、リンク(の仕方)は"通常のフレーム"と同じです。(IE、NN6のみ有効)

<IFRAME SRC="file name" NAME="name">"コンテンツ"(ネットスケープVer.4以下のみ表示)</IFRAME>
(name: 任意の名前)

(下に、サンプルを載せています(---といっても、ネットスケープVer.4以下では実際には何も表示されないので、"擬似的"に書いています))

<DIV ALIGN="RIGHT"><IFRAME SRC="pc_others.html" NAME="i_frame" WIDTH="485" HEIGHT="232" FRAMEBORDER="no" BORDER="0" FRAMESPACING="0">
<FONT COLOR="silver"><U>こちら</U></FONT>をクリックしてみて下さい。<P>
美しい(?)マーキー("スクロール文字")が出ます。<BR>
(サウンドが鳴りますが、5回で止まります)</IFRAME></DIV>

(Note:
NN6の場合、'WIDTH'と'HEIGHT'を%で指定すると、罫線として表示されてしまい、フレームの中身が全く見れないので、数値で指定して下さい)


〔フレームのメリット、デメリット&その克服法〕
フレームページは見づらい、とか、センスのない人が書くと見られたものじゃない、と言われることもありますが、それは誤解です。
ページデザインはむしろ、ノンフレームページの方が難しいのです(---もっと端的に言えば、フレームページだと、少々センスに自信がなくてもごまかしがききます)。---もし、"フレームページだとうまく書けない"という人がいたら、それは単に慣れていないだけです。


(フレームのメリット)

・見映えがいい
テーブルでも画面分割は可能ですが、どうしても上下左右に隙間ができてしまいます(テーブル内に<BACKGROUND>や<BGCOLOR>を設定した場合、往々にして見苦しかったりします)。---フレームならそういったこともなく、思い通りに分割できます。

・使い方によっては、ブラウズの速度を速くできる
---複数のファイルを同時に読み込む分、表示に時間がかかる---というのは事実ですが、レイアウトの仕方によっては、それでも早いことがあります("Coolest Moment"と同じレイアウトを<BODY BACKGROUND>とテーブルでデザインすると、よりスピードが落ちてしまうし、ディスプレイの解像度によってはずれてしまう)。---要は、やり方次第です。

・"Windowsのヘルプ画面"みたいなことが、"手軽"にできる
---("Coolest Moment"のように)文章中の"キーワード"をクリックしていくと、別フレームに順次解説が表示される、なんてページも、簡単に書けます。
(もし、ノンフレームバージョンでこれと同じことをしようとしたら---ファイルがいくつあっても足りません)

・クリック一つでページを次々変えることができる
HPが"自分のサイト内"のみであれば、ノンフレームでも同じようなページを作ることは可能なのですが、"自動登録リンク"や掲示板を複数レンタルしている場合、ふつうは一か所しかジャンプ先を指定できないので、続けて書き込みしたいという時に不便です。---その点、フレームページであれば、リンクボタン一つ押せば他のページへすぐ行けます。


("絶対的デメリット")

フレームのデメリットのほとんど("デザイン的なもの"とか、読み込みに時間がかかる、リンクの張り方がわかりにくい、etc.)は"相対的なもの"で、書き方一つでメリットになることすらあるのですが、次のデメリットだけは避けようがありません(対処法はありますが)。

・画面が小さくて見づらい
フレームページにしたからといって、見ている人のディスプレイ画面自体が広がるわけではないので(当然)、どうしても見づらいこともあります。

---対策としては、

  1. ノンフレームページも別に作成し、互いにリンクを張って行き来できるようにしておく
  2. (レイアウトが落ちることがあるのは承知の上で)フレーム枠が可動のページにする
  3. フレーム枠が可動のページを別に作成し、互いにリンクを張って行き来できるようにする
のどれかになるのですが、ほとんどの人は1.か2.の方法をとっています("Coolest Moment"は"3."ですが、この書き方のHPは(他で)見たことがありません・・・たぶん、手間がかかるからでしょう)

(「せっかく<NOFRAMES>でページを書いたんだったら(〔"正しい"<NOFRAMES>の書き方〕参照)、フレーム対応のブラウザでもノンフレームバージョンを選択できるようにした方が見る人に対して親切」という意見もいただいています---確かにその通りなのですが、フレームかノンフレームかを選べるようになっている場合、ノンフレームで見る傾向が(大いに)あるそうです。
(前に書いた通り)私のページはフレームで見ることを前提にページデザインしていて、ノンフレームバージョンは"最低限コンテンツだけはできるかぎり同じものを見れる"ように"緊急避難的"に書いたものなので、フレーム対応ブラウザで見ると、"美しく"も(たぶん)見やすくもありません。---それで(ノンフレームバージョンだけ見て)"このページは×"なんて評価されてしまったら、悲しいですから)


〔"正しい"<NOFRAMES>の書き方〕

(私もかつて、"このページはネットスケープ2.0以上かIE3.0以上で見て下さい"とインデックスページに断り書きを入れていました。---その後、多くのインターネットTVではフレームページを見れないらしいと知ったこともあって、今は、ノンフレームブラウザでも見れるように書いています(私の"ノンフレームバージョン"に直にアクセスした人はごくわずかですが))

フレームに対応していないブラウザで"通常のフレームページ"を見た場合、画面には何も映りません。---ノンフレームブラウザでも見れるようにするには"フレーム指定ファイル"内で<NOFRAMES>オプションを使う必要があるのですが、この書き方はなかなか"難しい"のです。

---"書くこと自体は簡単"なのですが、<NOFRAMES>を書くのは、時になかなか面倒なのです。---それで、"このページは・・・"になるわけですが、見る方は、やはりいい気はしないでしょう。---そこで、どうしても時間がないなどの理由でノンフレームバージョンを書けない場合、一言、付け加えて下さい。

  「ノンフレームブラウザ用のページも準備中です」
   (この際、"準備中"がいつまで続くかはおいといて)

これで、ありふれたテーマのHPであれば、快く(?)別のページを探してくれるでしょう---"代わり"はいくらでもあるのですから。---でも、レアなテーマだったら---やっぱり努力するしかないですね。(特に、英語ページの場合は必須でしょう---見に来てくれる人がUSAやヨーロッパからばかりとは限らないのです。---現に、私も、ドミニカやベネズエラからメールもらっています)

また、ロボット検索エンジンによっては、フレームのページの場合<NOFRAMES>内のコメントが載る場合もあるので、その対策としてコメントとリンクを記述しておくのもいいでしょう。


さて、書き方ですが、次のように書きます。

<HTML>
<HEAD>
<TITLE>Coolest Moment---HP Guide for Beginners</TITLE>
</HEAD>
<FRAMESET COLS="25%,75%" FRAMEBORDER="no" BORDER="0" FRAMESPACING="0">
<FRAME SRC="pc_menu2.html" NAME="1">
<FRAMESET ROWS="17%,1%,82%" FRAMEBORDER="no" BORDER="0" FRAMESPACING="0">
<FRAME SRC="pc_top2.html" NAME="2">
<FRAME SRC="pc_line2.html" NAME="3">
<FRAME SRC="pc_start.html" NAME="4">
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#ffffff" LINK="#5151ff" VLINK="#b7b7fc">
<FONT SIZE="4">(ノンフレームブラウザの方は、<A HREF="pc_start_nf.html">こちら</A>でご覧下さい)</FONT>
</BODY>
</NOFRAMES>

</FRAMESET>
</HTML>

(このソースは"HP Guide for Beginners"の"スタートページ"のものですが、ブルーの文字の部分がノンフレームブラウザ用の記述になります。(フレーム対応ブラウザでは、この部分は無視されます))

<NOFRAMES>~</NOFRAMES>を最後の</FRAMESET>の直前に入れ、"~"の部分にコンテンツを記述すれば、ノンフレームブラウザではその部分だけ表示されます。

("~"内にフレームページと同じコンテンツをそっくりそのまま記述してリンクさせていくことはもちろん可能ですが、コンテンツの量によっては、フレーム対応ブラウザで表示スピ-ドが落ちてしまうこともあります。---ほとんどの人がフレーム対応ブラウザを使っている今、ノンフレームバージョンへのリンクを張るだけに留めて"フレーム指定ファイル"のファイルサイズを軽くするのが現実的選択かもしれません)



→Next 

Copyright 1998-2018 (C) "Opal" All Rights Reserved.