簡単なフレームの作り方
まずフレーム分割特有のページの簡単な作り方です。フレームを失敗せずに作るコツを説明していきます
損をしない自動車保険選び損をしないクレジットカード選び銀行の利用・口座維持手数料無料化就職・アルバイト情報
トッブページに戻る       文字のサイズを変更する時は Control キーを押しながらマウスのスクロールホイールを回してください
フレームを作る | フレームを解除する
フレームを使うメリット    ▲    使い勝手が良くなります
このページにはフレームを使っています。フレームで表示されていない時は、上の『フレームを作る』と書かれたリンクをクリックしてください。
画面を2分割していますが、それぞれ独立した画面になっており、右側の画面を 下に送っても、左の画面は動きません。
左のリンクをクリックするとその内容は右側に表示され、目次と本文の関係が使いやすくなっていると思います。

大まかなフレームの作り方    ▲
一番シンプルな基本形をまず作り、それを修正するという形で仕上げていきます。
まず表示させるファイルを用意
各々の画面に表示させるファイルがまず必要です。
既にファイルがあればそれをそのまま使います。
このファイルは、フレームだからといって特別な形式になるわけではなく、普通のファイルです。
フレーム固有のファイルを作る
もう一つがフレーム固有のファイルで「画面をどのように分割するか」を決めるファイルです。
特に難しい所はありません。一番シンプルな形だけ覚えておけば後はその応用です。

      フレーム固有のファイル　分割例-1      
01 02
　 画面を左右に2分割し、左に「01.htm」右に「02.htm」を表示させたいときは次のように書きます。
<FRAMESET cols="20%,80%">
<FRAME src="01.htm">
<FRAME src="02.htm">
</FRAMESET>
画面を左側20%、右側80%の割合で分割し、左側には 01.htm、右側のスペースには 02.htm を表示 させることを意味しています。


      フレーム固有のファイル　分割例-2      
01 02 03
　 画面を左のように左右に3分割させたいときはこのように書きます。
<FRAMESET cols="20%,70%,10%">
<FRAME src="01.htm">
<FRAME src="02.htm">
<FRAME src="03.htm">
</FRAMESET>
画面を左側20%、中央70%、右側10%の割合で分割し、左側には 01.htm、中央のスペースには 02.htm 、 右側のスペースには 03.htmを表示させることを意味しています。


      フレーム固有のファイル　分割例-3      
01
02
 画面を左のように上下に2分割したいときはこのように書きます。
<FRAMESET rows="10%,90%">
<FRAME src="01.htm">
<FRAME src="02.htm">
</FRAMESET>
画面を上側10%、下側90%の割合で分割し、上には 01.htm、下のスペースには 02.htm を表示 させることを意味しています。上下分割は、左右分割の場合の「cols」が「rows」に変わるだけです。


      フレーム固有のファイル　分割例-4      
01
02 03
　 左のような上下・左右複合の場合は、このように書きます。
<FRAMESET rows="10%,90%">
<FRAME src="01.htm">
<FRAMESET cols="20%,80%">
<FRAME src="02.htm">
<FRAME src="03.htm">
</FRAMESET>
</FRAMESET>
画面をまず上下に10%,90%の比率で分け、次に下側を左20%、右80%の割合で分割しています。 上には01.htm、左側には 02.htm、右側のスペースには 03.htm を表示 させています。

フレーム固有ファイル、作り方のコツ
横に分割したい時は　FRAMESET cols　と書き、
縦に分割したい時は　FRAMESET rows　と書きます。
分割したい数だけその下に　<FRAME src="**.htm">　というタグを書いていきます。
ここに書いたファイル名は上から順に、フレームの枠の『上から下に』『左から右へ』入っていきます。
他の分割もこの応用で作っていくことができます。

これで見た目はきちんとしたフレームを使ったページができました。
しかしまだリンクの設定が何もしてありませんので、フレームとしての機能はありません。
次にリンクを設定し、フレームとして機能するようにします。

TOPページに戻る 前に戻る 順番に次を見る