Webページの作り方 (フレーム編)

このページを見た人：53,803人
相談員(金):萩原 潤

はじめに

　最近はタダで使えるWebページ作成ソフト(たとえばFrontPage Expressや、Netscape Composerなど)も多くなり、それなりに見栄えのいいページが作れるようになりました。しかし先に挙げたソフトはやはりタダだけあって機能が制限されていて、たとえばフレームに未対応なのがその代表例です。「そのために商用のwebページ作成ソフトを買うのもばからしい。でもフレームを使ったwebページを作ってみたい。」　そんなあなたに今回のお話をお届けします。題して、「フレーム対応のwebページをたいした機能もないメモ帳で作ってみよう」です。

フレームってなに？

　まず最初にフレームというものをご存じない方に少しだけ解説しましょう。フレームとはブラウザ(IEとかNetscapeとか)の画面をいくつかに分割してそれぞれに別々の内容を表示させる仕組みのことです。どんなときに使うかと言えば、たとえば片方にリンクをたくさん張っておいてそこをクリックすると、もう片方にそのリンク先が開くと言ったものがあります。

フレームの構造

　まず最初にフレームがどのようになっているのか大ざっぱにでも知っておいた方がいいと思います。「構造なんて難しそう」なんて考えないで、さらっと読んでもらえればOKです。

　まず、先ほども書いたとおり、フレームとは「ブラウザの中を複数に分割する」ものですから、分割した数だけ文章ファイルが必要です。これは当たり前に感じるかもしれませんが、そうではありません。フレーム単位で文書ファイルが必要だと言うことです。具体的に説明しましょう。

A

B

C

　上の図のように、画面がフレームによってA,B,Cと3分割されていたとしましょう。すると、まず表示のために必要なファイルがA,B,Cと3つです。

　次に、それ以外にもう一つ、フレームを定義するファイルが必要です。上の例だと、「全体を縦に二つに分けて、その左側にAをおく、残った左側をさらに横に二つに分割して、上にBを、下にCを起きなさい」という定義をするファイルが必要だと言うことです。 A,B,Cのファイルは先に挙げたタダで使えるhtml編集ソフトでも作れますね。ということで、以下ではフレームの定義ファイルの編集方法について説明しましょう。

実際の定義ファイルの作り方

　上記の例にあわせて、フレームの定義ファイルを作ってみましょう。繰り返しになりますが、必要な定義を箇条書きにしてみましょう。

  1. 全体を縦方向に二つに分割する。
  2. 二つに分けた左側にAというファイル(ここではa.htmlとします)を表示させる。
  3. 残った右側の画面をさらに横方向に二つに分割する。
  4. 分割した上の画面にBというファイル(ここではb.htmlとします)を表示させる。
  5. その下にCというファイル(ここではc.htmlとします)を表示させる。

　という手順になります。

　それでは実際にどういうファイルを作ればいいのか、ということを上の例を元に定義ファイルを書いてみましょう。以下に書いてあるのがその定義ファイルです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>Welcome</TITLE>
</HEAD>

<FRAMESET COLS="30%,70%">--(1)
<FRAME SRC="a.html" NAME="left" SCROLLING="auto">--(2)
<FRAMESET ROWS="25%,75%">--(3)
<FRAME SRC="b.html" NAME="head" SCROLLING="auto">---(4)
<FRAME SRC="c.html" NAME="bottom" SCROLLING="auto">--(5)
</FRAMESET>
</FRAMESET>

<NOFRAME>
<H3>テストのページ</H3>
<P>
あなたはフレーム非対応のブラウザをお使いですね。このページはフレームを使用しています。
<FONT SIZE=+0><A HREF="http://www.med.teikyo-u.ac.jp/">研コンのホームページへ</A></FONT>
</NOFRAME>

</HTML>

　上のソースはその機能により3つに分割されています。まず、最初の黒い部分はhtmlファイルのヘッダです。webページ作成ソフトを使ってページを作っているときが付かないかもしれませんが、ここにhtmlファイルのタイトルやその他の情報を書いておきます。

　次の青い文字の部分がフレームの定義をしているところです。ソースの中に書いてある番号が先ほど箇条書きにした番号に相当します。さらに細かく見ていきましょう。

  1. ここでは縦方向の分割したときの左右の割合を決定しています(COLS="30%,70%"のところ)。
  2. 分割したフレームに"left"という名前を付けてここにa.htmlというファイルを起きます。
  3. 右側をさらに2つに分割する命令。1番と同じく上下の割合を決定。
  4. 分割したフレームの上の部分に"head"という名前を付けてここにb.htmlというファイルをおく。
  5. 下の部分に"bottom"という名前を付けてここにc.htmlというファイルをおく。

　もちろんこれ以外にa.html,b.html,c.htmlという3つのファイルを用意しなくてはいけません。上の例で作ったフレーム付きページはこちらになります。

　最後の赤い部分ですが、これはフレームに対応していないブラウザで見たときに表示させるためのものです。最近のIEやNetscapeでは対応していますが、lynxなどのようなテキストブラウザはフレームに未対応なので、書いてあった方が親切です。

リンクの張り方

　次にフレーム内のリンクの張り方を解説しましょう。フレームを使用した場合は、リンクを張るときに注意が必要です。リンクを張る際にどのフレームにリンク先のファイルを表示させればよいのかを明示しなくてはいけません。先ほど各フレームに名前を付けましたよね。リンクを張るタグを書く際にその名前を示してあげるのです。具体的には<a href"http://○○/××.html">にtarget="表示させたいフレームの名前"というオプションをつけてやるだけです。これをつけないと、リンクが張ってあるフレームにリンク先のファイルが表示されてしまいます。また、フレームを解除したいときは、target="_top"とすればOKです。これは自分のページからほかのページにリンクを張るときには必須です。もう一つ、target="top"とすると別の画面が開いてそちらにリンク先のファイルが表示されます。

　先ほどの例にtargetオプションの使い方も書いてあります。ご参照ください。

最後に

　これでフレームに関する説明は終わりです。次回はこのページでも使っているCSS (Cascading Style Sheet)について説明をしたいと思います。