超初心者でも簡単！あなたもできるHP作成！− Make easily  
||　トップページ　||　HTML　||　Style Sheet　||　リファレンス　||　Web素材　||　Contact Us　||　サイトマップ　||　初めての方　||　
reference
リファレンスの見方 スタイルシートの書き方 ヘッダ情報 ページ全体 見出し 文字（テキスト） リスト テーブル 画像・イメージ リンク レイアウト フォーム フレーム リファレンス一覧


左右にページを分ける 上下にページを分ける 左右上下にページを分ける
境界線をなくす 境界線を固定する リンクを張るには
フレームを解除する スクロールバーを設定する フレームに対応していないブラウザ

フレーム

このリファレンスの見方については「リファレンスの見方」をお読みください。
フレームを使うと左右、上下にページが分かれているページが作れます。

フレームの見本

フレーム画面
【HTMLタグ】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>タイトル</title>
</head>

<frameset cols="150,*">
<frame src="page1.html" name="left">
<frame src="page2.html" name="right">
</frameset>

</html>

▲このページのトップに戻るTop

左右にページを分ける

左右にページを分けるには <frameset cols="左の幅,右の幅">を使います。
<frameset cols="150,*">
<frame src="page1.html" name="left">
<frame src="page2.html" name="right">
</frameset>
<frameset cols="150,*">　の150は左の幅を設定しています。右の「*」は残り全部という意味です。

<frame src="..." name="...">　でそれぞれ表示するページのリンク先、フレームの名前をつけておきます。
書く順序は、上に書くほど、左側に表示されます。

左右3つのフレームの例

<frameset cols="150,*,150">
<frame src="page1.html" name="left">
<frame src="page3.html" name="center">
<frame src="page2.html" name="right">
 </frameset>
▲このページのトップに戻るTop

上下にページを分ける

上下にページを分けるには <frameset rows="上の幅,下の幅">を使います。

上下のフレーム見本

<frameset rows="150,*">
<frame src="page1.html" name="top">
<frame src="page2.html" name="under">
</frameset>
<frameset rows="150,*">　の150は上の幅を設定しています。下の「*」は残り全部という意味です。

<frame src="..." name="...">　でそれぞれ表示するページのリンク先、フレームの名前をつけておきます。
書く順序は、上に書くほど、上に表示されます。

上下3つのフレームの例

<frameset cols="150,*,150">
<frame src="page1.html" name="left">
<frame src="page3.html" name="center">
<frame src="page2.html" name="right">
 </frameset>
▲このページのトップに戻るTop

左右上下にページを分ける

フレームを組み合わせると、上下左右にわけたフレームを作ることができます。

上下左右に分けたフレーム見本

index.html のタグ

<frameset cols="150,*">
<frame src="page1.html" name="left">
<frame src="page2.html" name="right">
</frameset>

page2.html のタグ

<frameset rows="150,*">
<frame src="page3.html" name="top">
<frame src="page4.html" name="under">
</frameset>

▲このページのトップに戻るTop

境界線をなくす

<frameset>タグに「frameborder=0」 と「border=0」 を書くと境界線をなくすことができます。

境界線のない見本

<frameset cols="150,*" frameborder="0" border="0">
:
</frameset>
▲このページのトップに戻るTop

境界線を固定する

境界線は指定しなければ、マウスで幅を変えることができます。
境界線を固定する場合は、 <frame> タグに「noresize」をつけます

境界線固定の見本

<frameset cols="150,*">
<frame src="page1.htm" noresize>
<frame src="page2.htm" noresize>
</frameset>
▲このページのトップに戻るTop

リンクを張るには

左フレームに目次を、右フレームにその内容を表示させたいときは、 まず <frame>タグに「name」をつけて右フレームに名前をつけておき、 左フレームの<a href="..."> に target 属性をつけます。

リンクの見本

index.html のタグ

<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="150,*">
<frame src="menu.html" name="left">
<frame src="main.html" name="right">
</frameset>
</html>

menu.html　のタグ

<html>
<head>
<title>タイトル</title>
</head>
<body>
<a href="link.html" target="right">リンク</a>
:

▲このページのトップに戻るTop

フレームを解除する

リンクを使った場合、フレームを使っているページ（トップページなど）にリンクを張る場合にはフレームを解除する必要があります。
フレームを解除しないとフレームの中にフレームが出来てしまいます。

リンク指定がおかしい例

このようにフレームを解除してリンクをしないと、フレームの中にフレームがいくつもできてしまいます。
これを防ぐには「target="_top"」を使います。

正常なリンク

<a href="link.html" target="_top">トップに戻る</a>
▲このページのトップに戻るTop

スクロールバーを設定する

<frame>タグに 「scrolling="..."」 を追加すると、スクロールバーの有無を指定できます。
何も指定しない場合は、スクロールバーが必要になれば自動的に表示されます。

スクロールバーを表示しない場合

<frameset cols="150,*">
<frame src="menu.html" name="left" scrolling="no">
<frame src="main.html" name="right" scrolling="no">
</frameset>

どちらか一方の指定でもいいです。
スクロールバーを常に表示する場合

<frameset cols="150,*">
<frame src="menu.html" name="left" scrolling="yes">
<frame src="main.html" name="right" scrolling="yes">
</frameset>

▲このページのトップに戻るTop

フレームに対応していないブラウザのために

最近の新しいブラウザではフレームに対応していますが、古いブラウザではフレームを表示できません。
その場合に、このページはフレームを使っていますというメッセージを出すようにしておきましょう。

<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="150,*">
<frame src="menu.html" name="left">
<frame src="main.html" name="right">

<noframes>
<body bgcolor="#FFFFFF">
申し訳ありませんが、あなたのブラウザはフレームに対応していないためご覧になれません。
<a href="index.html">戻る</a>
</body>
</noframes>

</frameset>
</html>

このように書いておくと、フレームに未対応のブラウザでは赤字の部分が表示されるようになります。
▲このページのトップに戻るTop