トップページへ戻る / タグ辞典トップに戻る / HP作成講座トップへ戻る
フレームページタグ
▲基本フレームページ作成方法
フレームの考え方を理解するために、簡単なサンプル、
左右にページを分割するだけの例で学習しましょう。
こちらがサンプルページです。初めにご覧下さい。
このような左右に分割されたページを作るには、次の3つのhtmlが必要になります。
- 左右のフレームを定義するメインページ(サンプルでは「frame.html」）
- 左側に表示されるページ(サンプルでは「left.html」)
- 右側に表示されるページ(サンプルでは「right.html」)
frame.htmlについての説明
<HTML>
<HEAD>
<TITLE>Jack Pod〜タグ辞典【ページ分割サンプルページ】〜</TITLE>
</HEAD>
<frameset cols="50% ,50%">
<frame src=left.html>
<frame src=right.html>
</frameset>
</HTML>
- <BODY>〜</BODY>の表記は必要ありません。注意して下さい。
- <frameset cols="フレーム左の大きさ,フレーム右の大きさ">になります。カンマで区切った分だけ、ページを分割できます。cols="200,*"のようにした場合は、フレーム左の大きさが200ピクセルとなり、残りの領域がフレーム右側の大きさになります。
- 縦分割の場合は、colsの代わりにrowsを使うだけです。
- colsやrowsで指定した順に、<frame src=表示したいhtmlファイル>で割り当てていきます。
- このページがフレームページのURLになります。ページ情報やタイトルなどもここが反映されます。
left.htmlについての説明
<HTML>
<HEAD>
<TITLE>フレーム左側</TITLE>
</HEAD>
<BODY BGCOLOR=#000000 text=#c0c0c0>
<br><br><br><div align=center>
<font size=6>left.html</font>
</font></div>
</BODY>
</HTML>
right.htmlについての説明
<HTML>
<HEAD>
<TITLE>フレーム右側</TITLE>
</HEAD>
<BODY BGCOLOR=#000000 text=#c0c0c0>
<br><br><br><div align=center>
<font size=6>right.html</font>
</font></div>
</BODY>
</HTML>
- フレームに表示するページに関しては、普通に作成するだけです。
- フレームページとして表示したときは、タイトルは表示されません。frame.htmlのタイトルが優先されます。
- 原則として、他人のページをリンクする際は、フレーム内に入れないようにしましょう。
|
|
▲縦横ページ分割を組み合わせる
<HTML>
<HEAD>
<TITLE>Jack Pod〜タグ辞典【ページ分割サンプルページ】〜</TITLE>
</HEAD>
<frameset rows="20%,80%">
<frame src=top.html>
<frameset cols="50%,50%">
<frame src=left.html>
<frame src=right.html>
</frameset>
</frameset>
</HTML>
上のサンプルを見る
<HTML>
<HEAD>
<TITLE>Jack Pod〜タグ辞典【ページ分割サンプルページ】〜</TITLE>
</HEAD>
<frameset rows="20%,80%">
<frame src=top.html>
<frameset cols="50%,50%">
<frame src=left.html>
<frameset rows="50%,50%">
<frame src=top_r.html>
<frame src=bottom_r.html>
</frameset>
</frameset>
</frameset>
</HTML>
上のサンプルを見る
- 分割したページを更に分割するというイメージでの指定です。
- 実際、あまり用途はないと思われます(汗)。
|
|
▲スクロールバーの表示、非表示
<HTML>
<HEAD>
<TITLE>Jack Pod〜タグ辞典【ページ分割サンプルページ】〜</TITLE>
</HEAD>
<frameset cols="50%,50%">
<frame src=left.html scrolling=yes>
<frame src=right.html scrolling=no>
</frameset>
</HTML>
上のサンプルページを見る
- scrolling=yesでスクロールバーを表示、noでスクロールバー非表示です。
- 何も指定しないと、ページが表示しきれないときのみ、スクロールバーが表示されます。
- サンプルページでは、フレーム左ページをスクロールバー有り、右を無しの設定です。
|
|
▲フレーム領域内の余白設定
<HTML>
<HEAD>
<TITLE>Jack Pod〜タグ辞典【ページ分割サンプルページ】〜</TITLE>
</HEAD>
<frameset cols="50%,50%">
<frame src=left2.html marginheight=50>
<frame src=right2.html marginwidth=50>
</frameset>
</HTML>
上のサンプルページを見る
- marginheight=ピクセル数で、上下に余白を設定します。
- marginwidth=ピクセル数で、左右に余白を設定します。
- フレームページを見やすくするために、必要なタグです。
|
|
▲フレームページの利用例
<HTML>
<HEAD>
<TITLE>フレームページサンプルページ</TITLE>
</HEAD>
<frameset cols="200,*">
<frame src=menu.html marginwidth=50>
<frame src=main.html name=main>
</frameset>
</HTML>
上のサンプルページを見る
- 左フレームにメニュー、右フレームに内容を表示しているページをよく見かけますよね？それのやり方です。
- name=ラベル名であらかじめ、フレームに名前を付けておき、リンク時に、target指定でそのラベル名を指定します。
|
|
▲インラインフレームの表示
<HTML>
<HEAD>
<TITLE>インラインフレームサンプル</TITLE>
</HEAD>
<BODY BGCOLOR=#000000 text=#c0c0c0 link=#CC8800 alink=#FFFF00 vlink=#AA6600>
<div align=center>
<iframe src=sample1.html name=window width=400 height=200></iframe>
<br>
↑これがインラインフレーム表示です↑<br>
</div>
</BODY>
</HTML>
上のサンプルページを見る
- サンプルページを見てわかるとおり、ページに別ページを埋め込んだような形で表示されます。
- 普通のフレームページタグと違い、BODY内に記述できます。
- 書式は、色のついている部分の通りです。サンプルでは、sample.htmlを表示して、ラベル名をwindow 幅400ピクセル、高さ200ピクセルの指定です。
- このタグはとても便利なので、是非覚えましょう。当サイトでも実際に使用しています。トップページの更新情報はインラインフレームで表示しています。
インラインフレームの使用により、更新作業が楽になります。
|
|
▲インラインフレームの利用例
<HTML>
<HEAD>
<TITLE>インラインフレームサンプル</TITLE>
</HEAD>
<BODY BGCOLOR=#000000 text=#c0c0c0 link=#CC8800 alink=#FFFF00 vlink=#AA6600>
<div align=center>
<iframe src=sample1.html name=window width=400 height=200></iframe>
<br>
<a href=sample1.html target=window>sample1.html</a><br>
<a href=sample2.html target=window>sample2.html
</a><br>
</div>
</BODY>
</HTML>
上のサンプルページを見る
- サンプルは、インラインフレーム内にリンク先を表示しています。
- インラインフレームに付けたラベル名をリンクのtargetで指定します。サンプルでは、name=windowでラベル名、target=windowで指定しています。
- 当サイトの、MIDI素材やWAVE素材のダウンロードページで実際に使用している形です。
|
|
▲フレーム未対応ブラウザ用
<HTML>
<HEAD>
<TITLE>Jack Pod〜タグ辞典【フレーム未対応用】〜</TITLE>
</HEAD>
<frameset cols="50%,50%">
<frame src=left.html>
<frame src=right.html>
</frameset>
<noframes>
<BODY>
このページにはフレームが使われています。<br>
フレーム未対応のブラウザではご覧になれません<br>
< |
|