## 12. フレームを使えば、上級編

サンプルページ

| 1　フレームの仕組み
|  | ◇最初に、例をあげて、フレームの作り方と、仕組みを説明します。 ◇フレームだけのhtmlファイルに、Ａ枠には、「メニュー」を表示 Ｂ枠には、「空の写真」「海の写真」「光の写真」を表示するとします。 ◇前準備として、それぞれ「メニュー」、「空の写真」、「海の写真」、「光の写真」のページを作成します。
例：各ページのファイル名
タイトル | ファイル名
メニュー | menu.htm
空の写真 | sky.htm
海の写真 | sea.htm
光の写真 | light.htm
| 2　最初に決めておくこと
|  | ◇まず、フレームそれぞれに、名前を決めます。（必ず、半角英数字で）
| 例： |  | フレーム名
| Ａ | → | fa
| Ｂ | → | fb
↓ ◇次に、フレームページを表示したとき、一番最初に表示されるページを決めます。 ここでは次のように、表示することにします。
| フレームfa | → | 「メニュー」（menu.htm）
| フレームfb | → | 「空の写真」（sky.htm）
では、この設定で実際にフレームを作ってみましょう。
| フレームへの表示例：
fa→menu.htm |  | fb→sky.htm

| 3　フレームの設定
|  | ◇「新規ファイル」ボタンをクリックして、白紙ページを開きます。 ↓ ◇メニューバーから、「フレーム」→「フレームの分割」を選択して、 「左右方向」または、「上下方向」を選択します。
２分割以上する場合は、「指定して分割」を、クリック ↓ 「フレームの指定分割」のダイアログが開くので、分割数を入れ 「水平分割」または、「垂直分割」ボタンをクリックする。
↓ ◇左右に分割した後、さらに上下に分割するときは、（または、その逆のとき） 分割する画面をクリックして、上の動作を繰り返します。 ↓
|  | ◇「フレームの分割」ダイアログが表示されます。そのまま「OK」を、クリック。 ↓ ◇白紙ページが、フレームに分割されました。

| 4　フレームの属性
|  | フレームfaを右クリックして、「フレームの属性」を選択します。 フレームの「属性」ダイアログを、表示されます。 「フレームの属性」タブが開いているのを、確認します。 ↓ 「ＵＲＬ」ボックスの「参照」をクリックして、フレームfaに開くメニュー（menu.htm）を選択し、「開く」をクリックします。 ↓ 「フレーム名」のボックスに「fa」を入力します。 ↓ 「サイズ設定」が必要なときは、「％値設定」または、「ピクセル値設定」を選択して、右に数値を入力します。 例：ここでは、「150ピクセル」に設定します。 ◇「＊指定」は、一方をピクセル指定した場合、もう一方は、数値を特定できないので、この表示にします。フレームfbは、「＊指定」にしてください。 ◇サイズの設定は、フレームの枠をドラッグして変更することもできます。 ◇「ブラウザでサイズ変更させない」にチェックマークを入れると、ホームページを訪れる人が、勝手に、フレームの幅を変えることが、できなくなります。 これは、レイアウトを変えられたくないときに、チェックしてもいいのですが、小さい画面（800×600）で見てる人には、見るづらくなってしまうことがあります。 ↓ 「余白設定」が必要なときは、「左右（または上下）余白を指定する」をオンにして、右のボックスに、ピクセル単位で余白を指定します。 ↓ 「スクロールバー」スクロール バーの表示について設定します。 これは、「自動」に設定しておくことを、おすすめします。 ↓
| 同様にして、フレームＢで右クリックして、フレームの「属性」ダイアログを、表示します。 「ＵＲＬ」に「空の写真」（sky.htm）を選択します。 「フレーム名」に「fb」を入力します。 「サイズ設定」は、「＊指定」にしてください。 ◇フレームのファイルを保存するには、メニューバーの「ファイル」→「フレームを名前を付けて保存」を選択して、半角英数字で名前を入力して保存してください。 （例：ファイル名「frame1.htm」） ◇上書きの時も、「ファイル」→「フレームを上書き保存」を選択してください。
◆フレーム枠の非表示◆ フレームの枠線を、表示させなくするには、「フレームHTMLソース」を開いて、 フレーム属性のタグに、border="0" frameborder="0" framespacing="0"を、追加します。 （border="0"→ネスケの枠線用、 frameborder="0" framespacing="0"→ＩＥの枠線用） 例：
<FRAMESET cols="170,*">
↓
<FRAMESET cols="170,*" border="0" frameborder="0" framespacing="0">

| 5　リンクの設定の仕方
|  | ◆「フレームＡ」→「フレームＢ」
| ◇フレームfaで、リンク元の文字列または、画像をクリックして、「リンク」ボタンをクリックします。リンクの「属性」ダイアログが開きます。 ↓ ◇「ファイル名」に、「参照」ボタンをクリックして、リンク先のファイルを選択します。 ↓ ◇「ターゲット」のボックスで「▼」ボタンをクリックして、フレームfbのフレーム名を選択します。 ◇フレームファイル上で、編集している場合は、ターゲットボックス右のボックスで、リンク先のフレーム場所をクリックします。　選択されたフレーム部分が、青く表示され、ターゲットボックスに、フレーム名が表示されます。 ↓ ◇「ＯＫ」をクリックします。
| ◆「フレームＢ」→「フレームＢ」
| ◇リンクの「属性」ダイアログの「ターゲット」で、「同一ウィンドウ」を選択します。 ◇上記同様、フレーム名を、入力しても、OKです。
◆「フレーム」→「全画面」
| ◇リンクの「属性」ダイアログの「ターゲット」で、「全画面」を選択します。
◆「全画面」→「フレーム」
| ◇全画面表示（たとえば、トップページ）から、フレームページへのリンクは、 リンクの「属性」ダイアログで「ファイル名」の所に、 フレーム枠だけののhtmlファイルを、指定します。 （例：ファイル名「frame1.htm」）

*プルダウンメニューが使えない方は、申し訳ありませんが、トップより、各ページにジャンプしてください。