フレームを作りたい！
フレームのしくみについて
まず、フレームの概要についてご説明させていただきます。
フレームは、このサイトのように、ブラウザの中に複数のフレームでできているものです。
メニューフレームとメインフレームに分けられていて、メニューフレームのリンク先をクリックすると、メインフレームにそのサイトを表示させる・・・といった仕組みとなっていますね。
メニューフレームとメインフレームはそれぞれ別のHTMLファイルでできています。
そして、それぞれのフレームを構成するためのフレームセット専用のHTMLファイルも必要です。
ですから、フレームページを作るには、最低3つのHTMLファイルが必要となってきます。
即ち、フレームの数だけのHTMLファイル＋フレームセット専用のHTMLファイル１つ が必要です。
ちなみに、「Wordでホームページを作成するための秘訣」のサイトでは、
- フレームセットするためのHTMLファイル・・・・index.html
- メニューフレーム専用のHTMLファイル・・・・menu.htm
- 最初にメインフレームに表示させるもくじのHTMLファイル・・・main.htm
となります。
もう一つ重要なことは、それぞれのフレームに名前をつけなければいけないということです。
「どこに表示させるの？」その「どこ」の部分がフレームの名前になっています。
区別をつけるために、名前って必要ですよね？ その名前が必要なのです。
当サイトでは、メインフレームの名前は「ue」、メニューフレームは「sita」としています。
つまり・・・
index.htmというインデックスファイルはフレームセット用のHTMLファイルとなり、
それぞれのフレームに表示するファイルはフレームセット用のHTMLファイルとは別になります。
ご理解いただけましたか？
まず、フレームの土台を作りましょう。
★フレームを作る前に…★
まず、メインとなるHTMLファイルをすべて完成させておいてください。なお、メインとなるそれぞれのファイル名は、今後フレームの土台となるフレームセット専用のHTMLファイル名以外で保存しておいて下さいね。
例えばトップページURLをフレーム表示したい場合、index.htm（またはindex.html）というファイル名はフレームセット専用の記述を保存するためのキープ分となりますので、それぞれのフレームに表示させたいファイル名として絶対に、index.htm(またはindex.html)を使わないでください。さもないと、鏡で映し出された自分自身がさらにまた別の鏡に映ってしまう状態、『鏡張りの迷宮入り』になります(+_+) 気をつけてください。
フレームの定義をするだけのファイルを作ります。
そして、それぞれのフレームに名前を付けておきます。→NAME="menu"、NAME="main"などわかりやすく
いずれかお好きなフレーム定義の記述をコピーして、メモ帳で開いて貼り付けてください。
その後、タイトルバーに表示する文字列、それぞれのフレームに表示させたいhtmlファイルを記述し、
拡張子はhtml（htm）で名前を付けて保存してくださいね。フレーム定義ファイルも立派なHTMLファイルなのですから。
フレーム表示をさせるためには、フレーム定義するだけのファイルとフレームごとのファイルが必要となっていますので、少なくとも、表示するためには３つのファイルが必要になってきます。
左右に分割したフレームを作りたい！
左右に分割する方法…左３０％、右７０％ <FRAMESET COLS="30%,70%"> </FRAMESET>
← 30％ → フレームの | ← 70％ → フレームの名前：main |
左に30％、右に70％のフレームを作る場合
このようになります。
30％のフレームには、メニュー（目次）用として、
70％のフレームはメインフレームとして設定します。
上下に分割したフレームを作りたい！
上下に分割する方法…上30％、下70％ <FRAMESET ROWS="30%,70%"> </FRAMESET>
３０％ |
７０％ フレームの名前：main |
上に30％、下に70％のフレームを作る場合
このようになります。
30％のフレームには、メニュー（目次）用として、
70％のフレームはメインフレームとして設定します。
<HTML><HEAD><TITLE>タイトルバーに表示させる文字列</TITLE>
</HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="上のフレームに表示させたいhtmlファイル" NAME="menu">
<FRAME SRC="下のフレームに表示させたいhtmlファイル" NAME="main">
</FRAMESET></HTML>
フレームの定義について
ちなみに、私が使用していたフレームの定義は基本的に以下のようになっています。
ファイル名は"index.html"となっています。
ブラウザのメニューバーからソース表示した場合はフレーム定義されているファイルのソースが表示されます。
★上下に分割されて、分割方法は上のフレームを80ピクセル、下のフレームはその残りのすべての範囲を指定しています。
<HTML>
<HEAD>
<TITLE>Wordでホームページを作成するための秘訣</TITLE>
<META NAME="keywords" CONTENT="Word,BBS,ワニchan,ホームページ作成">
<META NAME="robots" CONTENT="index,follow">
<META NAME="description" CONTENT="Wordでホームページを作っている方、または作ってみたい方のためのページです。画像の貼り付け方、ハイパーリンクの設定方法、フォーム関連などなど、いろいろ紹介しています。困ったときでも安心の「ワニchanのforum」もあります！ ">
</HEAD>
<FRAMESET FRAMESPACING=0 FRAMEBORDER=0 rows="80,*">
<FRAME SRC="menu.htm" name="ue" target="sita">
<FRAME SRC="main.htm" name="sita">
</FRAMESET>
</HTML>
- 上記の定義内容をわかりやすく説明すると…
- 上下に分割され、上のフレームが80ピクセル、下のフレームはその残りのすべての範囲を設定し。
枠線(frameborder)とフレームの余白(framespacing)は0ピクセル
上のフレームに表示されるファイルが、"menu.htm"で、上のフレームには"ue"という名前を設定
下のフレームに表示されるファイルが、"main.html"で、下のフレームには"sita"という名前を設定
スクロールバーを表示させたくないんだけど
スクロールバーを表示させたくないフレーム（もくじのフレームなど）にSCROLLING=NOを記述してください。
たとえば…
<FRAME SRC="menu.html" NAME="menu" SCROLLING=NO>
ただし、解像度が小さい場合ははみ出した部分は隠れて見えない場合がありますので、
800×600ピクセルの環境で最適化するようにバランスを考慮して下さい。
もくじのフレームファイル（小さいほうのフレーム）を作りましょう。
ハイパーリンクを設定する場合に、TARGET属性を使います。
それぞれ、リンク先のフレームの名前を指定してください。
<A HREF="リンク先のファイル" target="main">リンク先のファイル</A>
なお、基本的にハイパーリンク先をメインフレームを表示させくない時は、base target属性を使うと良いでしょう。
<head>と</head>タグ内に
<base target="メインフレームの名前">
という具合に記述すると、あえて指定しない限りベースとなるメインフレーム内にリンク先のページが表示されます。
たとえば、<base target="main">と指定すると、最初にそのメニューフレームに表示させるページのリンク先に
「このページのリンク先は基本的には「main」と名前が付いているフレームに表示させてね」という宣言をしている、という意味になります。
この宣言をしておくと、ハイパーリンクでのtarget属性を省略しても、メインフレームに表示してくれます。
ただし、フレーム解除して全体を表示させたいリンク先（HOMEに戻るリンクなど）は、target="_top" と指定しなければいけないので、注意してくださいね。
サンプルは次のとおりです。→HTMLファイルとして保存してくださいね。（"menu.html"など）
<HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<TITLE>menu</TITLE>
<base target="main"></HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#008000" VLINK="#00ff00">
<A HREF="update.html">更新情報</A><BR>
<A HREF="diary.html">日記のページ</A><BR>
…以下省略…
</BODY></HTML>
フレーム解除したい場合は？
フレーム表示されている場合、リンク先のページをフレーム解除させてブラウザで表示させたい場合は
TARGET属性でTARGET="_top"と記述してください。
特に、リンク集のページへは必ずフレーム解除の記述を忘れずに！
例：<A href="./" TARGET="_top">ホームに戻る</A>
リンク先のページを新しいウィンドウで表示させる場合は、TARGET="_blank"を使います。
<A HREF="http://village.infoweb.ne.jp/msh/chie/" TARGET="_blank">ホームページ作成の知恵袋へ</A>
また、前の状態のフレームに戻す場合（リンク先のファイルがフレーム表示であった場合、元の親フレームに戻したい場合）
TARGET="_parent"を使います。
<A HERF="../main.html" target=_parent>HOME</A>
最終チェックを忘れずに！
フレーム表示がうまくできて、メニューフレームのリンク設定がうまくメインフレームに表示されたとしても、安心しないでください。見落としがないか、最終確認を忘れないようにしてください。
リンク先のページがフレームセット専用のファイルにしていませんか？
TARGET属性で、ちゃんとTAGET=_topと記述されている場合は問題ありません。
特に、ホームに戻るリンク先をindex.htm（index.html）などにしていないかどうかチェックしてくださいね。はじめにメインフレームに表示するファイルを「main.html」にした場合は、ホームに戻るリンク先を「main.html」にすれば大丈夫です(^.^)メニューフレームファイルの作り方のポイント
ソース編集にて、<BODY>タグの次の行に<BASE TARGET=main>と記述しておいてください。
すると、ハイパーリンク先のTARGET属性の記述をする必要がなくなります。
コメント
このページに関する技術的なご質問には一切お答え致しません。フリーソフトになったExpression Web 4に移行してください！