☆フレームを作る(2)<多数分割>



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

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

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


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

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

※ ベースファイルのタグ記入例
 
<FRAMESET COLS="30%,*" BORDER="5">

  <FRAME SRC="file1.html" NAME="frameA">

  <FRAMESET ROWS="40%,*" BORDER="5">
      <FRAME SRC="file2.html" NAME="frameB">
      <FRAME SRC="file3.html" NAME="frameC">
  </FRAMESET>

</FRAMESET>

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



◎ 多数分割フレームのサンプル雛形
例:
※ 4分割です。
※ まず左右に[3:7]に分割
※ 左を更に上下に[4:6]に分割
※ 右を更に左右に[5:5]に分割

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

(1)多数分割フレームのベースファイルのソース
 
<HTML>
 <HEAD>
  <TITLE>フレームサンプル(2)</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>

 


(2)フレームAに表示させるファイル1
<ファイル名=framefile1.html>
 
<HTML>
 <HEAD>
  <TITLE>フレームAに表示させるファイル1</TITLE>
 </HEAD>

 <BODY bgcolor="YELLOWGREEN">

<FONT size=4><B>フレームAに表示させたファイル1</B></FONT>

 </BODY>
</HTML>

 


(3)フレームBに表示させるファイル2
<ファイル名=framefile2.html>
 
<HTML>
 <HEAD>
  <TITLE>フレームBに表示させるファイル2</TITLE>
 </HEAD>

 <BODY bgcolor="LIGHTBLUE">

<FONT size=4><B>フレームBに表示させたファイル2</B></FONT>

 </BODY>
</HTML>

 


(4)フレームCに表示させるファイル3
<ファイル名=framefile1.html>
 
<HTML>
 <HEAD>
  <TITLE>フレームCに表示させるファイル3</TITLE>
 </HEAD>

 <BODY bgcolor="SKYBLUE">

<FONT size=4><B>フレームCに表示させたファイル3</B></FONT>

 </BODY>
</HTML>

 


(5)フレームDに表示させるファイル4
<ファイル名=framefile2.html>
 
<HTML>
 <HEAD>
  <TITLE>フレームDに表示させるファイル4</TITLE>
 </HEAD>

 <BODY bgcolor="SILVER">

<FONT size=4><B>フレームDに表示させたファイル4</B></FONT>

 </BODY>
</HTML>

 



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

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



利用方法の説明ページへ