HTML講座・フレームを使う

■□フレームを作成する

フレームとは画面を複数のエリアに分けてその中に複数のページを一度に表示するものです。

これにより、単ページでは出来なかった自由なページレイアウトが可能となります。

フレームを作成するにはまず「<FRAMESET>」タグでフレームエリアの分割を行います。
次に、作成したエリア内に「<FRAME>」タグで読み込むページを設定します。

簡単なフレームページです。

>> フレームページ（サンプル）

* フレーム内で読み込んだページにさらにフレームを設定する、多重フレームも可能です。
多重フレームを作成する場合には、フレームの親子関係（読込元と読込先）をきちんと把握しておきましょう。

フレームの設定

フレームタグの設定方法

<FRAMESET

   cols = "分割する高さ（ピクセル、％）"

   rows = "分割する横幅（ピクセル、％）"
>

   ～

   <FRAME src="読み込むページURL" name="フレーム名">

   ～

</FRAMESET>

[ フレーム分割の種類 ]

・ 横割り

フレームの横割り

フレームを上から２０％、６０％、２０％の割合で分割した例

<FRAME cols="20%, 60%, 20%">
   <FRAME src="フレームA" name="frameA">
   <FRAME src="フレームB" name="frameB">
   <FRAME src="フレームC" name="frameC">
</FRAME>

・ 縦割り

フレームの縦割り

フレームを左から２０％、６０％、２０％の割合で分割した例

<FRAME rows="20%, 60%, 20%">
   <FRAME src="フレームA" name="frameA">
   <FRAME src="フレームB" name="frameB">
   <FRAME src="フレームC" name="frameC">
</FRAME>

・複合

複雑なフレームの割り

フレームを上から２０％、８０％の割合で分割し、
分割した下の８０％を２０％、８０％の割合で縦に分割した例

<FRAME cols="20%, 80%">
   <FRAME src="フレームA" name="frameA">
   <FRAME rows="20%, 80%">
      <FRAME src="フレームB" name="frameB">
      <FRAME src="フレームC" name="frameC">
   </FRAME>
</FRAME>

関連ページ