>> HTML実践編

フレームを使ったメニュー

<アイコン説明>
:参考ページ

 フレームを使ったメニューについてやってみよう。
実際どんな表示になるのかは下の   をクリックしてみてね。

フレームを使ったメニュー

手順1:フレームを使って画面を分割しよう

サンプルを見てもらってわかるように、
左側にメニューが表示されてどこかのページへリンクで移動しても常にメニューは表示されているよね。
このような動作をするメニューを作るために、ここではフレームを利用しているんだ。

フレーム機能を使ってみよう

どのように実現させているのか知ってしまえば簡単で、
下のようにフレームを2分割にして左側にはメニューを表示して右側には表示したいページを表示させるんだ。

フレーム分割のサンプル
※わかりやすいように黄色と緑色で作りました

手順2:メニューを作ろう

 これでとりあえずメニュー部分(黄色)と本体部分(緑色)が分かれたので、
次にメニューの機能をつけてみようね。
メニューの付け方は簡単で、メニュー項目を作成してそれにリンクを適用すればいいよね。

リンクとは

メニュー追加のサンプル

ここで実際にサンプルを操作するとわかると思うけれど、
リンクを押すと左側のメニューがページ切り替えされてしまうよね。
これは、リンクの初期値が自分自身のウィンドウを切り替えるという設定になっているからなんだ。
つまり、右側のウィンドウのページを切り替えたい場合には、
ページ切り替えの対象を右側に設定しないといけないんだね。

手順3:ページ切り替えのウィンドウを指定する

 そこで、リンクを指定する際にターゲットのウィンドウを指定できたことを思い出してね。

ロードするウィンドウを指定しよう

ページを切り替える対象を指定するためには、
フレームのそれぞれのウィンドウに名前をつけて、その名前を使って切り替えの対象を指定すればいいんだったね。
つまり、今の場合は右側のウィンドウに名前をつけて、そこをページ表示の対象にすればいいんだ。

ページ切り替えのウィンドウを指定(完成)

 

     
  <<フレームページのソース>>

<<メニューページのソース>>

 
     


目次へ戻る