■ フレームの話

フレームについては現時点でもその使用に賛否両論あります。フレームが無くても十分に表現可能ならば使わないほうが良いでしょう。読み込むファイルが少ないのでページがその分軽くなるからです。使ったほうがページが読みやすくなるのならば、これは当然使ってもよいし、積極的に使うべきだと思います。場合によってはフレーム化したほうがレスポンスを向上できることもあります。

要はアクセスする人に提供できる利便性やデザイン面を考慮して、どちらか優れたほうを採用すればよいということですね。なにがなんでもフレームはダメ、と断定するのはもはや現実的ではないと思います。

ただ、いつも感じるのですがフレームの枠は邪魔ですね。どんなページでも、この枠が見えるととたんに可読性が下がります。

■Top
■ 枠のないフレームをつくるには？

枠線のないフレームをつくるには FRAMESET で次のように指定します。

<FRAMESET cols="380,*" framespacing=0 frameborder=0 border=0>

framespacing=0 枠の余白をゼロにする
frameborder=0 枠線の幅をゼロにする＝枠線を表示しない

ｉｅですとこれだけで枠線は消えてくれます。frameborder=no でも同じ動作になります。
しかしネットスケープはさらに

border=0　を入れてください。これがないとフレームの間に空白ができます。

BORDER=0　の指定がないときの
ネットスケープで見たフレーム。
うす緑の部分が枠の消えた跡にできた空白

つまり、framespacing=0 frameborder=0 border=0　をセットで使うことにより両ブラウザで枠線の消えるフレームをつくることができます。

ただしこの指定をすると枠が消えるわけですから、枠の境界をマウスで変更することができなくなります。
したがってそれを考えたページデザインをすることが大切です。


■Top

■ スクロールバーをなくすには？

SCROLLING=yes/no/auto で指定できます。

scrolling=yes　スクロールバーが出ます。
scrolling=no　スクロールバーが出ません。
scrolling=auto　ページスクロールが必要なときだけスクロールバーが出ます。

<FRAME SRC="frame_a.htm" name="top" scrolling="no">



■Top

■ 仕切り変更する・しないの指定方法は？

FRAME　タグに　NORESIZE を入れるとサイズ変を禁止できます。


<FRAME SRC="frame_a.htm" name="top" NORESIZE>

仕切りの位置を変更できるフレームの サンプルです→クリックください

仕切りの位置が変更できないフレームの サンプルです→クリックください

※仕切りを非表示にしてあると NORESIZE を入れなくとも無条件で変更できなくなります。
　(枠のないフレームをつくるには？ を参照)

■Top

■ ヨコ割りフレームの HTML

■フレームのタグの例

横割りの分割比率指定は cols=xxxx でおこないます。
xxxx にはピクセル数やパーセント(%)を指定することができます。

FRAMESET cols="380,*"
左のフレームを380ピクセル、右を残り全部

FRAMESET cols="40%,60%"
左のフレームを画面巾の40%に、右を60%に

横は cols 、タテは rows と覚えてください。
このときのフレーム記述は次のようになります

------------- frame.htm ---------------
<HTML>
<HEAD>
<TITLE>フレームのサンプル</TITLE>
</HEAD>
<FRAMESET cols="380,*" framespacing=0 frameborder=0 border=0>
<FRAME src="frame0.htm" name="fr1" scrolling="no" >
<FRAME src="frame2.htm" name="fr2" scrolling="auto" >
<NOFRAMES>
<BODY>
あなたの使用されているブラウザはフレーム処理を行う機能がありません
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
-----------------------------------------

フレームの html ファイルは枠の体裁を決める役割しかしません。その中に内容を出すには、内容を書いた HTML ファイルが要ります。

つまり２分割フレームならフレームの枠を決めるhtmlファイルと、左枠内のページと右枠内のページの内容のファイル計３つが必要になります。


<NOFRAMES>〜</NOFRAMES>　に囲まれた部分は、フレームに未対応のブラウザでアクセスされたときに表示される内容になります。
(この部分のメッセージに何を書くかについてもいろいろ意見があるようではあります)


このフレームのサンプルはこちらです→サンプルを別窓で表示

■Top

■ タテ割りフレームの HTML
タテ割りのフレームも横割りと同様な指定でつくれます。

タテ割りの場合の分割比率指定は rows=xxxx でおこない、横割り同様 xxxx にはピクセル数やパーセント(%)を指定することができます。
例
FRAMESET rows="50%,*"
上のフレームを 50%、下を残り全部(区切りはピリオドではなくカンマです)

FRAMESET rows="120,*"
上のフレームを 120 ピクセル、下を残り全部


書式は横割りの
FRAMESET cols= の部分を
FRAMESET rows= に変えただけです。


------------- frame.htm ---------------
<HTML>
<HEAD>
<TITLE>フレームのサンプル</TITLE>
</HEAD>
<FRAMESET rows="180,*" framespacing=0 frameborder=0 border=0>
<FRAME src="frame1.htm" name="fr1" scrolling="no" >
<FRAME src="frame2.htm" name="fr2" scrolling="auto" >
<NOFRAMES>
<BODY>
あなたの使用されているブラウザはフレーム処理を行う機能がありません
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
-----------------------------------------



このフレームのサンプルはこちらです→サンプルを別窓で表示

■Top
■ タテヨコの組み合わせフレーム


タテ割りとヨコ割りを組み合わせたフレームも簡単な指定でつくれます。

タテ割りの分割指定は rows=xxxx
ヨコ割りの分割指定は cols=xxxx です。
これを組み合わせて次のように指定します。
例

