A.T-MOON

contents

パンくずリスト

メッセージエリア

フレームの基本

メッセージエリア

フレームページを作る

フレームページを作るためには、最低でも3つのページを作らなくてはいけません。
・フレームのTOPページ(下のタグです)
・TOPページ内に表示するページA
・TOPページ内に表示するページB
以上の3つは必ず必要になりますからね。
それではまずはTOPになるページを作りましょう。
ここではまず、縦に2分割した場合のソースです。
※例)
TOPになるページ
↑   ↑
AとBがTOPになるページに
指定されたサイズで表示されます
ページA
ページB
||
ページA ページB
イメージです
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <frameset cols="15%(Aのフレーム幅),75%(Bのフレーム幅)">
   <frame src="AのURL" name="Aのフレーム名">
   <frame src="BのURL" name="Bのフレーム名">
    <noframes>
     <body>
      <p>
      このページを表示するには、フレームをサポートしているブラウザが必要です
      </p>
     </body>
    </noframes>
 </frameset>
</html>

まず基本になるのが上のタグ。
このページがTOPになるページで、このページにアクセスする事により
A≠ニいうページとB≠ニいうページが表示されます。

まず、赤の太字で記述してある
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">ですが
これはフレーム使用の場合のDOCTYPE宣言です。(DOCTYPE宣言についてはHTMLのバージョンの指定で説明しています)

<frameset>〜</frameset>どのよう分割方法するかを記述してます。
通常のHTML文書は<head><body>から構成されますが
フレームの分割を設定する場合は<head><frameset>で構成されます。
つまり、通常<body>〜</body>タグがあるべき部分に、<framest>〜</framest>タグを配置することになります。
よって<body>タグは使用できないので注意して下さい。

そして<frameset>〜</frameset>の中に<frame>〜</frame>を記述し
フレーム内に呼び出すページと表示方法を記述します。

そして最後に、フレームに対応していないブラウザやユーザーがフレームを表示しない設定にしている場合など
代わりに表示する内容は<noframes>〜</noframes>というタグを使って設定します。
(上の「このページを表示するには〜」の部分)
このタグの間には、代替テキストの他にHTML文書を記述する事ができます。
ここでは<body>〜</body>タグが必要となります。

続いて表示されるページA≠ニB≠作りましょう。
これは普通にページを作るときと同じ要領で作って下さい。
この例の場合でいくとさしずめA≠ヘメニューを表示する部分になると思いますので
このページの左側にあるような感じのメニューページを作ります。
このときに大切なのはそのメニューからリンクの貼られているページを表示する場所を指定することです。
(詳しくはリンクの読み込み先の指定で説明しています)
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
  <body>
  ココにメニューを作りましょう
   <a href="リンク先のURL" target="frameB">リンク@</a>
   <a href="リンク先のURL" target="frameB">リンクA</a>
   <a href="リンク先のURL" target="frameB">リンクB</a>
  </body>
</html>

簡単にこんな感じで作ってみましょう。大事なところはピンク色で書かれている部分です。
フレームのTOPページのソースの部分でname="Aのフレーム名"、name="Bのフレーム名"と書かれている部分がありますね。
その部分に名前をつけてあげて下さい。
Aのフレーム名=frameA
Bのフレーム名=frameB
なんとなくわかってきましたか?
ターゲットで指定されたframeBframeAで選ばれたリンク先が表示されるというわけです。
フレームの名前は何でもかまいません。
frame○○
数字でもアルファベットでもかまいません。
但しいくつものフレームページを作る場合、同じフレーム名がついているような事があると
思わぬところに表示されてしまった…ということが起こりますので、わかりやすい名前をつけておきましょう。

そして忘れずにB≠ニいうページを作りましょう。
フレームのTOPにアクセスしたときに表示される表紙のようなものです。
これも普通のページを作るのと同じ要領で作っておいてください。
<html>
 <head>
  <title>ココにタイトル</title>
 </head>
  <body>
  ココに左のメニューで選択されたものが表示されます
  </body>
</html>
これらの3つのページ(ファイル)が基本となります。
次のページで色々な分割方法をのせますので作ってみて下さい。
ページTOP
ひとつ前のページに戻る
HTML TOPに戻る フレームの分割