ほむぺのはなし 〜ホームページ作成支援〜

フレームページの作り方


まず、1画面に表示させたいページを作ります。

ここでは例として、index.htmlの「入り口」をクリックしたら、フレームで縦に分割して、左側にメニューページ、右側にメニューをクリックしたら表示されるページを作るとします。


まず、index.htmlとメニューページのHTML(menu.html)と右側のページ(migi.html)を作ります。

これだけだとまだフレームにさせる事が出来ません。

index.htmlの「入り口」から、メニューと右側のページを同時にリンクさせる事はできません。


フレームを使う場合、「フレームセット」タグを埋め込んだhtmlを呼び出す必要があります。

というわけで、「フレームセット」タグを埋め込んだhtmlも書きましょう。

書き方は次の通り。


<html>
<head>
<title>フレームセット</title>
</head>

<frameset cols="150,*" FRAMESPACING="0" BORDER="0" frameborder="0">
<frame src="menu.html" name="hidari" FRAMEBORDER="0">
<frame src="main.html" name="migi" FRAMEBORDER="0">
</frameset>

</html>

保存するファイル名は、frame.htmlとします。



順に説明します。
まず最初の部分

<html>
<head>
<title>フレームセット</title>
</head>

ここは大丈夫ですよね。

HTMLの基本的なところです。

普通と違うのは、見せるページを作るわけではないので<body>がない事ぐらいです。

次に行きます。



<frameset cols="150,*" FRAMESPACING="0" BORDER="0" frameborder="0">

ここでフレームセットタグを使用しています。

cols="150,*"は、colsが縦分割という意味です。

横に分割したい時は、colsをrowsに書き換えればOKです。



その後の"150,*"は分割する幅のピクセル数です。

片方が150ピクセル、もう片方が*になってますが、これは片方に150ピクセルとって、余った分を*に入れるという指定方法です。

ピクセル数ではなく、%で決める事もできます。その時の書き方は、"30%,*"等です。



その後のFRAMESPACING="0" BORDER="0" frameborder="0"は、フレームで画面を分割した時に表示されるボーダーラインを非表示にしています。(確か・汗)

表示させても問題ない人は書かなくてもOKです。

最初は確認のためにも、表示させた方がいいと思います。



次に

<frame src="menu.html" name="hidari" FRAMEBORDER="0">
<frame src="migi.html" name="migi" FRAMEBORDER="0">


ここでようやく、1画面に表示させるHTMLを指定します。

frame src="menu.html" name="hidari"
これでhidariと名前をつけた場所に、メニューページ(ファイル名がmenu.html)を呼び出します。

わかりにくいけど、hidariという名前は自分で自由に付けられます。

hidariと名前を付けたから左側に表示されるのではなく、縦分割の場合、最初に呼び出されるファイル(ここではmenu.html)が左に行くと思えばOKです。

(横分割の場合、最初に呼び出されるファイルは上に行くはずです)


frame src="migi.html" name="migi"も上と同じく、migiという名前をつけた場所にmigi.htmlを呼び出しています。



FRAMEBORDER="0"は、ここでもボーダーラインを非表示にしています。

表示させても問題ない人は書かなくてもOKです。

最初は確認のためにも、表示させた方がいいと思います。



ここまでで、HTMLファイルは、

・最初の入り口ページ(index.html)
・メニューページ(menu.html)
・右側ページ(migi.html)
・フレームセットファイル(frame.html)

以上4つできているはずです。


とりあえずここまでできたら、うまくできているか試してみましょう。


index.htmlの「入り口」に、フレームセットタグを使用したHTMLファイル(上記の例ではframe.html)をリンクさせます。

<a href="frame.html">入り口</a>

フレームで分割するときは、フレームセットタグを埋め込んだHTMLへリンクさせるという事を覚えてください。



うまく分割できましたか?

うまくできたら次に行きます。



せっかくメニューがあるのですから、メニューのリンクをクリックしたら右側にその内容が表示させるようにしたいですよね。

しかし、メニューの項目に、普通にリンクを貼っても、メニュー画面にその内容が表示されてしまいます。

これを右側に表示させるにはどうしたらいいか?

とりあえず準備として、自分のプロフィールを載せたHTMLを作成します。(pr.html)



さっき、フレームを設定した時に、メニューを表示させる場所にはhidari、右側にはmigiと名前を付けたのを覚えていますか?

メニュー画面のリンクに、「このリンクの内容は、migiという名前の場所に表示する」という設定をつける事が出来ます。


タグの書き方はこうです。メニューページ(menu.html)に書きましょう。

<a href=pr.html" target="migi">プロフィール</a>


リンクタグのa hrefに、target属性でその内容をどこに表示するかを指定しています。

右側のページにはmigiと名前を付けていたので、pr.htmlは右側に読み込まれます。




ちなみに、フレームを解除して表示させたい時(例:入り口ページへ戻る、別のサイトへ飛ぶ等)は

<a href="index.html" target="_top">入り口ページへ</a>

taegetに_topを付けると、フレームを解除してリンク内容を読み込みます。(よくわからなかったら一度試してみる事を勧めます)



これでフレームページが作れると思います。

ここでは2分割の方法のみですが、応用すれば3分割、4分割にもできます。

ただ、フレームを多く分けたページは重くなってしまいます。

通常は2分割、多くても3分割までにした方が無難です。

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送