第9回 世界が広がるフレーム機能!
 先週までにホームページ(HP)作成の基本をひととおりマスターした。今週からは応用編として、さらにHPを効果的に見せる方法などを紹介していく。まずはHPの画面を分割し、使い勝手をよくする方法にチャレンジしてみよう。

画面は分割すると便利

 HPの内容が充実してくると、どうしても縦方向のサイズが長くなりがち。ほかのぺージへのリンクボタンを探すのにも、いちいち画面をスクロールしなければならなくなる。これはなかなか面倒だ。

 必要な情報を常に画面に表示しておくことができれば、使いやすさは向上する。これは画面をいくつかのフレーム(枠)に分割し、それぞれに異なった内容を表示する「フレーム」機能を使うことで実現できる。

フレーム機能に挑戦

 さっそく、フレーム機能を使ってみよう。

 HTMLエデイター「HyperEDIT32」を起動して、「ファイル」→「HTMLテンプレート」と進み、「単純テンプレート」を選択。入力画面が現れたら、「〈HTML〉」の次の行にカーソルを合わせ、マウスを右クリック。「特殊効果」(HE32のバージョンによっては「フレーム」)から「フレーム領域の設定」を選択する。

 写真1の画面で、どのように画面を分割するか指定する。今回は上下二つのフレームを作るので、分割方向は「縦方向」を選ぶ。

サイズは%かピクセル

 次に、フレームのサイズ(縦方向の長さ)を指定する。ここでは最初に「分割幅」の入カボックスに「70%」と入力して、「追加」をクリック。次に「30%」としてもう一度、同じ作業を繰り返す。

 「OK」をクリックすると、「〈FRAMESET ROWS="70%,30%"〉」と、「〈/FRAMESET〉」のタグが入力された。画面を横方向に分割する場合は「ROWS」が「COLS」に変わる。

 フレームの数はいくつでも設定可能。サイズはピクセルでも指定できる。また「*」も使える。たとえば画面を縦三つに分割し、上を50ピクセル、下を30ピクセル、真ん中は残りすべてと設定する場合は「50」「*」「30」と入力する。

表示内容を設定

 次にフレームの内容を設定する。「〈FRAMESET〜〉」の次行の先頭にカーソルを合わせて右クリックし、「特殊効果」から「フレームの設定」を選択。「URL」にはフレーム内に表示するファイル名を入力する。これまでに作成した「index.html」を指定しておこう。

 続いてフレーム名をつける。ここでは「frame1」として「OK」を選択する(写真2)

 すると「〈FRAME SRC="index.html" NAME="frame1" MARGINWIDTH="0" MARGINHEIGHT="0"〉」と入力される。これが上部フレームに表示する内容の指定だ。

 この指定はフレームの数だけ必要となる。次の行にカーソルを移動し、同様に下側のフレームの内容も設定。URLは「frame2.html」、フレーム名は「frame2」にする。

 以上が終わったら、このHTMLファイルを「index2.html」の名前で保存。ファイルの内容は以下の通りだ。

<HTML>
<FRAMESET ROWS="70%,30%">
<FRAME SRC="index.html" NAME="frame1" MARGINWIDTH="0" MARGINHEIGHT="0">
<FRAME SRC="frame2.html" NAME="frame2" MARGINWIDTH="0" MARGINHEIGHT="0">
</FRAMESET>
</HTML>

 続いて、以下の内容のファイルを作って「frame2.html」の名前で保存する。

<HTML>
<CENTER><FONT SIZE=7>
<A HREF="index.html" TARGET="frame1">
MY HOMEPAGE</A><P>
<A HREF="http://www.sankei.co.jp/" TARGET="frame1">
産経Web</A>
</HTML>

 最後に電話をプロバイダーにつなぎ、「index2.html」をネットスケープで表示してみよう(写真3)。「産経Web」をクリックすると、上のフレームの内容が切り替わる。

ターゲット

 ここで「frame2.html」をもう一度見てほしい。リンクタグの中に「TARGET="frame1"」という表示があるが、これはリンク先の画面を、どのフレームに表示するかを指定している。これがないと、リンク先ファイルは同じフレームに表示されることになる。

 また、リンク先ファイルを画面全体に表示したい場合は、「frame1」の代わりに「_TOP」を、新しい別のウインドーに表示したい場合は「_blank」を入力する。

 フレームを使うと、HPの可能性はさらに広がる。ただし、あまり細かくフレームを分けると、かえって見づらい画面になってしまうので注意しよう。

=毎週月曜日掲載


作成講座のメニューに戻る  第9回の宿題  第10回に進む


SINCE 1996/12/02