フレーム内のリンク指示

次にフレーム内のリンクの指示をします。ここでつまづく人が多いようですが、ちょっとしたコツを覚えれば簡単にできるようになります。

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用・口座維持手数料無料化就職・アルバイト情報
トッブページに戻る文字のサイズを変更する時は Control キーを押しながらマウスのスクロールホイールを回してください

フレーム内のリンク指示 ▲

次に、フレームページ内のリンクをクリックした時、思い通りの場所にリンク先が開けるように、少し修正をかけます。
思い通りの場所にリンク先を開くようにするためには

フレームページの分割したスペースごとに名前をつけ、
各リンク部には、どのスペースに行くのか、この名前を使って行き先を指定してやります。

コツは、名前に直感的にわかるようなものを使うことです。
「index」とか「menu」なんて名前では実態がわかりません。
「ue」「shita」「migi」「hidari」「right」「left」等の実態に即した名前を使うと、うんとわかりやすくなります。

分割したスペースに名前をつける

分割方法を指定したファイルで、画面を表す部分に、name=" "を追加するだけです。

ue
hidari	migi

例えば左の図のように名前を付けるとします。そのときはこんな指定をします。
<FRAMESET rows="10%,90%">
<FRAME src="01.htm" name="ue">
<FRAMESET cols="20%,80%">
<FRAME src="02.htm" name="hidari">
<FRAME src="03.htm" name="migi">
</FRAMESET>
</FRAMESET>

01.htm　が入っているスペースには『ue』と名前を付けたということです。
後はこの名前を使って行き先をリンク部に指定してやれば完了です。どこのスペースにかかれた文章でも一緒です。
「migi」に行けとか、「hidari」に行け、「ue」に行け、などと行き先をリンク部に指定してやれば、そこに内容が表示されます。

行き先の指定方法

target="行き先の名前"を追加します。
例えば<A href="link.htm">～</A>というリンクがどこかにあり、このリンクをクリックしたとき、その内容を、migi と名前を付けた画面表示させたいときは、 target="migi"を追加し、次のようにします。
<A href="link.htm" target="migi">～</A>のようになります。
このように書くと　link.htm　がどこにかかれていようと、(01.htmに入っていても、02.htmに入っていても03.htmに入っていても) 右下の『migi』と名前を付けたスペースにリンク先が開きます。

フレーム内のリンク指示、具体例

「hidari」と名前を付けた画面には「02.htm」が開く設定になっています。
この「02.htm」が次のようになっていたとします。

フレームの作り方

リンクの指示

完成させる

知っておくと便利

注意点

このタグはこんなように書かれていたとします。
<html><head></head><BODY>
<A href="setsumei.htm">フレームの作り方</A> 
<A href="link.htm">リンクの指示</A> 
<A href="kansei.htm">完成させる</A> 
<A href="sonota.htm">知っておくと便利</A> 
<A href="tyuui.htm">注意点</A> 
</BODY></HTML>

この状態ではリンクの行き先が書いてありませんので、リンク部をクリックすると、このリンクが書いてあるスペースにその内容が表示されてしまいます。
この場合は『hidari』となずけた狭いスペースに開いてしまうことになります。

リンク部をクリックしたときに、その内容が右の画面に表示されるようにするためには、次のように修正します。

フレームの作り方

リンクの指示

完成させる

知っておくと便利

注意点

<html><head></head><BODY>
<A href="setsumei.htm" target="migi">フレームの作り方</A> 
<A href="link.htm" target="migi">リンクの指示</A> 
<A href="kansei.htm" target="migi">完成させる</A> 
<A href="sonota.htm" target="migi">知っておくと便利</A> 
<A href="tyuui.htm" target="migi">注意点</A> 
</BODY></HTML>

target="migi"と全てのリンク部に記入しましたので、どのリンクをクリックしてもその内容は右側の『migi』と名付けた広いスペースに表示されるようになります。

これで好きなところにリンク先を設定できるようになりました。後は細かなところを修正すれば完成です。

分割の仕方を指定するファイルの修正

ここまでで

分割したい画面の数のファイルが用意でき、
新しく、分割の仕方を指定するファイルも作りました。
各々の分割スペースにファイルをはめ込み、
分割スペースごとに名前を付け、
ファイルのリンク部に行き先も指定しました。

ここで完成させるために最後の修正を加えます。新しく作った分割の仕方を指定するファイルがまだ完全ではありませんので、これを仕上げます。
普通のファイルですと <HTML><HEAD><TITLE><BODY> を加えますが、この分割方法を指定するファイルには<BODY>は使いません。 <HTML><HEAD><TITLE>の3つを加えれば完成です。
例えば3分割画面の場合は次のようになります。

<HTML><HEAD><TITLE>
超簡単ホームページ作り
</TITLE></HEAD>
<FRAMESET rows="10%,90%">
<FRAME src="senden.htm" name="ue">
<FRAMESET cols="20%,80%">
<FRAME src="mokuji.htm" name="hidari">
<FRAME src="setsumei.htm" name="migi">
</FRAMESET>
</FRAMESET>
</HTML>

これでひとまず完成です。
後は見た目を変えたり、もう少し便利になる方法を取り上げていきます。

TOPページに戻る前に戻る順番に次を見る