【フレームタグ】


【フレームとは、こんな感じです】
フレームのサンプルを見る。

まずは、こんな感じを作れるようにタグの説明をします。


【１、フレームのタグの使い方が分からなくても･･･】

まずは、基本骨組みと、リンクタグをざっと目を通してきてください。
（もちろん理解出来てる人は目を通さなくてもいいです。）

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
さてと、いきなりフレームのソースを書いちゃいます。

タグの意味は、ページ下方の基本フレームの説明で行ないますので、
(この時点で理解しようとしなくていいです。)


A.下枠のソースをテキストエディタに書いてファイル名をa.htmlと記入して保存してください。
<HTML> <HEAD> <TITLE>フレーム作成</TITLE> </HEAD> <FRAMESET cols="120,*"> <FRAME src="menu.html" name="left"> <FRAME src="top.html" name="right"> </FRAMESET> </HTML>

まだこの時点でブラウザで確認しても表示できないので、
そのままでどうぞ。




【２、上のサンプルの左ページと右ページを作ります】

ここでは合計４枚のテキストエディタ（メモ帳）を作ります。

下のソースをテキストエディタに書いて下さい。

ここでは、初心者でも分かりやすいように、
ファイル名やリンク内容も指定しちゃいますね。

  1. 右ページトップのサンプル


  2. 右ページ日記のサンプル


  3. 右ページ自己紹介のサンプル


  4. 左ページのメニューのサンプル

A.下枠のソースをテキストエディタに書いてファイル名をtop.htmlと記入して保存してください。
<html> <head> <title>トップ</title> </head> <body bgcolor=wheat> <font size=3> <center>フレームサンプルの<BR> 右ページのTOPです。<BR><BR> <a href=top.html>TOP</a><BR> <a href=diary.html>日記</a><BR> <a href=profile.html>自己紹介</a><BR> </center> </body> </html>

B.下枠のソースをテキストエディタに書いてファイル名をdiary.htmlと記入して保存してください。
<html> <head> <title>右ページの日記</title> </head> <body bgcolor=lightgoldenrodyellow> <font size=3> フレームサンプルの<BR> 右ページの日記です。<BR> <BR>2005/03/18<BR> 今更、言うことも無いけど、<BR> コピー＆ペーストして、手早くやっちゃおう。<BR> と思う人イパーイだろうね。<BR> <BR><BR> <center><a href=top.html>TOPへ</a><BR> 戻る。</center> </body> </html>

C.下枠のソースをテキストエディタに書いてファイル名をprofile.htmlと記入して保存してください。
<html> <head> <title>自己紹介</title> </head> <body bgcolor=mistyrose> <font size=3> フレームサンプルの<BR> 右ページの自己紹介です。<BR> <BR> 私の名前は○○です。<BR> 血液型は△△型です。<BR> <BR> <BR> <center> <a href=top.html>TOPへ</a><BR> 戻る。 </center> </body> </html>

D.下枠のソースをテキストエディタに書いてファイル名をmenu.htmlと記入して保存してください。
<html> <head> <title>左のメニュー</title> </head> <body bgcolor=khaki> <font size=3> メニュー<BR><BR> <a href=top.html target=right>ＴＯＰ</a><BR> <a href=diary.html target=right>日記</a><BR> <a href=profile.html target=right>自己紹介</a><BR> </font> </body> </html>


【３、a.htmlをブラウザで確認する】

ここまでで、全部で５枚のテキストエディタを書いたわけですが、
これで、フレームのページが出来上がりました。
最初に書いたa.htmlをブラウザで確認してください。

a.htmlのサンプルを見る。


と言うわけで、フレームを使用する場合は、
表示させたいテキストエディタ（この場合は、menu.html top.html diary.html profile.html）
の他に、これらをつなげるテキストエディタ（この場合はa.html）が別に必要になるのです。

それと、今回はあえてa.htmlという適当なファイル名にしましたが、
もし、フレームを使ったページをサイトのTOPページにしたい場合は、
index.htmかindex.htmlにしないと、サーバーへのファイル転送が出来ませんので、
注意して下さいね。

ここからフレームタグの説明に入りますが、
せっかく、a.htmlを作成してもらったので、
これを元にした、説明や応用例を書きます。








■フレームタグの説明



【１、左右分割と上下分割】
<FRAMESET cols="120,*"></FRAMESET> … 左右の分割 <FRAMESET rows="120,*"></FRAMESET> …上下の分割 数字は、ピクセル数かパーセント、 または * （残り全て）で行います。

★応用→上下分割をして、上段を150ピクセルにした場合のソースは。
<HTML> <HEAD> <TITLE>フレーム作成</TITLE> </HEAD> <FRAMESET rows="150,*"> <FRAME src="menu.html" name="left"> <FRAME src="top.html" name="right"> </FRAMESET> </HTML>
これをブラウザで確認すると、上下分割になります。

