ブラウザのウィンドウをいくつかに分割して、それぞれのウィンドウ上に別々のHTML文書を表示することができる機能をフレームといいます。
フレームを使ったHTML文書を作るには、各フレームに表示するHTML文書と、フレームの設定を記述しているHTML文書の2つが必要です。ここでは、フレームの設定を記述した文書を作ります。
■フレームを作る
■操作
- [ツール-HTML-HTMLフレーム編集]を選択します。
[フレーム編集]ダイアログボックスが表示されます。
- フレーム編集ウィンドウ上で、フレームをクリックして選択します。
- 選択しているフレームを上下に2分割したい場合は[上下に分割]を、左右に2分割したい場合は[左右に分割]をクリックします。
- 詳細を設定したいフレームを選択して、[設定]をクリックします。
[フレームの設定]ダイアログボックスが表示されます。
- [表示するURL]に、フレームに表示する文書のファイル名やURLなどを入力します。
- 必要に応じて、[大きさ]や[境界線]などを設定します。
- [OK]をクリックします。
複数のフレームがある場合は、それぞれのフレームに対して、操作4〜7 を繰り返します。
- [フレーム編集]ダイアログボックスで[OK]をクリックします。
[HTMLフレーム編集ファイルの保存]ダイアログボックスが表示されます。
- ファイルを保存する場所やファイル名を設定して、[OK]をクリックします。
フレームを持ったHTML文書が作られます。
●こんなときは
- 設定したフレームの表示内容や位置などをブラウザ上で確認したい場合は、[フレーム編集]ダイアログボックスで[ブラウザで確認]をクリックします。
■分割したそれぞれのフレームの大きさを指定して作る
■操作
- [ツール-HTML-HTMLフレーム編集]を選択します。
[フレーム編集]ダイアログボックスが表示されます。
- フレーム編集ウィンドウ上で、大きさを変えたいフレ−ムをクリックして選択します。
- [設定]をクリックします。
[フレームの設定]ダイアログボックスが表示されます。
- [大きさ]で、フレームの大きさを設定します。
[大きさ]の右側にある単位切替ボタンをクリックすると、大きさの単位を[%]または[ピクセル]に切り替えることができます。
- [OK]をクリックします。
[フレーム編集]ダイアログボックスに戻ります。
- 複数のフレームがある場合は、操作2〜5 を繰り返して、それぞれのフレームの大きさを設定します。
- [OK]をクリックします。
[HTMLフレーム編集ファイルの保存]ダイアログボックスが表示されます。
- ファイルを保存する場所やファイル名を設定して、[OK]をクリックします。
設定した大きさのフレームを持ったHTML文書が作られます。
※フレ−ムの大きさを%単位で指定する場合は、常に分割される直前のフレ−ムを100%とします。ピクセル単位で設定する場合は、%単位で指定する場合より細かく設定できます。
●こんなときは
- フレ−ムをブラウザ上で表示したとき、フレ−ムのサイズをブラウザのウィンドウ幅に合わせて変えたくない場合は、[フレームの設定]ダイアログボックスの[サイズ変更不可]をクリックして
にします。
■作成済みのフレームの設定を変える
■操作
- [ファイル-開く]を選択します。
[開く]ダイアログボックスが表示されます。
- 変えたいフレームのあるHTML文書を選択して開きます。
HTML文書をテキスト形式で開いたあと、自動的に[フレーム編集]ダイアログボックスが表示されます。
- フレーム編集ウィンドウ上で、設定を変えたいフレームをクリックして選択します。
- [設定]をクリックします。
- 変えたい項目を設定しなおします。
- [OK]をクリックします。
- 複数のフレームがある場合は、それぞれのフレームに対して、操作3〜6 を繰り返します。
- [OK]をクリックします。
[HTMLフレーム編集ファイルの保存]ダイアログボックスが表示されます。
- [ファイル名/URL]に表示されているファイル名を確認し、上書保存する場合は、そのまま[OK]をクリックします。
更新するかしないかを確認するメッセージが表示されます。
- [はい]をクリックします。
HTML文書のフレームの設定が、変えた内容に更新されます。
<コラム>フレーム編集ウィンドウでの操作について
HTML文書にフレームを使う場合は、[ツール-HTML-HTMLフレーム編集]を選択して表示される[フレーム編集]ダイアログボックスのフレーム編集ウィンドウで、フレームの大きさや位置などの設定を行います。
■操作
【フレームの大きさを変える】
- フレームの境界線にポインタを合わせ、ポインタが
または
に変わったらドラッグします。
※大きさを詳しく指定したい場合
【フレームの位置を移動する】
- フレームをドラッグして、移動する位置にドロップします。 →詳しい説明
【フレームを追加する】
- Ctrlキーを押しながら、フレーム間の境界線をドラッグします。
- 分割するフレームをクリックして選択し、[上下に分割]または[左右に分割]をクリックします。
【フレームを削除する】
- 削除するフレームをクリックして選択し、[削除]をクリックします。