ホームページを作ろうヨ!!

初級篇★ページ作りの基礎知識1. HTMLを書いてみよう

VOL6.フレームページを作ってみよう　その２.リンクの表示先を指定する

前章で、Sample1のソースをご覧になって気になられた方もあるかと思います。もう一度見てみましょう。ここで問題になるのは、マーカーで印を付けたNAME="..." という部分です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/REC-html4/frameset.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="author" content="ayako tachibana">
<meta name="GENERATOR" content="notepad">
<title>FRAME SAMPLE</title>
</head>

<FRAMESET COLS="26%,74%">
<FRAMESET ROWS="80%,20%">
<FRAME SRC="../../framesamplepage1.htm" NAME="menu">
<FRAME SRC="../../framesamplepage2.htm">
</FRAMESET>

Sample1 の場合は、左上にある枠にリンクメニューが表示されていますので、この枠にNAME="menu" という名前を付けています。ここのリンクをクリックした時にリンク先を表示したいのは右の大きなスペースですので、そこにはNAME="content"という名前を付けました。ちなみにリンク先指定で問題になるのは、この場合 NAME="content"という名前だけですので、他の枠には名前を付けなくても構いません。

さて、これで表示先の設定は完了したわけですが、今度はリンク元でどの枠にジャンプすればいいかを指定しなければなりません。これはリンク元のあるページでリンク設定に以下のようなスクリプトを書き加えます。Sample1 の場合は、ここで表示されている「framesamplepage1.htm」というページを編集するわけですね。

リンク設定のタグは<a href="リンク先URL" >テキストまたは画像</a>であると既に「基本のタグ２」でご説明しました。Sample1ではリンクに画像を使っていますので、そもそもは以下のように書かれていたわけですが...

<a href="tea5.htm"><IMG src="workshop_top/2003spring/link_tea.gif" width="150" height="18"></a>

このままだとリンク先はリンク元と同じ枠に表示されることになってしまいます。そこで以下のように target="表示先の名前"をタグ内に書き込みます。この時必要になるのが、先にフレームページで設定した名前です。この場合は上の例のように表示先の枠に「content」という名前を付けましたので、それをここに書き込めば良いわけです。

<a href="tea5.htm" target="content"><IMG src="workshop_top/2003spring/link_tea.gif" width="150" height="18"></a>

こうしておけば、リンク先は指定した枠内に表示されるようになります。フレームページでそれぞれの枠に付ける名前は任意ですので、自分なりに分かりやすい名前を付けておいて構いません。更にこれを応用しますと、表示させる枠を自由に設定できるようになります。例えば、リンクメニューの中で、一部を他と違う枠に表示させたい時などは、フレームページで以下のように別の名前を付けておきます。これはSample5でご覧下さい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/REC-html4/frameset.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="author" content="ayako tachibana">
<meta name="GENERATOR" content="notepad">
<title>FRAME SAMPLE</title>
</head>

<FRAMESET cols="26%,74%">
<FRAMESET ROWS="80%,20%">
<FRAME SRC="../../framesamplepage4.htm" NAME="menu">
<FRAME SRC="../../framesamplepage3.htm" NAME="content2">
</FRAMESET>
<FRAME SRC="../../framesamplepage3.htm" NAME="content">
</FRAMESET>

</html>

こうしておいてから、target="表示先" に、「content」なり「content2」と書き込むことによって、表示先を自由に入れ替えることが出来るわけですね。Sample5では、★印の付いている「更新のお知らせ」、「過去の更新一覧」のみが下の枠に、他は右の大きな枠内に表示されるようにtarget="..."を設定しています。

なお、target="表示先"は、以下のように書くことも出来ます。

・target="_blank" ... 新しいウィンドウを開いて表示します。

・target="_top" ... フレーム枠を全て解除して、ブラウザの画面いっぱいに表示します。なお、このリンクのあるページがフレーム枠ではなく、単体で画面に表示されている時は、通常と同じにその画面上でリンク先に切り替わります。

・target="_self" ... リンク元と同じフレームに表示されます。

・target="_parent" ... 動作は_topと同じです。

このような表示で良い時は、各フレーム枠に名前を付ける必要はありません。

これで表示先も自由に操作することが出来るようになりました。次の章では、こうして作ったフレームページの枠を、いろいろに装飾する方法について説明してゆくことにしましょう。

初級篇1.VOL6.フレームページを作ってみよう・その１ <<

>> 初級篇1.VOL6.フレームページを作ってみよう・その３

2006.7.17.+7.20.