ホームページ作成(フレームで画面分割)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

ホームページ作成TOP > フレーム > フレームを使用する

フレームを使用する

フレームを使用する事で、画面を分割し代表的な使用方法としては、『メニュー部分』『内容部分』と分ける事が可能になります。

しかし、フレームは全てのブラウザで表示可能ではないのでフレーム未対応のページを作成する必要があります。その際には、フレームの表示されない環境用を参照して下さい。

ホームページ作成(フレーム)

このフレームを使用する事で、下記の様なメリットがあります。

『内容部分』をスクロールしても『メニュー部分』が画面表示外に移動する事がなく常に表示しておく事が出来ます。

・メニュー部分、内容部分は別々に保存してあるので、変更する際もその部分のみになるので、変更が簡単です。

下記のsampleの様な分割方法が代表的にあります。(これ以外も、勿論可能です。)

sample
ホームページ作成(フレーム左右)ホームページ作成(フレーム上下)ホームページ作成(フレーム左と上下)ホームページ作成(フレーム上と左右)ホームページ作成(フレーム上下と右)ホームページ作成(フレーム左右と下)ホームページ作成(フレーム縦に3列)ホームページ作成(フレーム横に3行)
HTML <frameset>〜</frameset>

フレームを使用するには、HTMLを記述する際のドキュメントバージョンでフレームが使用可能なバージョンで記述しないと、使用できませんので注意して下さい。

バージョン種類
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

フレームを作成するには、下記のタグを使用します。
『高さ』や『幅』には、『ピクセル,%,*』のどれかで大きさを決定します。

タグ意味
<frameset rows="高さ,高さ">〜</frameset>画面を上下に分割する
<frameset cols="幅,幅">〜</frameset>画面を左右に分割する
<frame src="url" name="名前">表示させるページの場所を指定

『高さ』や『幅』のサイズの指定方法は、『ピクセル』,『%』,『*』で指定します。

『*』は、rows="20%,*"と指定した場合に、残りの部分を自動的に指定する事ができます。

記述方法には、通常<body>〜</body>の中にそのページの中身を記述していきますが、フレームを使用する場合には代わりに<frameset>〜</frameset>を使用します。
よって下記の様なページを作成し、green.htmlorange.htmlを読み込む事になります。

★ ポイント ★

フレームを使用する場合には、表示する場所を指定してあげないとクリックしたページ自体が変更されてしまいます。

@各フレームに名前を付ける。
<frame src="green.html" name="greenpage">
<frame src="orange.html" name="orangepage">

Aこの名前に向って、表示したいページを読み込ませる。
<a href="リンク先" target="orangepage">メニュー1</a>


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

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>タイトル</title>
</head>

  <frameset cols="幅,幅">
    <frame src="green.html" name="greenpage">
    <frame src="orange.html" name="orangepage">
  </frameset>

</html>

上記のサンプルをそれぞれ以下に記述してみます。

ホームページ作成TOP > フレーム > フレームを使用する > このページのTOP ▲

分割概略
ホームページ作成(フレーム概要)

<frameset cols="a,b">
 <frame src="green.html" name="greenpage">
 <frame src="orange.html" name="orangepage">
</frameset>
ホームページ作成(フレーム概要)

<frameset rows="a,b">
 <frame src="green.html" name="greenpage">
 <frame src="orange.html" name="orangepage">
</frameset>
ホームページ作成(フレーム概要)

<frameset cols="a,b">
 <frame src="green.html" name="greenpage">
  <frameset rows="c,d">
   <frame src="blue.html" name="bluepage">
   <frame src="orange.html" name="orangepage">
  </frameset>
</frameset>
ホームページ作成(フレーム概要)

<frameset rows="a,b">
 <frame src="green.html" name="greenpage">
  <frameset cols="c,d">
   <frame src="orange.html" name="orangepage">
   <frame src="blue.html" name="bluepage">
  </frameset>
</frameset>
ホームページ作成(フレーム概要)

<frameset cols="a,b">
  <frameset rows="c,d">
   <frame src="orange.html" name="orangepage">
   <frame src="blue.html" name="bluepage">
  </frameset>
 <frame src="green.html" name="greenpage">
</frameset>
ホームページ作成(フレーム概要)

<frameset rows="a,b">
  <frameset cols="c,d">
   <frame src="blue.html" name="bluepage">
   <frame src="orange.html" name="orangepage">
  </frameset>
 <frame src="green.html" name="greenpage">
</frameset>
ホームページ作成(フレーム概要)

<frameset cols="a,b,c">
 <frame src="orange.html" name="orangepage">
 <frame src="green.html" name="greenpage">
 <frame src="blue.html" name="bluepage">
</frameset>
ホームページ作成(フレーム概要)

<frameset rows="a,b,c">
 <frame src="blue.html" name="bluepage">
 <frame src="green.html" name="greenpage">
 <frame src="orange.html" name="orangepage">
</frameset>

ホームページ作成TOP > フレーム > フレームを使用する > このページのTOP ▲

書き方は 〜フレームページ〜

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

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>タイトル</title>
</head>

  <frameset cols="28%,72%">
    <frame src="green.html" name="greenpage">
    <frame src="orange.html" name="orangepage">
  </frameset>

</html>
書き方は 〜green.htmlページ〜

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

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>greenpage</title>
</head>

<body bgcolor="#99ff99">

<ul>
<li><a href="リンク先" target="orangepage">メニュー1</a></li>
<li><a href="リンク先" target="orangepage">メニュー2</a></li>
<li><a href="リンク先" target="orangepage">メニュー3</a></li>
<li><a href="リンク先" target="orangepage">メニュー4</a></li>
<li><a href="リンク先" target="orangepage">メニュー5</a></li>
<li><a href="リンク先" target="orangepage">メニュー6</a></li>
<li><a href="リンク先" target="orangepage">メニュー7</a></li>
</ul>

</body>
</html>
書き方は 〜orange.htmlページ〜

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

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>orangepage</title>
</head>

<body bgcolor="#ffcc66">

<p>ここには、内容を入れます。</p>
<p>左のメニュー部分とは<br>別の画面になります。</p>

</body>
</html>
こうなります
IE7
IE
Firefox
Opera

ホームページ作成TOP > フレーム > フレームを使用する > このページのTOP ▲

スタイルシートでは、フレーム枠からの余白や色などを調整する事ができます。

ホームページ作成TOP > フレーム > フレームを使用する > このページのTOP ▲