 |
フレームのはなし |
|
|
☆フレームとは フレームっていうのは、画面を分割して、例えば、メニューを上に表示して、 下にコンテンツを表示したりして、下の部分だけを切り替えていく方法です。 たとえばこんな感じに分割させることもできます。
間の線を無くして分割されているのをわからないようにしたり、 スクロールさせないようにしたり、作り方によって結構いろいろできるようになってます。 それでは、実際の作り方の話に入っていきましょう。  ☆フレームを作る まず基本の２つに分割をしてみましょう。 上下分割見本（別窓で開きます） 左右分割見本（別窓で開きます） ２分割のフレームを作るためには、３つのファイルが必要になります。 フレームを定義するファイルと、それぞれ表示するファイルが２つ（例えばメニューと本文） の計３つです。 表示するファイルのほうは普通にこの前までのところで書いてきたタグで書けばＯＫなんですが、 フレームを定義するファイルはちょっと構造が違ってきます。 いままで「BODY」というタグを使っていたところが「FRAMESET」というタグになります。 基本は以下のとうりです。 <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <FRAMESET ROWS="50,*"> <FRAME SRC="menu.html" NAME="top"> <FRAME SRC="content.html" NAME="main"> </FRAMESET> </HTML> まず青で書いてある「ROWS」は上下に分ける時に使い、 左右に分けるときは「COLS」になります。 「ROWS="50,*"」 の赤の数字の部分は、分割したそれぞれのサイズを指定します。 間はカンマ(,)で区切ります。また、たてに３分割とか、よこに３分割なら、カンマで区切って 数字を３つ入れれば分割できます。
次にＦＲＡＭＥタグの中のＳＲＣ指定ですが、これは表示するページのアドレスです。 ２つに分けるなら上の例のように２行、３つに分けるならもう一行増やしてください。 上から順に表示されます。（たて分割なら上、中、下。横分割なら左、中、右です。） もう1つのＮＡＭＥ指定ですが、これは個々のフレームの名前です。 ここで名前を指定しておくと、リンクでＴＡＲＧＥＴ指定すればリンクを左のフレーム、 表示を変えるのは右のフレームということができます。 なのでとりあえず、わかりやすい名前をつけておくといいと思います。 ☆リンクの方法 通常リンクは<A HREF="リンク先ＵＲＬ" >リンク先名称</A> という形で指定しますが、フレームでこの指定をした場合、リンクのあるフレームが 変わります。 例えばメニューの中にこのままリンクすると、メニューのところにリンク先が表示されます。 そこで<A HREF="リンク先ＵＲＬ" TARGET="main"> というようにＴＡＲＧＥＴを指定します。これが上で説明したフレームの名前です。 ↓ここを開いてメニュー１を選んで見てください。 見本（別窓で開きます） ☆その他のＴＡＲＧＥＴ このＴＡＲＧＥＴ指定はこの他に、
↓ここを開いて「ｔｏｐ」「ｂｌａｎｋ」を選んで見てください。 見本（別窓で開きます） ☆応用編 それでは今度はたてとよこ両方組み込んで分割してみましょう。
<HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <FRAMESET ROWS="50,*"> <FRAME SRC="mainm.html" NAME="top"> <FRAMESET COLS="150,*"> <FRAME SRC="subm.html" NAME="side"> <FRAME SRC="content.html" NAME="content"> </FRAMESET> </FRAMESET> </HTML> こんな感じになります。 見本（別窓で開きます） どうでしたか？フレームの仕組み少しはわかってもらえましたか？ フレームを使うと何がいいかといえば、メニューが増えたりしたときに、 メニューのファイルだけを直せばいいというのと、見る人が操作しやすいとか、 どこにいるかわからなくなりにくいとかいろいろあると思います。 あとは工夫でいろいろ試してみてください。 | ||||||||||||||||||
戻る