ttl0.gif (10158 バイト)No5

フレーム(frame)の作成

ページをいくつかに分け、それぞれ表示させるようにしたものを、フレームといいます。フレームは、HTMLのヴァージョン3から使えるようになりました。IE3.0以降・ネスケ3以降のブラウザは、フレームに対応していますが、未だ非対応のブラウザを使っている人もいます。フレームを使う場合は、こうした人への対応も考慮しなくてはなりません。基本的には、フレームが見えない人のために、別ページを用意し、こちらに誘導するタグを入れておきます。

フレームを使うことで、このような効果的なページレイアウトが作れます。しかし、フレームによって画面が狭くなるので、むやみに分けることは避けましょう。

このページは、画面を横に分割し、その左に01l.htm・右に01r.htmというHTML文書を表示しています。この記述だけがhtml5.htmlの内容なので、表示・ソースで確認しても、何も見えません。定義のためのHTML文には、<body>はありません。

フレームの定義

<frameset cols="130,*">
    <frame frameborder=0 src="01l.htm" name="link">
    <frame frameborder=0 src="01r.htm" name="main">
</frameset>

framesetタグのオプションで、colsは横方向の分割を、rowsは縦方向の分割を定義します。上の例は、ピクセル単位で130と残りに分けています。さらに、frameタグのオプションで、src=で表示するHTMLファイル名を順に指定します。そして、このフレームの名前をnameで指定します。名前は、後でこの枠を呼ぶときに使います。frameborder=0は、無くても構いませんが、少しでも広く取りたいので境界線を0にしています。分割の指定は、”40%”のように%単位で指定することもできます。

3分割の例  ブラウザの←「戻る」ボタンで戻って下さい。

フレーム非対応への処理

フレームに対応していないブラウザで見る人には、このままでは何も表示されません。<noframes>タグで、この場合表示させるファイルを指定します。ここでは、右側の01r.htmを見せることにします。

<noframes>
<a href="01r.htm"> フレームなしに行きます。</a>
</noframes>

フレームの定義ファイルの記述は、基本的には以上の2つのタグでお終いです。中身は殆どありませんが、このHTMLファイルが表紙になり、2つのページを見せるのです。編集は、別々に開いて行います。これを表示させて印刷しても、プリンタードライバによっては、フレームが印刷できないこともあります。そのようなときは、ソースでファイル名を確認し、どちらかのフレームだけ表示させて印刷します。

キィワードの指定

インターネットには、検索ページがいくつかあります。検索ページは、キィワードやジャンルを指定して登録すると、データベースに載せられるものと、検索ロボットが勝手にホームページを巡回し、キィワードを集めてくるものと、2通りがあります。後者のロボットが巡回してきたときに、適切なキィワードを用意しておくことで、正しく登録されます。このために、<meta>タグのオプションで、作者やキィワードが指定できます。

<meta name="author" content="Nobuyoshi Suzuki">
<meta name="keywords" content="ホームページの作り方,初心者,Win坊パソコン教室">

*キィワードは、半角,で仕切って、複数設定できます。

ブックマークの設定

HTML文書は、縦に長くなりがちで、目的の場所までスクロールさせるのが面倒なことがあります。ページの任意の場所に「ブックマーク(しおり)」を設定し、リンクでそこにジャンプさせることができます。

<a name=”名前”></a> のように<a>タグのnameオプションを使います。しおりは、範囲ではないので、</a>の間に何もなくても構いません。

ここにジャンプするリンクは、<a href=”ファイル名#名前”>のように、ブックマーク名の頭に#を付けます。同一ファイルの中であれば、ファイル名は省略できます。ここをクリックすると、frameの定義にジャンプします。

フレームの中身を変える(target)

リンクをクリックすれば、そのフレームは中身が変わります。別のフレームの中身を変えるようなリンクは、<a>タグに、オプションのtarget=”フレーム名”を加えます。このフレーム名が、<frame>のnameオプションで設定した名前です。左のフレーム(link)のリンクは、すべて右(main)のフレームを変えるリンクです。
<a href=”ファイル名#ブックマーク名” target=”main”> の形になっています。targetを指定しないと、左の細長い枠に表示されてしまいます。

フレーム枠の移動

ここをクリックして下さい。左のフレームに同じページが表示されます。
これでは見づらいので、境界の上にマウスを持ってくると、両矢印が現れ、これをドラッグするとフレームのサイズを変更できます。元へ戻して、ブラウザの←(戻る)ボタンで、戻して下さい。

<frame>オプションに noresize を付けると、境界を移動できなくなります。
また、scrolling=”no” を付けると、スクロールバーも出なくなります。

フレームの解消

フレームのある画面からリンクを張る際、基本的にはフレームが残ります。フレームを解消してリンク先へ移る場合は、<a>オプションに、target=”top” を加えます。

<a href=”01r.htm” target=”_top”>ここを</a>クリックすると、右側だけの画面になります。_はアンダースコアで、shift+ろ です。 確認後、ブラウザの←で戻って下さい。

別ウィンドウを開く

ここをクリックすると、別のウィンドウが開きます。
これは、<a href=”html2.htm” target=”top”>ここ</a> としています。別ウィンドウを開くのは、ブラウザが複数開くことになり、マルチタスクを使うので、パソコン側に若干負担が大きくなります。しかし、インターネットでは良くある手法なので、パソコン側のメモリーを増やすなど、環境整備も必要です。