＞ 即席ホームページ作成講座
第一回 第二回 第三回 第四回 第五回 第六回 第七回 第八回 第九回 第十回
サポートコーナ 第一回 第二回 第三回 　 　 【ＣＯＭＰＵＴＥＲ　ＴＯＰ】
ネスケ対策
"フレームのの使い方"

もくじ

第一回
ホームページを
作るには準備編
第二回
簡単なＨＴＭＬを
書いてみよう
第三回
色の管理
第四回
画像の使い方
第五回
テーブルタグの
使い方
第六回
フレームの使い方
第七回
リンクの使い方
第八回
ＦＴＰでアップロード
第九回
インタラクティブな
ページを作るには？
第十回
終わりに･･･

サポートコーナー

第一回
ＩＢＭホームページ
ビルダーによる
表の挿入
第二回
マクロメディア
ファイヤーワークス３
によるアニメーション
ＧＩＦの作成
第三回
マクロメディア
ドリームウェーバー３
でＦＴＰアップロード

イヤー、ほんまお久しぶり。
うーん、今回のテーマは…忘れた…それほど更新していなかったんだね…
ま、ここの読者がいるってのがわかったらがんがんアップしていくよ！！
で、今回は、フレームのつかい方。
前回、テーブルをつかって簡単な３ペインのページ作ったよね？
それをフレームという機能をつかって表してみよう。
(注:前回のテーブルをデザインに使うのは、
本来のＨＴＭＬの機能ではないといわれている。
しかし、実際にやってみるとわかるのだが、
本来のＨＴＭＬの書式にのっとって、スタイルシートで、
デザインすると、ＩＥとＮＮで、まったく見え方が変わってきたりする。
テーブルの場合、表示の大きさをきっちりと指定してやると、
ある程度見え方は一緒になる。）
うんじゃ、早速いってみようか。まずは今回目標となるページはここ。　サンプル１
(ファンシーで気持ち悪いって？リクエストがあったもんで…）

そしたらまず､サンプル１のソースを出してみよう。
今回はちょっと違うよ･･･
ＩＥだったら、ブラウザの【表示】から【ソース】を選んでね！！
ネスケだったら【表示】から【ソースの表示】を選んでね！！

フレームって？

ソースを見て、あら、驚き。
なんてシンプルなソースなんでしょ。前回のテーブルのときと全然違うじゃん！！
なーんて思ったあなた正解です。
実は、このファイルには、ブラウザの画面の切り方の情報しかかれていないのです。
つまり、左のメニューを表示せせる場所、上のタイトルを表示させる場所、そして、
メインの情報を載せる場所を、どのように、
一つのブラウザ内に表示するかを指定してやっている。
だからそれぞれの、表示用のＨＴＭＬファイルは別個に用意しなきゃいけないのです。
今回ここでは、サイドのメニューを「sidemenu.html」、
上のタイトルを｢title.html｣そして、メインのトップを「main.html」としてみたいと思う。
(それぞれのファイルを見て、どうなっているか確認してみよう！！）

フレーム内のファイルのソースを確認するには、
ソースをみたいフレームの上で【右クリック】→【ソースの表示】で出るよ！！

実際にフレームをセットしてみよう！！

なんと<BODY>タグがない…
そう、フレームを使うときは、<BODY>タグじゃなくて<FAREMSET>というタグを使う。
いきなり３ペインだとわけがわからなくなるから、まずは２つに分割してみよう。

縦方向の分割・・・<FRAMESET rows="">

まずは縦方向の分割。サンプル２

<FRAMESET rows="XXX,XXX">
　　　ＸＸＸには、ピクセル数、パーセントを入れ分割する大きさを指定。
　　　また、”＊”と指定してやると、残り全部という指定になる。
　　　サンプル２では180、＊となっているから、上から、１８０ピクセルと、
　　　それ以外で分割しろとの指定となる。
　　　（「,」（カンマ）の数だけ,フレームは分割される）

　<FRAME SRC="***">
　　　まず、上のフレームに表示させたいファイルをSRC="***"の中にかく。

　<FRAME SRC="###">
　　　次に、下のフレームに表示させたい、ファイルをSRC="###"の中にかく。

</FRAMESET>
　　　フレームセットはここまでですよとの合図。

横方向の分割・・・<FRAMESET cols="">　

同様に横方向の分割。サンプル３

<FRAMESET cols="XXX,XXX">
　　　ＸＸＸには、ピクセル数、パーセントを入れ分割する大きさを指定。
　　　また、”＊”と指定してやると、残り全部という指定になる。
　　　サンプル２では140、＊となっているから、左から、１４０ピクセルと、
　　　それ以外で分割しろとの指定となる。
　　　（「,」（カンマ）の数だけ,フレームは分割される）

　<FRAME SRC="***">
　　　まず、左のフレームに表示させたいファイルをSRC="***"の中にかく。

　<FRAME SRC="###">
　　　次に、右のフレームに表示させたい、ファイルをSRC="###"の中にかく。

</FRAMESET>
　　　フレームセットはここまでですよとの合図。

３ペインに挑戦

さあ、今度はサンプル１みたいに３ペインに挑戦してみよう。
やり方は２つあって一つのフレームセット（<FRAMESET>〜</FRAMESET>）の中に、
もう一個フレームセットを入れ３分割する方法と、
２分割したフレームセットファイルを２つ使うやり方。

フレームセット１個の場合
サンプル４

<FRAMESET rows="***,***" cols="*">
　　まず、縦方向の分割を指定する。(rows="***,***")で、
　　横方向はそれ以外(cols="*")

　<FRAME SRC="***">
　　一番上のフレームに表示したいファイルを指定。

　<FRAMESET cols"***,***">
　　二番目を、縦方向に分割する指定。(cols="***,***")
　　(通常はここにファイルを指定し２分割)

　　<FRAME SRC="###">
　　２段目の左側に表示したいファイルを指定。

　　<FRAME SRC="%%%">
　　同様に２段目の右側に表示したいファイルを指定。

　</FRAMESET>
　　内側のフレームセットの終了タグ。

</FRAMESET>
　　大本のフレームセットの終了タグ。

フレームセット２個の場合
サンプル５

一つ目のフレームセットファイル。

<FRAMESET rows="***,***">
　横方向の分割を指定。

　<FRAME SRC="###">
　　上に表示したいファイルを指定（"###"）

　<FRAME SRC="%%%">
　　ここで、もう一つのフレームセットを指定（"%%%"）

</FRAMESET>

ファイル「%%%」
サンプル３を使用

<FRAMESET cols="***,***">
　縦方向の分割を指定

　<FREAM SRC="+++">
　　左側に表示したいファイルを指定。（"+++"）

　<FRAME SRC="???">
　　右側に表示指定ファイルを指定。（"???"）

</FRAMESET>

やっていることは２つともいっしょ。ファイルを２つにするか一つにするかの違い。
ただ、次に説明するフレームに名前を付けない場合は、
リンクしたページを目的の場所に表示させるのが、一つのファイルで行うと少し面倒。

フレームに名前を付けよう！！

次の回で説明する予定のリンクをつけるときに、
フレームに名前を付けてないととんでもないことになるんだな…実は。
だから、ここで、それぞれのフレームに名前を付けておこう！！

<FRAME NAME="hogehoge" SRC="***">
hogehogeとなっているところを好きな名前にする。

基本的には、わかりやすく、"TITLE"・"MENU"・"MAIN"・"SIDE"・"TOP"
なんかとしておけばいいと思う。
サンプルではDW３がつけてくれた、
"topFrame"・"leftFrame"・"mainFrame"を使用しています。

ボーダーの指定方法

ボーダーの表示・非表示(色付け)

なんかそれぞれのフレームの間に、へんてこな区切り線があるとかっこ悪い…
(時にはかっこいいんだけどね)
こいつを消す方法。

<FRAMESET rows="*,*" cols="*,*" frameborder="NO">

(*＝任意の指定)
"NO"のところを"YES"にかえるとボーダーが表示される。
ボーダーに色をつけて表示したかったら、”YES"にして、
bordercolor="色指定"というのを付け足してやればいい。

サイズ変更不可

せっかく、かっこいいサイドのメニューを作っても、
ユーザーが邪魔とか言って、フレームの幅をめちゃ細くして見えないように
されるのはかなわない。
そこで、デザインした状態で、ユーザーがフレーム幅を変えられなくする方法。

<FRAME NAME="###" NORESIZE SRC="***">

Noresizeと、指定してやると、フレーム幅が変更できなくなる。

スクロールバーの表示・非表示

ちょっと、画面に入らないだけで、横にスクロールバーが入るのはかなわない！！
そこで、そのスクロールバーを強制的に出なくする方法。

<FRAME NAME="###" SCROLLING="NO" SRC="***">

SCROLLINGを、"NO"と指定してやると、スクロールバーは強制的に表示されなくなる。
でも、指定する場所を間違うと、下のほうが読めなくなるので注意が必要。

フレームとフレームの間の間隔を指定

ボーダーをとっても、デフォルトだと、フレームの間にスペースが入ってしまう。
そこでそのスペースのサイズを変える方法。

<frameset rows="*,*" cols="*,*" framespacing="X">

Xに、"０"を、指定すると、間隔がなくなる。
後は、表示させたい間隔を指定してやるだけ。

フレームの表示されないブラウザへの配慮

いまどきフレームが表示されないようなブラウザを使っている人がいるか
どうか怪しいが、 一応それようの配慮。

<noframes>
<body>
このページはフレームを使用しています。
コメントもしくは、普通のHTMLを書くと、フレーム未対応のブラウザにこちらが表示される。


</body>
</noframes>

ちなみに僕はこれは入れない･･･(面倒だもん･･･)

今回のサンプルの解説。

<html>

<head>

<title>NO.6 SAMPLE</title>

</head>

<frameset rows="80,*" cols="*"
frameborder="YES" bordercolor="#3333FF" border="2" framespacing="0">
　　　　　　　　　　↑上下の設定

　　<frame name="topFrame" scrolling="NO" noresize src="title.html">
　　　↑一番上のファイルの表示

　　<frameset cols="150,*"
　　　　　　　　　 frameborder="NO" border="0" framespacing="0" rows="*">
　　　　　　　　　↑下のフレームの分割

　　　<frame name="leftFrame" noresize scrolling="NO" src="sidemenu.html">←左のファイルの表示

　　　<frame name="mainFrame" src="main.html">←右のファイルの表示

　　</frameset>←内側のフレームセット終了タグ(下段の左右分け)

</frameset>←外側のフレームセット終了タグ(上段と下段の、フレーム分け）

<noframes>←フレーム未対応のブラウザではこれいかが表示される。
　　　　　　　　 サンプルでは何も表示されない。

<body bgcolor="#FFFFFF">

</body>

</noframes>

</html>

第六回はここまで。今回も説明がえらく長くなったけど理解できたかな？
フレームを使う欠点は、ブラウザのアドレスが表示されているところが、常に、
フレームセットのファイルしか表示されないこと。
ユーザーがどこのページを見ているか迷子になる可能性がある。
でも、ちゃんとしたサイドメニューを作れば大丈夫だと思うけどね！！
次回は、WWWの、一番の利点･･･リンクのつけ方をやろうと思うのでお楽しみに！！
それじゃ、またね！！

ご意見・ご感想・質問はこちらまで･･･