ホームページ作成講座 めもタグ

トップページ | ホームページ講座 | HTML | CSS | 素材作成 | リンク

トップページ > 初心者向けホームページ作成講座 > フレームページを作成

フレームページを作成

フレームページ作成方法を説明します。
フレームページは、ブラウザ上に複数のページを 表示させる機能です。

spacer

フレームページを作成する

フレームページを作成するには<FRAMESET>タグと<FRAME> を組み合わせます。
<FRAMESET>〜</FRAMESET>で、フレーム領域を定義します。
フレームページは、フレーム表示用のhtmlと通常のページで 構成されています。

フレーム表示用ページの記述（横に分割）

<HTML>
<HEAD>
<TITLE>フレームページ</TITLE>
</HEAD>

<FRAMESET cols="50%,50%">
<FRAME src="menu.html">
<FRAME src="main.html">
</FRAMESET>

</HTML>
フレーム表示用ページに<BODY>は必要ありません。
<BODY>間に記述すると、正しく表示されません。

<FRAMESET>

<FRAMESET>には、フレームの大きさ等を指定する
colsとrowsを記述します。

ページを縦に分割する：cols="左フレームの大きさ,右フレームの大きさ"
ページを横に分割する：rows="上フレームの大きさ,下フレームの大きさ"

横に分割(rows)縦に分割(cols)
単位は%とピクセル、%はブラウザの表示領域の比率です。
指定単位を,で区切って記述します。

■例
縦２分割：<FRAMESET cols="50%,50%">
縦３分割：<FRAMESET cols="10%,80%,*">
縦３分割（ピクセル）：<FRAMESET cols="200,600,*">
横２分割：<FRAMESET rows="30%,70%">
横３分割：<FRAMESET rows="10%,80%,*">

*は、残りの大きさを自動的に設定します。
縦３分割<FRAMESET cols="10%,80%,*">の場合
残りは10%となります。

<FRAME>

表示するページを指定するには<FRAME>に
src="表示するページ"を記述します。

<FRAMESET cols="50%,50%">
<FRAME src="menu.html">
<FRAME src="main.html">
</FRAMESET>
上記の例の場合、menu.html main.htmlの順番で
左から表示され、rowsで横に分割した場合は
上から表示されます。

横に分割(rows)縦に分割(cols)
なお、フレームに各ページを表示させるだけなら特別な
指定は必要ありませんが、リンクで特定のフレームの
ページを切り替える場合、target指定が必要となります。

サンプルページ（縦に分割）
サンプルページ（横に分割）

spacer

フレームの境界線を表示・非表示にする

書式
<FRAMESET cols="20%,80%" frameborder="on(境界線表示)またはoff(境界線非表示)">

フレームの境界線を非表示にするには<FRAMESET>に frameborderを記述します。
表示させる場合：frameborder="on" または frameborder="1"
表示させない場合：frameborder="off" または frameborder="0"

記述例

<HTML>
<HEAD>
<TITLE>タイトルを入れてください</TITLE>
</HEAD>
<FRAMESET cols="20%,80%" frameborder="off">
<FRAME src="menu.html">
<FRAME src="main.html">
</FRAMESET>

</HTML>

ブラウザでプレビュー


表示

非表示

spacer

境界線の色を変える

書式
<FRAMESET bordercolor="カラーコード">

境界線の色を変えるには<FRAMESET>に
bordercolor=""を記述します。
<frameset>のframeborderが「on」「1」でないと適用されません。

記述例

<HTML>
<HEAD>
<TITLE>境界線の色を変える</TITLE>
</HEAD>
<FRAMESET cols="50%,50%" frameborder="1" bordercolor="#0000ff">
<FRAME src="menu.html">
<FRAME src="main.html">
</FRAMESET>
</HTML>

ブラウザでプレビュー

frameborder=1の場合

spacer

境界線を固定する

書式
<FRAME src="表示するページのパス" noresize>

境界線を固定してサイズを変更させないようにするには
<FRAME>に noresize を記述します。

記述例

<HTML>
<HEAD>
<TITLE>境界線を固定する</TITLE>
</HEAD>

<FRAMESET cols="50%,50%">
<FRAME src="menu.html" noresize>
<FRAME src="main.html" noresize>
</FRAMESET>
</HTML>

ブラウザでプレビュー