■補足　縦に３分割
「横に３分割で33%と33%と後は残りにしますよ。」
という命令を出すには、 <FRAMESET>の属性を、cols="33%,33%,*" <FRAMESET cols="33%,33%,*"></FRAMESET> にすれば良い。


■注意
後ほど、分割したページに名前をつけるで、
詳しく説明しますが、
感の良い人は、このソース見て予想がつくでしょうけど、
<FRAME src="menu.html" name="left"> <FRAME src="top.html" name="right"> の部分のname="left" name="right"は、
フレームの名前であって、

フレーム左に表示したいからleft、
フレームの右に表示したいからright
にという命令では無いのです。








【２、フレームの境界線について】
<FRAMESET FRAMEBORDER="0">…フレームの境界線を無くす。 <FRAMESET BORDER="">…フレームの境界線を指定する。 <FRAMESET BORDERCOLOR="">･･･フレームの境界線の色の指定。

★応用→フレームの境界線を無くす
<HTML> <HEAD> <TITLE>フレーム作成</TITLE> </HEAD> <FRAMESET cols="120,*" FRAMEBORDER="0"> <FRAME src="menu.html" name="left"> <FRAME src="top.html" name="right"> </FRAMESET> </HTML>
これをブラウザで確認すると、枠線が消えます。



★応用→BORDER="0"でフレームの境界線を無くす
<HTML> <HEAD> <TITLE>フレーム作成</TITLE> </HEAD> <FRAMESET cols="120,*" BORDER="0"> <FRAME src="menu.html" name="left"> <FRAME src="top.html" name="right"> </FRAMESET> </HTML>
これをブラウザで確認すると、境界線が消えます。



★応用→BORDER="10"でフレームの境界線を赤にする。
<HTML> <HEAD> <TITLE>フレーム作成</TITLE> </HEAD> <FRAMESET cols="120,*" BORDER="10" BORDERCOLOR="red"> <FRAME src="menu.html" name="left"> <FRAME src="top.html" name="right"> </FRAMESET> </HTML>
これをブラウザで確認すると、境界線が太く赤くなります。









【３、分割した画面にページを表示するには】
<FRAMESET></FRAMESET> タグの中に、 <FRAME SRC="ファイル名"> を書くと分割した画面にページを表示することになります。

★応用→左右分割に３つに分ける。
<HTML> <HEAD> <TITLE>フレーム作成</TITLE> </HEAD> <FRAMESET cols="33%,33%,*"> <FRAME src="menu.html" name="left"> <FRAME src="top.html" name="right"> <FRAME src="diary.html" > </FRAMESET> </HTML>
これをブラウザで確認すると、左右に３分割

■表示する分割ページの指定
「これらのページで３分割にしますよ。」
って命令を出すには、 <FRAME src="menu.html"> <FRAME src="top.html" > <FRAME src="diary.html">


■分割ページの表示順
<FRAMESET>の属性を、左右の分割でcols="33%,33%,*" にした場合、 <FRAME src="ファイル名"> のタグを書いた順番がブラウザで左から表示されます。


<FRAMESET>の属性を、上下の分割でrows="33%,33%,*" にした場合、 <FRAME src="ファイル名"> のタグを書いた順番がブラウザで上から表示されます。







【４、分割したページに名前をつける】
<FRAMESET></FRAMESET> タグの中に、 <FRAME SRC="ファイル名" NAME="名前は半角英数で"> を書くと分割したにページ名前を付けれます。 このタグは、リンクボタンにTARGET=""を指定する場合や、 FORMの送信でTARGET=""を指定する場合に使用されます。

ちなみに、ここで作ったサンプルは、
分かりやすいように、
フレーム左に表示したいページの名前をleft（左）
フレーム右に表示したいページの名前をright（右）
と名前をつけただけで、
名前はフレームの位置になりませんよ。
自分にとって分かりやすい半角英数の名前で結構です。


参考ページ【リンク先ページの表示ウィンドウを指定する】

★これでは説明不足なので、
分割されたページの名前と、リンクターゲットの重要性を説明するために、
みっともない見本を見せますので、お付き合いを・・・。


みっともない見本１
分割ページに名前をつけなかったために、
リンクターゲットが指定出来なかった。

@a.htmlのソースを、下のように書き直します。 <HTML> <HEAD> <TITLE>フレーム作成</TITLE> </HEAD> <FRAMESET cols="120,*"> <FRAME src="menu.html"> <FRAME src="top.html"> </FRAMESET> </HTML> ポイント→<FRAME src=""name="">のname=""が無い



