■■■フレーム■■■
さて、フレームとは何のことでしょうか??
みなさんは左の画面のタイトルをクリックして
左の画面のみ変わるホームページを見たことがありますか???
例えばこんなホームページ<ココ>をクリック
(別窓が開きます。)
すると、下のような画面が表示されましたよね?
トップ
画像
画像2
画像3
furemu1.htm
|
左側のタイトルを
クリックしてね
×で元に戻ってねfuremu2.htm |
今見た画面は実は3つのページでできています。
■第1ページは、フレームのを表示させるための設定画面(実際には表示されません)
このページはfuin.htmですが、表示させると<ココ>をクリック
トップ
画像
画像2
画像3
furemu1.htm
|
左側のタイトルを
クリックしてね
×で元に戻ってねfuremu2.htm |
と、2つの画面が表示されます。が、
実際はこの設定画面で、下のようなタグで2つの画面をくっつけているのです。
★裏で操作している中身が下のソース。
★fuin.htm の中身。(ソース) |
<HTML>
<HEAD>
<TITLE>フレーム</TITLE>
</HEAD>
<FRAMESET cols="129,*">
<FRAME src="furemu1.htm" name="menu">
<FRAME src="furemu2.htm" name="main">
<NOFRAMES>
<BODY>
<P>このページをご覧いただくにはフレーム対応のブラウザが必要です。</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
|
★左画面(この場合はfuremu1.htm という白い背景のページ)
フレーム名は"menu"
トップ
画像
画像2
画像3
furemu1.htm
|
furemu1.htm の中身。(ソース) |
<HTML>
<HEAD>
<TITLE>メニュー</TITLE>
</HEAD>
<BODY bgcolor="#ffffff">
<A href="furemu2.htm" target="main">トップ</A><BR><BR>
<A href="fugazou.htm" target="main">画像</A><BR><BR>
<A href="fugazou.htm" target="_blank">画像2</A><BR><BR>
<A href="fugazou.htm" target="_top">画像3</A><BR><BR>
furemu1.htm<BR>
</BODY>
</HTML> |
★右画面(この場合はfuremu2.htm という黒い背景のページ)
フレーム名は"main"
左側のタイトルを
クリックしてね
×で元に戻ってねfuremu2.htm |
furemu2.htm の中身。(ソース) |
<HTML>
<HEAD>
<TITLE>メイン</TITLE>
</HEAD>
<BODY bgcolor="#000000">
左側のタイトルを<BR>
をクリックしてね<BR>
×で元に戻ってね<BR>
huremu2.htm
</BODY>
</HTML> |
という、白ページ(furemu1.htm)と黒ページ(furemu2.htm)の2つのページを
裏操作のページ(fuin.htm)で、くっつけています。
★裏操作ページ(fuin.htm)の説明★
★fuin.htm の中身。(ソース) |
<HTML>
<HEAD>
<TITLE>フレーム</TITLE>
</HEAD>
<FRAMESET cols="129,*">
<FRAME src="furemu1.htm" name="menu">
<FRAME src="furemu2.htm" name="main">
<NOFRAMES>
<BODY>
<P>このページをご覧いただくにはフレーム対応のブラウザが必要です。</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
|
1.まずBODYの前に
<FRAMESET COLS(ROWS)="サイズ1数(左(上)),サイズ2数(右(下))">
〜</FRAMESET>
FRAMESETでフレーム分割の方向や数などを設定します。
<詳細>
COLS(ROWS)="***,***"
COLSは縦(左右)に画面を分割したとき、***(左の数),***(左の数)
ROWSは横(上下)に画面を分割したとき、***(上の数),***(下の数)
数字は%かピクセル数で、%の場合は全体で100になるように。
例: <FRAMESET COLS="10%,90%"> とか "<FORMESET ROWS="10%,50%,40%">等
※ちなみに、片方だけの指定だけでいい場合は、残りの数字を*で設定
例: "129,*" など。 |
2.次に
<FRAMESET 〜></FRAMESET>の間に
<FRAME SRC="左(上)フレームに表示されるファイル名",NAME="左(上)フレーム名">
<FRAME SRC="右(下)フレームに表示されるファイル名",NAME="右(下)フレーム名">
を入れます。
3.最後に
<NOFRAMES><BODY>表示されないときのコメント</BODY></NOFRAMES>
はフレーム対応ではなく、画面が表示されないブラウザのために
表示される画面です。非フレーム対応のブラウザのために入れておきましょう
★左場面(白い画面)の説明★
※右の画面(タイトル(目次)があるページ)
このページfuremu1.htmを表示させると<ココ>をクリック
トップ
画像
画像2
画像3
furemu1.htm
|
furemu1.htm の中身。(ソース) |
<HTML>
<HEAD>
<TITLE>メニュー</TITLE>
</HEAD>
<BODY bgcolor="#ffffff">
<A href="furemu2.htm" target="main">トップ</A><BR><BR>
<A href="fugazou.htm" target="main">画像</A><BR><BR>
<A href="fugazou.htm" target="_blank">画像2</A><BR><BR>
<A href="fugazou.htm" target="_top">画像3</A><BR><BR>
furemu1.htm<BR>
</BODY>
</HTML> |
<A HREF="リンク先.htm(html)" TARGET="フレーム名(場合によっては変わる)">
タイトル</A>
リンク先にはタイトルをクリックすることで表示されるリンク先を入れます。
この場合は右の黒い画面(furemu2.htm)
TARGET="フレーム名(場合によって変わる)"とありますが
★A:リンク先のページを右画面に表示させる場合は
(1つめで説明したfuin.htmの中のname="main"の中に表示させる)
TARGET="main"(フレーム名)※裏操作でつけたフレーム名
右に新しいリンク先が表示されます。
表示させると<ココ>をクリック。
画像という文字をクリックしてみましょう
右がこのように変わったのが分かりましたか?
トップ
画像
画像2
画像3
furemu1.htm
|
このような表示
×で元に戻ってね
furemu3.htm
|
★B:リンク先のページを新しい画面で表示させる場合は
TARGET="_blank"
表示させると<ココ>をクリック。
画像2という文字をクリックしてみましょう。
新しい画面で画像が表示されましたね?
このような表示
×で元に戻ってね
furemu3.htm
|
★C:フレームを解除して全画面に表示させる場合は
TARGET="_top"
表示させると<ココ>をクリック。
画像3という文字をクリックしてみましょう。
画面いっぱいに画像が表示されましたね
このような表示
×で元に戻ってね
furemu3.htm
|
★右場面(黒い画面)の説明★
※右の画面(タイトルをクリックすると画面が変わるページ)
このページfuremu2.htmを表示させると<ココ>をクリック
左側のタイトルを
クリックしてね
×で元に戻ってねfuremu2.htm |
furemu2.htm の中身。(ソース) |
<HTML>
<HEAD>
<TITLE>メイン</TITLE>
</HEAD>
<BODY bgcolor="#000000">
左側のタイトルを<BR>
をクリックしてね<BR>
×で元に戻ってね<BR>
huremu2.htm
</BODY>
</HTML> |
この画面は最初に表示されて欲しい画面を第1ページの
fuin.htmで設定します。
<FRAME src="furemu2.htm" name="main">
fumenu2.htmでは特に設定する必要はありません。
■■■その他細かい設定■■■
もっとフレームを分割したい。たとえば<ココ>をクリック
トップ
画像
画像2
画像3
furemu1.htm
|
左側のタイトルを
クリックしてね
×で元に戻ってねhuremu2.htm |
このような表示
huremu3.htm
|
と3画面に分かれてましたね?これは
裏操作ページ(fuin.htm)をちょっと変更させます。
★fuin.htm の中身。(ソース)3画面版 |
<HTML>
<HEAD>
<TITLE></TITLE>
<FRAMESET cols="129,*">
<FRAME src="furemu1.htm" name="menu" scrolling="AUTO">
<FRAMESET rows="40%,60%">
<FRAME src="furemu2.htm" name="main" scrolling="AUTO">
<FRAME src="furemu3.htm" name="main2" scrolling="AUTO">
</FRAMESET>
<NOFRAMES>
<BODY>
<P>このページをご覧いただくにはフレーム対応のブラウザが必要です。</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML> |
(外フレーム設定)
<FRAMESET COLS="サイズ1数(左),*(残り数(右))">
で縦を分割(COLSは縦(左右)に画面を分割、ROWSは横(上下)に画面を分割)
<FRAME SRC="左に表示されるファイル名",NAME="左フレーム名">
(内フレーム設定)
更にその下に横(上下)に画面を分割
<FRAMESET ROWS="サイズ1数(上),サイズ2数(下)">
注意:数字は%かピクセル数で、%の場合は全体で100になるように。
<FRAME SRC="右の上に表示されるファイル名",NAME="右上フレーム名">
<FRAME SRC="右の下に表示されるファイル名",NAME="右下フレーム名">
</FRAMESET>(内フレーム設定終了)
</FRAMESET>(外フレーム設定終了)