境界線に色をつけたり、フレームを使ったページ内でのリンクの作り方に挑戦してみます。
まずは、境界線に色を付けてみましょう。
え？ いつやるのかですって？ そりゃもちろん、境界線というくらいやから、今日かいせんかい！
(^_^;;
木枯らしが吹き荒れたところで、本題に入りましょう。
境界線に色をつけて遊ぶ
<FRAMESET BORDERCOLOR="色">～</FRAMESET>
前回作成したサンプルタグを再利用し、framec.htmに変更を加えてみます。
<frameset cols="25%,75%" bordercolor="red">
<frame src="frame3.htm">
<frame src="frame2.htm">
</frameset>
これを framed.htm として保存します。bordercolor="red" が追加されてます。
左右に表示させるページは前回の frame3.htm と frame2.htm を使い、
framed.htm をブラウザで開いてみましょう。境界線が赤になって表示されます。
色の指定方法は以前に書いたとおりですが、ざっとおさらいしますね。
色の名前を英語で指定して、問題なく使える色は１６色で、以下のとおりです。
下に並べて書いたのは、RGB値（#RRGGBB形式）で表す場合です。
| black | #000000 | （ブラック）黒 | gray | #808080 | （グレイ）灰色 |
| silver | #c0c0c0 | （シルバー）銀 | white | #ffffff | （ホワイト）白 |
| blue | #0000ff | （ブルー）青 | navy | #000080 | （ネイビー） |
| teal | #008080 | （ティール） | green | #008000 | （グリーン） |
| aqua | #00ffff | （アクア） | lime | #00ff00 | （ライム） |
| yellow | #ffff00 | （イエロー） | magenta | #ff00ff | （マゼンタ） |
| olive | #808000 | （オリーブ） | purple | #800080 | （パープル） |
| Maroon | #800000 | （マロン） | red | #ff0000 | （レッド） |
では、次にスクロールバーの表示・非表示の指定に挑戦します。
スクロールバーというのは、表示されるページのサイズがブラウザの
サイズよりも大きい場合に表示されるあれのことです。
スクロールバーを表示させたり、非表示にさせる
<FRAME SRC="" SCROLLING="YES">
<FRAME SRC="" SCROLLING="NO">
<FRAME SRC="" SCROLLING="AUTO">
YESを指定すれば、スクロールバーが必ず表示されるようになり、
NOを指定すればスクロールバーは常に表示されなくなります。
AUTOを指定すると、ページの内容に応じて、スクロールが必要な場合には
表示されます。無指定の場合には AUTOが標準で設定されています。
特に必要が無ければ、何も指定せずに AUTO の設定を有効にしておくのが無難です。
ホームページを見る人のパソコンの画面サイズ（解像度）は、必ずしもページを作った人の
解像度を同じとは限りません。
そのため、見る人の環境によっては、NO を設定すると、ページ全体を見ることが出来なく
なってしまうという心配があります。」
<frameset cols="25%,75%">
<frame src="frame3.htm" scrolling="yes">
<frame src="frame2.htm" scrolling="yes">
</frameset>
これを framee.htm として保存し、ブラウザで開いてみてください。
スクロールバーがそれぞれのページに２本表示されました。
境界線を見えなくさせる 大リーグボール２号？(^_^)
<FRAMESET FRAMEBORDER="0">～</FRAMESET>
フレームを使っているページなのに、境界線が見えないページを見ることが
ありますが、このタグを使っています。
frameborder="0" の部分は frameborder="no" と書いても同じです。
この属性を指定しない場合は frameborder="1" または frameborder="yes"
と同じ指定が標準で設定されています。
では、さきほどの framee.htm に修正を加えて次のように書き換えます。
修正個所は、bordercolor="red" の部分が frameborder="no" に変わりました。
さらに、border="0" というおまじないを追加しています。
こうすると、境界線が完全に見えなくなってしまいます。
<frameset cols="25%,75%" frameborder="no" border="0">
<frame src="frame3.htm">
<frame src="frame2.htm">
</frameset>
framef.htm と名付けて保存して、ブラウザで開いてみてください。
境界線なしで、表示されました。
さて、次はフレームに対応していないブラウザ用にメッセージを表示させるタグです。
フレームに非対応のブラウザのために
<NOFRAMES>～</NOFRAMES>
フレーム機能に対応していないブラウザで、フレームを使ったページに
アクセスしようとすると、ページが正しく表示されません。
そのため、上記のタグでフレーム非対応のブラウザでアクセスした人の
ためにメッセージを表示させたり、そこからフレームを使わないページ
へのリンク先を書いておくのが優しいページということになるでしょう。
framef.htm を修正してみます。
<frameset cols="25%,75%" frameborder="no" border="0">
<noframes>
このページはフレーム機能を使っています。<br>
フレーム機能に対応していないブラウザをお使いの方は<br>
下記ページへジャンプしてください。<br>
<A href="ジャンプ先">フレーム非対応版</A>
</noframes>
<frame src="frame3.htm">
<frame src="frame2.htm">
</frameset>
なお、<noframes>～</noframes>ではさまれた部分は、フレーム機能に対応
しているブラウザには表示されません。
フレームに対応していないブラウザの場合は、こんな感じで表示されます。
さて、今度はフレーム機能とリンクの書き方について触れましょう。
フレーム内のページにリンクを張る
<FRAME SRC="" NAME="">
<A HREF="" TARGET="">
通常、リンクを作ると、リンクを書いたページと同じページにその内容が
表示されますが、フレーム機能を使ったページの場合は、ひと工夫した
ほうが良いでしょう。
たとえば、こんな感じのページがあったとします。
この例で、通常のリンクの書き方で○いがちん○夜郎○ひで○きゆぶの○みつりんに
<A HREF="">～</A>をそれぞれ書いてリンクを作ると、
どちらのリンク先の内容も上の例のページ左に表示されることになってしまい、これは不便です。
左ページのリンクをクリックしたら、右ページにその内容を表示させるようにしたほうが
見た目は格段に良いわけですから。
そこで、以前にリンクの特集で登場した NAMEオプションでページに印をつけ、
TARGETオプションでジャンプ先を指定することにしましょう。
何はともあれ、実際にサンプルタグを書いてみながら使い方を覚えていただきましょう。。
まずはフレーム機能を定義するページからです。
<html>
<head>
<title>
フレーム機能とリンクで遊ぶの部
</title>
</head>
<frameset cols="35%,65%" frameborder="0" border="0">
<frame src="menu.htm" name="menu">
<frame src="hide.htm" name="hide">
</frameset>
</html>
これを frameh.htm と名付けて保存しておきます。
次に、左右に表示させるページを作りましょう。
まずは、menu.htm （左のページ）からです。
<html>
<head>
<title>
こりゃ、メニューのページだめにゅ。
</title>
</head>
<body bgcolor="pink">
<p>
<ul>
<li>
<a href="hide1.htm" target="hide">
ひでりんの生い立ち
</a>
<br>
<li>
<a href="hide2.htm" target="hide">
ひでりんの好物
</a>
<br>
<li>
<a href="hide3.htm" target="hide">
ひでりんの仲間
</a>
</ul>
</body>
</html>
以上を menu.htm として保存しておきます。
次に右に表示させるページを四つ用意しましょう。
上に三つのリンクを書きましたので、それぞれに三つのページと、
最初から表示させておきたいページ一つです。
まずは、hide.htm からです。
<html>
<head>
<title>
ひでりんをさぐる
</title>
</head>
<body bgcolor="aqua">
<p>
<center>
<font color="white" size="5">
ひでのひみつ
</font>
</center>
</body>
</html>
以上が hide.htm です。
次に hide1.htm です。
<html>
<head>
<title>
生い立ちなのら
</title>
</head>
<body bgcolor="yellow">
<center>
<font color="white" size="5">
Ｍ７８星雲に生まれる(^○^)
</font>
</center>
</body>
</html>
以上が hide1.htm です。
次は hide2.htm です。
<html>
<head>
<title>
好物なのら
</title>
</head>
<body bgcolor="yellow">
<center>
<font color="white" size="5">
そりゃもちろん、</font>
<br>
<font color="white" size="7"
あれだよ(^○^)</font>
</font>
</center>
</body>
</html>
以上、hide2.htm です。
次が、hide3.htm です。
<html>
<head>
<title>
仲間なのら
</title>
</head>
<body bgcolor="teal">
<center>
<font color="white" size="5">
<ul><li>みつりん<li>いがりん<li>よろりん<li>リンリン<li>ランラン
<li>風鈴</ul>
</font>
</center>
</body>
</html>
以上が hide3.htm です。すべてのページをそれぞれの名前で保存して、
frameg.htm をブラウザで開いてみましょう。
ひでりんの生い立ちをクリックすると
ひでりんの好物をクリックすると
ひでりんの仲間をクリックすると
このように、左ページにあるリンクをクリックして、右ページが表示されれば成功です。
では、今回はここまでです。次回はちょっと凝ったページ作りに挑戦です。
