GOS Headline
　現在位置 → [ TOP / CGI / 実践編 フレームを極めよう ]


実践編　フレームを極めよう！

  • またまた、お会いしましたね（笑）
    今回は賛否両論なフレームについての使い方とちょっとしたテクニックを・・・（笑）

  • フレームはページを固定したままで別のウィンドウ内を操作できたりと、メニュー項目が多いページなどで良く見れますよね あれはページ内に全部同じメニュー書くと何か変更するたびに全部変更しなくてはならないなどのちょっとめんどくさい点があるので巨大サイトなどでは本当は使いたくないけどしょうがなく使ってたり、デザイン的に使ってたりと様々です。

  • FRAME タグの意味はわかりますよね？ 複数のHTMLを１つのブラウザで縦や横に区切って表示するとでも言いましょうか・・・　別々のファイルを表示させることができるタグです　ようするに区切ったページはそれぞれ独立してるという訳です。　２つにフレームを切ったら 表示させるページは２つ必要ですし　３つなら３つと・・・　区切っただけ表示させるページが必要になります。

  • 下記説明では、フレームを実際に表示させるのもあれなので　説明図にはテーブルタグで書いています。例に書いてあるHTMLソースはそのまま使えますので ファイル名など変更して試してみて下さい

<FRAME>
Page1.htmlPage2.html
←フレームの例
表現が難しいので
テーブルでイメージを＾＾；
<HTML><HEAD>
<TITLE>フレームテスト</TITLE></HEAD>
<FRAMESET cols="160,*" border=0 FRAMEBORDER="no">
<FRAME src="page1.html" name="menu" SCROLLING="auto">
<FRAME src="page2.html" name="main" SCROLLING="auto">
</FRAMESET>
</HTML>
←ＨＴＭＬではこう記述する
フレームを区切るＨＴＭＬには基本的に BODY タグなどは入りません。何故なら区切っているだけなので このファイル事態が表示されるわけではないからです（笑）
上の例は 左右にフレームを区切っています 左側が 160ピクセル 右側は残り全て
っというようになります ではタグの解説を・・・・
<FRAMESET cols="160,*" border=0 FRAMEBORDER="no">
cols= （左右）　rows= （上下） というパラメータになっています
160,* というのは 最初に指定するファイルは横幅160の領域だけで 次のファイルは 残り全部という意味ですね。 では右を160等にする場合はどうすればいいのか？　答えは簡単 逆に書くだけです＾＾；
*,160 とすれば 右が160にする事が出来ます。
border=0というのがありますが　これはフレームを区切った部分の境界線幅です 表示したくない場合は0にします
FRAMEBORDER="no"は 境界線を表示させるかさせないかの指定です
この場合表示させたくないので no です
<FRAME src="page1.html" name="menu" SCROLLING="auto">
このタグで表示させるファイルなどを指定します。
name="***" というのは そのフレームの名称で 例えば上記の例をたどると name=menu になっていますね これは左のページは menu というターゲットになり 右のページはmain というターゲット名になるのです 何故こういう指定をするかというと・・・
リンクタグの <A href=> でリンクを指定するときに通常はそのページ内の内容が変わりますよね。これだとメニューなのに メニューのページが変わっちゃったら困りますよね？ 右側のページが変わってくれないとダメなので リンクタグにちょっとした 指定を付け加えて上げるんです
<A href="page3.html" TARGET="main">PAGE-3</A>
っという指定をする事で main という名前のフレーム内のページを変更しなさいという意味になるわけです。この扱いを覚えていないとフレームを使いこなす事は難しいですが　超簡単な物だからもう覚えたでしょ？（笑）
SCROLLING="auto"っという指定は そのフレームにスクロールバーは表示するかしないかの指定です　通常は auto にしておきましょう
<FRAME src="page2.html" name="main" SCROLLING="auto">
４行目と同じで ２番目のフレームページの指定です
</FRAMESET> これでフレームの指定は終わりです
あとは簡単に page1.html と page2.html というhtmlをご自分でつくって 実際に動かしてみましょう。

めんどくさい人は下をクリック＾＾；

■ フレームテスト

すぐ使えるフレーム例
Page1.html
Page2.html
←フレーム
イメージ
横２分割
<HTML><HEAD>
<TITLE>フレームテスト</TITLE></HEAD>
<FRAMESET rows="60,*" border=0 FRAMEBORDER="no">
<FRAME src="page1.html" name="menu" SCROLLING="auto">
<FRAME src="page2.html" name="main" SCROLLING="auto">
</FRAMESET>
</HTML>
←ＨＴＭＬではこう記述する
Page1.html
Page2.htmlPage3.html
←フレーム
イメージ
縦横３分割
<HTML><HEAD>
<TITLE>フレームテスト</TITLE></HEAD>
<FRAMESET rows="60,*" border=0 FRAMEBORDER="no">
<FRAME src="page1.html" name="up" SCROLLING="auto">
<FRAMESET cols="180,*" border=0 FRAMEBORDER="no">
<FRAME src="page2.html" name="menu" SCROLLING="auto">
<FRAME src="page3.html" name="main" SCROLLING="auto">
</FRAMESET>
</FRAMESET>
</HTML>
←ＨＴＭＬではこう記述する
Page1.html
P
a
g
e
2
.
h
t
m
l		Page3.htmlP
a
g
e
4
.
h
t
m
l
Page5.html
←フレーム
イメージ
縦横５分割
<HTML><HEAD>
<TITLE>フレームテスト</TITLE></HEAD>
<FRAMESET rows="36,*,22" border=0 FRAMEBORDER="no">
<FRAME src="page1.html" name="up" SCROLLING="no" noresize>
<FRAMESET cols="16,*,16" border=0 FRAMEBORDER="no">
<FRAME src="page2.html" name="left" SCROLLING="no" noresize>
<FRAME src="page3.html" name="main">
<FRAME src="page4.html" name="right" SCROLLING="no" noresize>
</FRAMESET>
<FRAME src="page5.html" name="down" SCROLLING="no" noresize>
</FRAMESET>
</HTML>
←ＨＴＭＬではこう記述する
上の例は 当サイトの NORMAL で利用しているソースです 額縁に入っている様に見せかける上下には１行程度のクイックリンクを入れられるサイズです 個人的に気に入ってる形なんです（笑）
赤い部分は注意する所です。フレームタグをネスト（入れ子）にしているため</FRAMESET>が途中で入っているのが分かりますね。