固定していない状態


noresize で固定した状態

spacer

指定したフレーム領域にリンク先のページを表示

書式(フレームページ)
<FRAME src="ページのパス" name="参照フレーム名">

書式(リンク)
<A href="ページのパス" target="参照先フレーム名">

リンクをクリックすることで、指定したフレームに
リンク先のページを表示させることができます。

まず、各フレームに名前をつける必要があります。
フレーム用ページの<FRAME>に
nameオプションで名前をつけます。
つけられる名前は半角文字だけです。

フレームページの記述

<HTML>
<HEAD>
<TITLE>フレームページ</TITLE>
</HEAD>

<FRAMESET cols="50%,50%">
<FRAME src="menu.html" name="left">
<FRAME src="main.html" name="right">
</FRAMESET>

</HTML>

その後、メニューページの<A>タグに target オプションを追加します。
targetで指定した名前が、<FRAME>で指定した name と
連動して、ページを切り替えることができます。

メニューページ[menu.html]の記述

<HTML>
<HEAD>
<TITLE>メニュー</TITLE>
</HEAD>
<BODY bgcolor="#66cc99">
<H3>メインコンテンツ</H3>

<A href="zoo.html" target="right">動物園</A>

</BODY>
</HTML>

ブラウザでプレビュー



サンプルページ

spacer

ページ分割を解除してリンク先のページを表示

書式
<A href="ページのパス" target="_top">文字や画像</A>

フレームを解除して、リンク先のページを表示させる
には<A>のtargetオプションで 「_top」 を使用します。

メニューページ menu.html の記述

<HTML>
<HEAD>
<TITLE>メニュー</TITLE>
</HEAD>
<BODY bgcolor="#66cc99">
<H3>メインコンテンツ</H3>

<A href="zoo.html" target="_top">動物園</A><BR><BR>
<A href="main.html" target="_top">戻る</A>
</BODY>
</HTML>

ブラウザでプレビュー




フレームが解除され、リンク先のページが表示されます。
サンプルページ

spacer

ページの中にフレーム領域を作成

書式
<IFRAME src="ページのパス" width="横幅" height="縦幅" name="フレームの参照名">
</IFRAME>

ページの中にフレーム領域を作ることができます。
<FRAMESET>でフレームを作成しなくても、フレームページを作れます。
これはInternet Explorerの機能ですので、一部のブラウザ
では正しく表示されない場合があります。

<BODY>〜</BODY>内に<IFRAME>〜</IFRAME>タグを記述します。

■<IFRAME>のオプション
src=""：表示するページのhtml
width=""：フレームの幅(ピクセル)
height=""：フレームの高さ(ピクセル)
name=""：フレームの参照名

なお、IFRAME内のページ切り替えも
<A>のtargetオプションで可能です。

記述例

<HTML>
<HEAD>
<TITLE>ページ内にフレーム領域を作る</TITLE>
</HEAD>
<BODY bgcolor="#66cc99">
<div align="center">
<IFRAME src="frame_s_right.html" width="400" height="200" name="IFRAME">
</IFRAME><BR><BR>
<A href="frame_r_kaba.html" target="IFRAME">動物園</A><br>
<A href="frame_s_right.html" target="IFRAME">元のページ</A>
</DIV>
</BODY>
</HTML>

ブラウザでプレビュー



動物園 元のページ

spacer

フレーム未対応ブラウザ用のページを作る

古いブラウザでは、フレームページを表示できない場合があります。
フレーム未対応ブラウザ用のページを作成するには
<NOFRAMES>〜</NOFRAMES>を使用します。

記述例(フレーム定義ページに記述)

<HTML>
<HEAD>
<TITLE>フレームページ</TITLE>
</HEAD>

<FRAMESET cols="50%,50%">
<FRAME src="menu.html">
<FRAME src="main.html">
</FRAMESET>

<NOFRAMES>
<BODY>
このページはフレームが使用されています。<BR>
フレームに対応しているブラウザをご使用ください。<BR>
</BODY>
</NOFRAMES>

</HTML>

ブラウザで表示（未対応ブラウザで表示した場合）

このページはフレームが使用されています。
フレームに対応しているブラウザをご使用ください。

前の講座：表を作成する | 次の講座：送信フォームを作成する | トップページ | ページの一番上へ▲