ページを上から下に見ると、まずＡとそれ以外の部分でタテにわけられます。そしてつぎにＢとＣでヨコにわけられます。 ですのでまずはタテの分割、つぎにヨコの分割という順で指定します。

まずタテの分割を決めます
<FRAMESET rows="20%,*">
Ａの部分のフレームサイズをページ全体の 20%に、それ以外を残り全部にします
(rows="30,*" のようにピクセルでも指定できます)

つぎにＡの部分に入るhtmlを指定します

<FRAME SRC="frame_a.htm" name="fr_top">
ここでは最上部のフレームに fr_top という名前をつけています。

次にヨコの分割です
２段目はＢとＣのページに分かれるので、ここでも FRAMESET を使います

<FRAMESET cols="100,*">
横に割るから cols= です。下段左側のフレームＢ の幅を100ピクセル、Ｃを残り全部と指定しました

そしてこのＢとＣのフレームに入る ページ を FRAME SRC で指定します。

<FRAME SRC="frame_b.htm" name="menu">
<FRAME SRC="frame_c.htm" name="main">
それぞれのフレームに menu,main という名前をつけました。

FRAMESET を２度使ったので、フレームを閉じる　</FRAMESET>タグもふたつ必要です
</FRAMESET>
</FRAMESET>

------------- frame sorce ---------------
<HTML>
<HEAD>
<TITLE>フレームのサンプル</TITLE>
</HEAD>
<FRAMESET rows="50,*" framespcing="0" frameborder="0" border="0" >
<FRAME SRC="frame_a.htm" name="top" scrolling="no">
<FRAMESET cols="100,*" framespacing="0" frameborder="0" border="0">
<FRAME src="frame_b.htm" name="menu" scrolling="no" >
<FRAME src="frame_c.htm" name="main" scrolling="auto" >
</FRAMESET>
<NOFRAMES>
<BODY>
あなたの使用されているブラウザはフレーム処理を行う機能がありません
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
-----------------------------------------
[備考]
framespcing="0" frameborder="0" border="0"
は、フレームの枠を出さない指定です
scrolling="no"
は、スクロールバーを出さない指定です

■Top
■ フレームの中から外部サイトにリンクするには？

自分のウェブ以外のサイトにリンクするときは、そのサイトを自分のフレームの中に取り込まないように注意しましょう。これは非常に嫌われる行為です。

リンクのタグに target="_top" をつけるとリンク先を取り込まずにリンクできます。

<a href="http://www.ushikai.com/" target="_top">牛飼いとアイコンの部屋</a>


また、target="_blank" とするとリンク先を別ウィンドウで開くことができます

<a href="http://www.ushikai.com/" target="_blank">牛飼いとアイコンの部屋</a>

ただし "_blank" はデザイン上特別な場合にのみ使うようにしないと、新ウィンドウを開く分余計なリソースを消費します。見る側もウィンドウが多くなってうっとうしいし、800x600 以下で見ている人にとっては見にくいページになってしまいます。
　


■Top
■ フレームの中から別のページにリンクするには？

フレームに表示されているページを入れ替えるのは簡単で、普通にリンクのタグを書けばおしまい。
<A href="page02.htm" >ページ２</A>

あるフレームのリンクをクリックして別のフレームに内容を出すとき…たとえばこのコーナーのように左のフレームのメニューをクリックすると内容のページが変わるような仕組みは次のようにします。

まずフレームを決めるタグの中で、それぞれのフレームに名前をつけます。
名前は name= オプションでつけることができます。

<FRAME src="menu1.htm" name="menu" >←メニューのフレーム名を menu に
<FRAME src="page01.htm" name="main" >←内容のフレーム名を main に

そし menu1.htm のリンクを次のようにします。

<A href="page02.htm" target="main">ページ２</A>

このように、リンク先のページを表示するフレームの名前を target= で指定すればＯＫです。


■Top

■ 複数のフレームの内容を変えるには？

普通のリンクタグではできませんので JavaScript を使います。

サンプルとして menu と main というふたつのフレームの内容を変えることにします。

<FRAME src="menu1.htm" name="menu" >←メニューのフレーム名を menu に
<FRAME src="page01.htm" name="main" >←内容のフレーム名を main に

のように、name= を使って最初にフレームに名前をつけておいてください。

●パターンその１：リンクに直接 JavaScript を書く

<A href="JavaScript:parent.menu.location.href='m_test.htm';JavaScript:parent.main.location.href='p_test.htm';">両方変えます</A>
JavaScript:parent.(フレーム名).location.href='ページ' で、そのフレームの内容が変わります。
二箇所同時に指定するのでスクリプトを ”；”でつないでいます。

クリックしてください←サンプルです



●パターンその２：JavaScript を別に書く

下のスクリプトを、リンクを書くページの html に入れます。
<HEAD> と </HEAD> の間がよいでしょう。
下の太字の menu と main の部分をフレームの名前にしてください。

<SCRIPT Language="JavaScript">
<!--
//
var page1='menu1.htm';
var page2='page01.htm';

function setpage(page1,page2) {
parent.menu.location.href=page1;
parent.main.location.href=page2;
}
//-->
</SCRIPT>

メニューを m_test.htm、内容を p_tese.htm にするにはリンクのタグを次のように書きます

<a href="JavaScript:setpage('m_test.htm','p_test.htm')">test</a>

setpage('メニューのページ','内容のページ')で指定すると、それぞれ変わります。
わかりにくいですが、指定するときにページ同士をカンマ(，)で区切ってください。

クリックしてください←サンプルです

■Top

■ 他所のフレームに取り込まれないための対策

リンクの話の『フレーム内リンク対策 1〜』を参照ください






■Top

copyright(C) 1999 Y.Kishino all rights reserved
Ushikai and Icons Room