Amenu.htmlのソースも、下のように書き直します。 <html> <head> <title>左のメニュー</title> </head> <body bgcolor=khaki> <font size=3> メニュー<BR><BR> <a href=top.html>ＴＯＰ</a><BR> <a href=diary.html>日記</a><BR> <a href=profile.html>自己紹介</a><BR> </font> </body> </html> ポイント→<a href="top.html" target="" >ＴＯＰ</a>の リンクターゲットが出来ない。



これをブラウザで確認すると、
みっともない見本１(a.html)

この見本のみっとも無さは、見本のリンクをクリックすると、
良く分かります。

デザインの都合で、わざとやるならいいけど、この場合はイケてませんよね。

分割する画面に名前をつけることの重要性が理解出来たでしょうか？
要するに分割する画面に名前をつけることで、
リンクタグ属性のtarget=""に、表示したいフレームを選ぶことが出来るのです。


みっともない見本２
適性なリンクはどれ？

@link.htmlのファイルを用意します。 <html> <head> <title>リンク見本</title> </head> <body> <a href=a.html TARGET="_blank">新たにブラウザを立ち上げる_blank</a> <BR> <BR> <a href=a.html TARGET="_top">フレームの分割を廃止して画面全体表示_top</a> <BR> <BR> <a href=a.html TARGET="_self">リンク元と同じウィンドウに表示_self</a> <BR> <BR> <a href=a.html TARGET="_parent">親フレームに表示 </a><BR> <BR> <a href=a.html>ターゲットの指定をしない</a><BR><BR> </body> </html> ポイント→<frameset></frameset> が書いてあるファイルにリンクを貼ってみました。いろんなターゲットを指定してます。



Amenu.htmlのソースを、下のように書き直します。 <html> <head> <title>左のメニュー</title> </head> <body bgcolor=khaki> <font size=3> メニュー<BR><BR> <a href=top.html target=right>ＴＯＰ</a><BR> <a href=diary.html target=right>日記</a><BR> <a href=profile.html target=right>自己紹介</a><BR> <a href=profile.html target=right>リンク見本</a><BR> </font> </body> </html> ポイント→<a href=profile.html target=right>リンク見本</a>で リンク見本のリンクを作った。



Ba.htmlのソースを、下のように書き直します。 <HTML> <HEAD> <TITLE>フレーム作成</TITLE> </HEAD> <FRAMESET cols="120,*"> <FRAME src="menu.html" name="left"> <FRAME src="link.html" name="right"> </FRAMESET> </HTML> ポイント→<FRAME src="link.html" name="right">で右側にリンク見本を表示



target="_self"とリンクの指定をしなかった場合の表示は同じになります。

link.htmlを見る。

みっともない見本2(a.html)を見る。

見本ページのリンクをクリックして、実用性を考えて見てください。

実際にフレームを使ってＨＰ作成をするときは、適性と思われるリンクのターゲットを指定してリンクを貼りましょう。



私のお薦めは･･･

他サイト等にリンクを貼るときには、TARGET="_top"か、TARGET="_blank"です。

自分のサイト内でリンクターゲットをするときは、このサイトを例を取ると、左のメニューから右のコンテンツに表示させたい時は、TARGET="右のフレームの 名前"
右フレームから、右フレームにリンクを貼りたい場合は、リンクのターゲットを指定してません。





【5、分割した画面のサイズを変更させない】
FRAMEタグに NORESIZE を追加すると、
フレームのサイズ変更（境界線の移動）を禁止することができます。

<FRAME SRC="ファイル名" NORESIZE> と書くと、 通常は、マウスでドラッグすると境界線を動かすことができますが、 この NORESIZE を指定しておくと、境界線の移動ができなくなります。


その違いを理解して頂く為に、２種類のテキストエディタの作成をしてもらいます。

@a.htmlを下のように書き直します。
<HTML> <HEAD> <TITLE>フレーム作成</TITLE> </HEAD> <FRAMESET cols="120,*"> <FRAME src="menu.html" name="left"> <FRAME src="top.html" name="right"> </FRAMESET> </HTML>


Ab.htmlを下のように新たに作成して下さい。
<HTML> <HEAD> <TITLE>フレーム作成</TITLE> </HEAD> <FRAMESET cols="120,*"> <FRAME src="menu.html" name="left" NORESIZE> <FRAME src="top.html" name="right" NORESIZE> </FRAMESET> </HTML>
ブラウザでの確認

a.htmlとb.htmlをブラウザで確認すると、
下のようになりますが、違いを御自身で実感して頂くには、
フレームの境界線をマウスでドラッグしてみて下さい。

a.htmlはドラッグすると境界線が動くのに対して、
b.htmlは、ドラッグしようとしても、境界線は動きません。

a.htmlのサンプルを見る。
b.htmlのサンプルを見る。







TAGメモ のTOPに戻る


TOP
「みーTaro'sメモ」のトップに戻る