"frame (P.1)"
(当サイトをPC(幅1920px)で見ると、大体こんな感じに分割されます。
(1998年開設の時からフレームを駆使し、ずっとこのレイアウトでした。
2018年以降は「擬似フレーム」ですが・・・))
・・・フレームページは嫌い、という人は少なくないようです("フレーム撲滅委員会"なんてHPも？)。
しかしその一方で、"フレーム(ページ)なんていらない"と言いながら自分ではフレームを使っている人もいるくらいで、書く方にとって、実に魅力的なものだったりもします。
確かに、見づらいフレームページは少なくありません。・・・が、それは、"そのページがフレームだから"ではありません。
作者のちょっとした配慮さえあれば、ノンフレームページより見やすいページにすることも不可能ではないのです。
(私のページは、レイアウトやページの構成を考えて、計算した上でフレームを駆使して書いている・・・つもりですが、見ている人はどう思っているのでしょう？
(反響はというと)今のところ、概ね好評のようですが、フレーム嫌いな人は返事くれないでしょうし・・・)
〔frameライティング〕
HP作成のページの中には、"フレームはビギナーの最後の難関"なんて書いてあるものもあったりしますが、"画面分割の概念"さえのみこんでしまえば、テーブル(表組み)などよりずっと簡単です。
(要は、"画面の分割"と、"フレーム間リンク"＆枠をどのようにするか指定する、ただそれだけですから)
フレ－ムページの作成法というのは、HTMLファイルを画面のどのフレーム(区画)に配置していくか、につきます。
・・・ですから、HTMLファイルはあらかじめ用意しておく必要がありますが、別に完成されていなくてもかまわないので、コンテンツができていない場合は、とりあえず背景(自分のイメージしているおおよその色または柄)だけでも指定しておいて下さい。
("画面分割")
フレームページを書くには、"フレーム割り当て指定ファイル"(画面分割の仕方と、そこに最初に表示されるファイルを指定するファイル)が必要です。
(この(HTML)ファイルは、通常のHTMLファイルとは違って、<BODY>タグは必要ありません)
では、"フレーム指定ファイル"の書き方を解説していきたいと思います。
最も基本的なタイプ(左右または上下に2分割する場合)はこれだけでOKです。
・・・といってもわかりにくいかもしれませんので、例として、"Coolest Moment"で使用している"フレーム指定ファイル"の一つをサンプルとして挙げたいと思います。
ex) sample 1 (注：IEのみ音が出ます)
(見終わった後は、「Back」ボタン(左側右側どちらでもOK)
をクリックして下さい)
"サンプル"の(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
(見終わった後は、上部メニュー右端の「Home」ボタンを
クリックして下さい)
(上部の黒い画面: "
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"を例にして解説したいと思います。
<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"'が最もよく使われる形ですが、他に、次のようなオプションがあります。
- <A HREF="file name" TARGET="_top"> (すべてのフレームを破棄)
- <A HREF="file name" TARGET="_blank"> (新規にウインドウを(次々)開く)
- <A HREF="file name" TARGET="_new"> (新規にウインドウを(1つ)開く)
- <A HREF="file name" TARGET="_parent"> (一つ前のフレームに戻す)
- <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"'だけでも枠が表示されなくなります)
(枠の有無("<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>の場合は特定のフレームの枠のみに有効)
