ez-HTMLレッスン０８：Web上のPC教室

（８）フレームを使ったレイアウト

フレームとは：

ひとつのページをいくつかに分割して、それぞれに別々のＨＴＭＬファイルを表示させる機能です。表示する情報の量が多い場合にひとつのフレームに目次を表示させたり、タイトルやメニューを本文と分離することで、サイト全体の構成を常に明示したり、表示速度を上げたりすることが出来ます。

フレームの使用例：

（１）

タイトルやメニューの固定表示

タイトル

メニュー

１．トップ頁

２．ＹＹＹ

３．ＺＺＺ

１．page_top.html（最初に入っている内容）

本文の内容で：
　　２．page_yyy.html

　　３．page_zzz.html

　　等とメニューのクリックによってこの頁が入れ替わる。　

上のフレーム設計のコードは以下のようになります。

</frameset>

（２）

目次の表示

論文や技術資料などの本文が非常に長い場合、フレームを使った目次を用意しておくと、目次の各章のリンクをクリックすることによって、ずばりその章にジャンプすることが出来る。

（３）

他のサイトのページの組入れ

フレームを利用すれば、他のサイトのページを自サイトのコンテンツの一部のように見せることが出来ます。但し、他のサイトが著作権のある他人のサイトである場合はこの方法は著作権に抵触します。

フレームの仕組み：

フレームは、

Ａ．

ページの分割方法を指定するＨＴＭＬと

Ｂ．

分割された枠内に表示されるＨＴＭＬとで構成されます。

Ａ．はフレーム頁とでも言い、ez-HTMLのメニュー・バーの「スペシャル（ｐ）」→「フレーム・ページ作成」で表示される「フレーム・ページ作成ダイアグラム」を使って、視覚的に希望の枠組みの設計をすることが出来ます。
Ｂ．はコンテンツを含んだ普通のＨＴＭＬで、リンクの設定の際のジャンプ先のページにあたり、そのジャンプ先のターゲットがＡ．の指定された枠に相当します。

フレーム使用上の考慮点：

１．

表示速度に就いて注意する

２．

リンクの指定ミスによる混乱を避ける

３．

サポートしていないブラウザーがある（最近版のＩＥやＮＳならＯＫ）

ez-HTMLによるフレーム頁の作り方：

①

メニューから「ファイル」→「新規」を選択するか、右クリックから「新規」を選択するかして、新規ページを作成する。フレーム頁は大体トップ頁のindex.htmlになることが多いので、忘れないうちに名前を付けて保存して置く。

②

新規に作成したフレーム頁になるべき頁を開いた状態で、メニュー・バーの「スペシャル（ｐ）」→「フレーム・ページ作成」で「フレーム・ページ作成ダイアグラム」を表示する。

③

「フレーム・ページ作成ダイアグラム」で以下のように指定する。

上の設計では、最初に「水平（Ｈ）」２分割した後、「水直（Ｖ）」２分割の指定をする。

④

次に、各フレーム毎のプロパーティーを指定する。

　　＊ページパス「src」は最初にこのフレーム頁に入るべき内容ファイルのアドレスを
　　　　指定する。

　　＊フレーム名「name」はハイパーリンクするときに指定するターゲット名を指定する。

　　＊タイトル「title」はその頁のタイトルを指定する。

　　＊スクロールバー「scrolling」はスクロール・バーを表示するかどうかで、noか yesか
　　　 autoかを指定する。autoは内容物が十分あれば、自動的に表示するような
　　　　指定です。

⑤

プロパティーの指定が終わったら、「フレームページの作成（Ｏ）」ボタンをクリックする。

</frameset>

編集中のページに上のようなコードが生成されるので、予想通り生成されたか確認する。

上の例では：

　　＊　ヘッディング（タイトル）頁の高さ＝１３５ｐｘ
　　＊　ヘッディング（タイトル）頁にはスクロール・バーを表示しない
　　＊　メニュー頁と本文頁はディフォルトのautoが指定された

フレームを使った場合のリンクの作成：

フレーム機能を使う際に気を付けなければならないのは、ページへのリンクの作成です。これまでの単純なリンク作成ではリンク先を指定するだけでしたが、フレームを使用している場合は、表示先のフレームの名前をターゲット欄に指定する必要があります。若し、これを省略してしまうと、リンクを表示してあるページと同じフレーム内にリンク先のページが表示されてしまいます。