		HTMLタグ一覧 \| FAQ \| サイトマップ \| お問い合わせ

ちょっと差のつくテクニック＞ちょっと便利なHTML＞フレームを使って画面を分割する


１．	ホームページとは？
２．	ホームページの構造
３．	ホームページ作りの手順
４．	スペースの用意
５．	ソフトウェアの用意
６．	素材の用意


１．	サンプルを作ってみよう
２．	HTMLを編集しよう
３．	データを転送しよう


１．	ちょっと便利なHTML
２．	JavaScript で遊ぼう
３．	掲示板で盛りあがろう
４．	ｉモードのホームページ


１．	参考ページリンク集
２．	ホームページタブー20
３．	参考になる書籍集
４．	その他お役立ちリンク集

ちょっと差のつくテクニック

ちょっと便利なHTML

フレームを使って画面を分割する

<html>
<head>
<title></title>
</head>
<frameset cols="画面の横幅の大きさ1,画面の横幅の大きさ2">
<frame src="ファイル名1" name="フレームの名前1">
<frame src="ファイル名2" name="フレームの名前2">
</frameset>
<noframes><body>
フレームに対応していないブラウザー用のメッセージ
</body></noframes>
</html>
上のように指定することで、画面を左右二つに分割して表示することが出来ます。

画面を左右、あるいは上下に分割して、常に表示するナビゲーション部分と内容を表示する画面表示部分を分けて表示することができます。

操作のためのナビゲーション部分と、内容の表示のための部分を分けることが出来るので便利ですが、上手に指定しないと、かえって使いにくくなってしまいますので、フレームのサイズなどよく考えてご使用ください。

なお、この機能を利用するためには、画面を 2 つに文化するス場合、合計で最低 3 つの HTML ファイルが必要になります。一つは、フレームの枠組を作る HTML ファイルで、残り二つは、分割されたそれぞれのフレームにはめ込むための HTML ファイルです。

1. 基本の解説

【使用例】

ここでは、一つは、フレームの枠組を作る HTML ファイルとして frame.html という HTML ファイルを、ナビゲーション部分の HTML ファイルとして navigation.html を、内容を表示するためのフレームに一番最初に表示する HTML ファイルとして contents.html を用意してみます。

〈フレームの枠組を作るための HTML (frame.html)〉

<html>
<head>
<title>フレーム</title>
</head>
<frameset cols="200,*">
<frame src="menu.html" name="navigation">
<frame src="contents.html" name="contents">
</frameset>
<noframes><body>
フレームに対応していない方は以下にアクセスしてください。<br>
<a href="contents.html">フレーム未対応ブラウザー用ページ</a>
</body></noframes>
</html>

cols は横に分割するという意味で、それにつづく、「200,*」という値は、その分割する大きさを指定しています。ピクセル数で指定することが出来ますが、パーセントでも表示することができます。(* は、どんな大きさでも良い、ということを示し、特に大きさを指定しないときに使います。) 縦に分割したいときには、cols ではなく、rows を使います。

また、<frame> タグは、画面を分割したときにそれぞれのフレームに表示する HTML ファイルを指定します。また、name 属性でそのフレームの名前を指定しておきます。こうすることで、別のフレームに表示する画面の内容を操作することが出来ます。少し難しい概念かもしれませんが、使ってみるとわかりますので、お試しください。

そして、<noframes> タグ内には、フレームに対応していないブラウザーを使っている方用のメッセージを記述しておいてください。こうすることで、フレームに対応していないブラウザーを使っている方は、この内容を読むことが出来ます。

〈ナビゲーション部分の HTML に記述する内容 (navigation.html)〉

<a href="http://www.yahoo.co.jp/" target="contents">Yahoo! Japan </a><br>
<a href="http://www.goo.ne.jp/" target="contents">goo</a><br>
<a href="http://www.infoseek.co.jp/" target="contents">infoseek</a>

また、分割したフレームの一方から、別のフレームの内容を操作するために、ナビゲーション部分の HTML に、上のように、target 属性をで操作するフレームの名前を指定します。なお、「_top」と指定すると、この全てのフレーム構造を解除して画面に新しい内容を表示することが出来、「_parent」と指定すると、このフレームの内容を指定しているフレーム構造だけを解除して、画面に新しい内容を表示することができます。(フレームの中にさらにフレームがある場合に、有効な指定方法です。) また、「_self」と指定することで、自分自身に新しい内容を表示することが出来、「_blank」と指定することで、フレームの解除を行わず、新しいウィンドウに内容を表示します。

残りの「contents.html」はお好きにお作りください。どのような内容でも、HTML の文法にのっとったものならば大丈夫です。

上 (↑) をブラウザーで表示すると以下の「サンプルページ」ように (↓) なります。

→サンプルページ

【参考 TIPS】(フレームの詳細を設定する)

以下、フレーム構造を作るときに、<frame> タグに設定できる項目。

frameborder=n フレームの境界線を表示する (1) かしないか (0)。1 か 0 を指定。
noresize ユーザーにフレームの大きさを変えさせない。
scrolling=yes|no フレームのスクロールバーを表示するかしないか。

「１．ちょっと便利なHTML」

TOP

・広告掲載・リンクのご要望はお問い合わせフォームよりお願いいたします。→お問い合わせフォーム
・ホームページ作りの基本編を、オフラインでも、印刷して手元でも読めるテキストブックにしました→テキストブックのダウンロード
©初級者のための初級者によるホームページの作り方講座 since 1997

高齢者福祉