フレーム（２）

☆フレームを作る（２）＜多数分割＞

◎ フレームの複数分割（３つ以上に分割する）ときの注意点
ホームページはフレームを使って分割する際、物理的にはいくらでも出来ます。
但し、あまり多く分割すると非常に見づらくなります。

ホームページを見ている方は大多数は１５インチか１７インチのディスプレイ、また、ノートパソコンなど小さい画面で見ています。
また、表示されているフォントの大きさも大多数の方は「中」だろうと思います。
そんな状況でたくさん分割しても見にくくなることはあっても見やすくはならないのではと考えます。

以上のことから、３分割ないしは４分割が限界だろうと思いますので、複雑なことは省略することにします。

◎ 多数分割の考え方
フレームは基本的には２つに分割するものと仮に思ってください。
２つに分割されたものを更に分割していくと考えてフレームの構成をきめ決めるようにしましょう。
（一度に３分割なんてことも出来ますが、ひとつずつ整理して考えるようにしましょう）→ここでは２分割を基本にして、さらに細かく分割する考え方を推奨してます。

例：大きく左右に「３：７」くらいの割合で分けて、さらに右の広いほうを上下に分ける場合

※ ベースファイルのタグ記入例

意味：
「今から左３０％で右が残りの割合で左右に分割します。境界線は”５”ピクセル値です」
「左のフレームは”frameA”という名前で”file1.html”のファイルを表示させます」
「右のフレームは更に境界線は”５”、上が４０％で上下に分割します」
「上のフレームは”frameB”という名前で”file2.html”のファイルを表示させます」
「下のフレームは”frameC”という名前で”file3.html”のファイルを表示させます」
「右のフレーム内の上下の分割はここで終了します」
「左右の分割は終了します」

◎ 多数分割フレームのサンプル雛形
例：
※ ４分割です。
※ まず左右に[３：７]に分割
※ 左を更に上下に[４：６]に分割
※ 右を更に左右に[５：５]に分割

→ 多数分割フレームのサンプル雛形へ

（１）多数分割フレームのベースファイルのソース

<HTML>
<HEAD>
 <TITLE>フレームサンプル（２）</TITLE>
</HEAD>

<FRAMESET COLS="30%,*" BORDER="5">

 <FRAMESET ROWS="40%,*" BORDER="5">
 <FRAME SRC="framefile1.html" NAME="frameA">
 <FRAME SRC="framefile2.html" NAME="frameB">
 </FRAMESET>

 <FRAMESET COLS="50%,*" BORDER="5">
 <FRAME SRC="framefile3.html" NAME="frameC">
 <FRAME SRC="framefile4.html" NAME="frameD">
 </FRAMESET>

<NOFRAMES>
 このページはフレーム対応のブラウザでご覧ください。
</NOFRAMES>

</FRAMESET>
</HTML>

（２）フレームＡに表示させるファイル１
＜ファイル名＝framefile1.html＞

<HTML>
<HEAD>
<TITLE>フレームＡに表示させるファイル１</TITLE>
</HEAD>

<BODY bgcolor="YELLOWGREEN">

フレームＡに表示させたファイル１

</BODY>
</HTML>

（３）フレームＢに表示させるファイル２
＜ファイル名＝framefile2.html＞

<HTML>
<HEAD>
<TITLE>フレームＢに表示させるファイル２</TITLE>
</HEAD>

<BODY bgcolor="LIGHTBLUE">

フレームＢに表示させたファイル２

</BODY>
</HTML>

（４）フレームＣに表示させるファイル３
＜ファイル名＝framefile1.html＞

<HTML>
<HEAD>
<TITLE>フレームＣに表示させるファイル３</TITLE>
</HEAD>

<BODY bgcolor="SKYBLUE">

フレームＣに表示させたファイル３

</BODY>
</HTML>

（５）フレームＤに表示させるファイル４
＜ファイル名＝framefile2.html＞

<HTML>
<HEAD>
<TITLE>フレームＤに表示させるファイル４</TITLE>
</HEAD>

<BODY bgcolor="SILVER">

フレームＤに表示させたファイル４

</BODY>
</HTML>

◎ 参考フレームのまとめサンプル雛形
→ フレームのサンプル雛形へ

このサンプルは当初、作成していたサンプルです。
まとめられた説明もありますので、そのまま継続して使っています。
ソースはご自身で確認してください。
参考までに見てください。

利用方法の説明ページへ