Chapter3：フレーム制御の概要
■フレームってなに？
ホームページを自分で作る前にみなさんはきっといろいろな所を見て回っている事と思います。 その時にきっと下のような感じの所を見かけた事があると思います。 現在ご覧になっているこのサイトも2分割です。 メニューのリンクをクリックすると「クリックした所はそのままで違う場所の内容が変わる」とゆうような感じです。言葉で表し辛いですね。むー。
1)最初の画面
| => | 2)メニューのリンクを押した後
|
|---|
上の図で例えれば右にある縦長いレンガ色のメニューの中のリンクを押すと左の絵や文字が表示されている白い部分の内容だけが変わるような感じですね。 実際は左右・上下・2分割・3分割などいろいろな構造があります。 図を含めてこれらは一般的に「フレーム」と言われています。 今回はこれらの基本について簡単に学んでみましょう。
■フレーム画面の構成を理解しましょう
先程の図またはこちらのサイトのように画面を二分割する場合はファイルが3つ必要になります。これはそれぞれの場所に表示するファイルに加えて表示するファイルを入れておく為のファイルが必要になるからです。
簡単な例えとしてお弁当を考えてみてください。 おかずとご飯は普通それぞれ別々に分けて作りますよね。 でもそれら二つを同時に公園に持って行ったりお店に並べるには「区切られた入れ物」が必要になりますよね。
htmlの場合も似たような感じです。例えば案内ファイルと内容ファイルは別々に作りますが両方を一画面で同時に表示したい場合は入れ物用ファイルが必要になるという事です。
(1) 入れ物：frame.html
| ||||||
(2) 案内：menu.html
|
(3) 内容：field.html
| |||||
何となく解りましたか？
上のイメージでは入れ物（frame.html）で作った仕切り枠の中に案内（menu.html）と内容（field.html）がそれぞれ入って一つの画面のようになります。
このあたりの事は使っていくうちに自然に解ってくると思いますので最初はなんとなくでもイメージ出来ればよいのではと思います。
■試しに作ってみましょう
では実際に必要なファイルを製作して表示してみましょう。 ファイルの作り方はどのような方法でもかまいません。後で「どうなってんのかしら？」と首を傾げないでよいように順番に進んでいきましょう。
■1.まずはメニューを作ります
では以下の内容の"menu.html"を作り保存してください。
|
出来上がったらきちんと表示されるかお使いのブラウザで確認してくださいね。 今回は「メニューです。」と表示されたら成功です。 きちんと表示されている事が確認できたら次に進みましょう。
■2.次にメインになる画面を作ります
次は"field.html"を以下の内容で作ります。 簡単な内容ですから慌てて間違わない限り大丈夫だとは思います。
|
出来上がったら同じようにきちんと表示されるか確認してください。 文字がきちんと表示されたら成功です。 これができたら次はいよいよフレーム枠の製作に進みますね。
■3.いよいよフレーム（入れ物）を作成します
次は"frame.html"を作ります。 今までと比べて内容が少し複雑なので間違わないように気をつけて作ってくださいね。
|
きちんとできたでしょうか？
出来上がったら保存して表示してみましょう。
左右に分割された形でひとつの画面に表示されていれば大成功です。
|
もしきちんと表示されない場合はよく確認して間違っている所を確認してください。
ただ今回のようにフレーム画面を使った場合はファイル自体が「単なる枠」になっているので"frame.html"はどこにも見えていないですね。
この場合は過去に覚えた編集方法では訂正できないと思います。
すでに編集方法をご存知の方はその方法で編集してください。どうしていいかわからない人は以下の方法で修正してみてください。
■フレームファイルの編集方法の一例
１）テキストエディタを起動します。
２）frame.htmlをテキストエディタの中にドラッグ&ドロップします。
単にこれだけなのですけどね。
これでソースが表示されますのできちんと編集できると思います。
もちろん他のhtmlでも同じようにすれば編集することができます。
この場合のドラッグ&ドロップとは「ファイルをマウスのボタンでクリックしたままテキストエディタの中に移動させてボタンから手を放す」とゆうことです。
うまくいかなくても慌てる必要は無いので修正がきちんとできるまで落ち着いて作業してくださいね。
メモ：frame画面におけるFC2WEB独自の仕様
FC2WEBでは基本的に全てのファイルに広告が自動導入されます。
しかしご好意でフレーム構造をもつ場合一部のファイルのみ特別に広告を非表示にして下さっています。
◆2分割フレームの場合はメニュー（ガイダンス）用ファイルに限り名前を「menu.html」とする事により広告が導入されなくなります。
◆3分割の場合はメニュー（ガイダンス）用ファイル（menu.html）に加えレイアウト画面用に「menu2.html」と名前を付ければこちらにも広告が導入されなくなります。
◆注意：4分割以上になった場合でも広告表示の免除があるのはmenu.htmlとmenu2.htmlの2つのみです。これ以上は非表示にはできません（menu3.htmlなどとしても広告は非表示には出来ませんししてはいけません）。また2分割のフレームでmenu.htmlとmenu2.htmlを使うのも原則として規約違反となります。
ただしこれらはあくまで好意として受け止めるべきものでありこれらのファイルに広告が入ったからといって「困る」とか「迷惑」とか考えたり書いたりするのはお門違いです。なぜなら無料である以上は本来すべてのファイルに広告が入って当然なのですから。
またこれは通常のフレーム構造におけるメニューやレイアウト用に限った用途でのみ許可されている特別なファイル名になっています。フレームを使っていないページやインラインフレームのページでの使用の許可は明記されていませんので間違えて使用しないように気をつけられてくださいね（規約違反で削除される恐れがあります）。
■書き方を理解しましょう
ではいつものように書き方を見ていきます。 ただしタグの基本構造等はHTML基礎編で既に軽く触れてありますので最低限の事は理解しているものとしてお話を進めます。もし解らないようであればHTML基礎編に一度目を通してくださいね。
■frame.html：左右分割の例
<html>
<head>
<title>St.hx westwing - mainframe</title>
</head>
<frameset cols="左の大きさ,右の大きさ">
<frame name="左の名前" src="表示ファイル"></frame>
<frame name="右の名前" src="表示ファイル"></frame>
<noframes>
<body>
<p>こちらはフレーム表示ができるブラウザでご覧下さい</p>
</body>
</noframes>
</frameset>
</html>
上を見て頂ければ説明しなくてもだいたいわかると思います。
まず<frameset>から見ていきましょう。
この<frameset>の中にある「cols」は「左右に分割しますよ」という意味で「左の大きさ,右の大きさ」はそれぞれの画面の広さを「数値,数値」で指定します。
また左右ではなく上下に分割する場合は「cols」の部分を「rows」に変えます。
そうすると数値を指定する「左の大きさ,右の大きさ」の部分は自動的に「上の大きさ,下の大きさ」とゆうふうに変わります。
次に出てくる<frame>ではそれぞれの表示部分の指定を行います。「name」では該当する表示部分に名前をつけてあげます。そして「src」で該当する表示部分に最初に表示するファイルを指定します。これらの指定（定義）をフレームで分割された数だけ書いてゆきます。
また既にお気付きかもしれませんがこれらのフレームやフレームの大きさを等を指定する順番は原則として「左上から右下へ」となります。フレームの内容が複雑に組み合わされた場合でもこの順番は変わりませんので余裕があったら覚えておきましょうね。
次に<noframes>とゆう部分が出てきますね（グレーの部分）。 これは本来フレーム表示に対応していないブラウザ用に使いる補助的なものです。表示したいコメント自体は<body>から</body>で囲まれた中に書きます。こちらは普通のHTMLドキュメントと同じように画像の指定やリンクを書いておく事が出来ます。
なおFC2系列では広告のタグが自動的にインサートされる関係でこの補足部分（上のフレームタグの例では<noframes>からのグレーの文字部分）をきちんと書いておかないとサーバ上で表示する際に不具合が出る確立が非常に高くなります。フレームページがローカルではきちんと表示されるのにサーバ上ではうまく表示できない場合はこの部分も一度見直してみましょう。
■frame.html：上下分割の実例
<html>
<head>
<title>St.hx westwing - mainframe</title>
</head>
<frameset rows="30%,70%">
<frame name="menu" src="menu.html"></frame>
<frame name="main" src="main.html"></frame>
<noframes>
<body>
<p>こちらはフレーム表示ができるブラウザでご覧下さい</p>
</body>
</noframes>
</frameset>
</html>
構成は左右分割も上下割も同じですので先に書きました左右分割の説明を参照してください。違いは「frameset」の中にある要素「cols」が「rows」に置き換わっているだけです。
■フレームでの表示先の指定方法
フレームの構造が理解できたでしょうか。大丈夫そうなら次は実際にフレーム内でファイルをリンクさせて表示させてみましょう。
■フレーム内リンク指定の実例
それでは早速表示する為のファイルを新しく作ります。 別にどんな内容でもかまいませんがわかりやすく進めたい人は下記に示すファイルを製作し"profile.html"として"frame.html"と同じ場所に保存してください。
|
うまく出来たら今度は"menu.html"を編集します。 赤い文字になっている部分を加筆して保存してください。
|
普通のリンクの書き方は以前紹介しましたね。でも今回は中に新しい部分が増えています。増えたのは「target="field"」の部分で簡単に言えば「ファイルの表示先」を指定しています。
フレームを定義するファイルの内容（今回は「frame.html」ですね）を思い出してみてください。<frame>の中で「name="名前"」といった書き方を使いそれぞれの表示場所に「menu」という名前と「field」という名前を付けましたよね。この名前を使って「表示させたい位置にある枠の名前をリンクの際に"target="で指定する」とゆう訳です。
■ターゲット（表示場所）を指定する際のリンクの書き方
<a href="ファイル" target="表示枠名">文字・画像</a>
ターゲットの指定を間違うと思った所と違う部分にファイルが表示されたりします。 もし思い通りにならない時はフレームの構成と名前をよく確認しながら作業されると良いでしょう。
■フレームとターゲットの説明に関する補足
ここからは「今までの説明ではフレームとターゲット指定の関係が未だいまいちわかんなよう」って人向けです。 もお十分って思われた方は特に見て頂かなくても結構です。
(1) 入れ物：frame.html
| ||||||
|
(枠-A) 案内：menu.html （表示場所の名前：menu）
|
(枠-B) 内容：field.html （表示場所の名前：field）
| |||||
解り辛い人は上の図で考えてみましょう。まず一番上にあるframe.htmlは入れ物になっていてその中に「枠-A」と「枠-B」とゆう小窓（表示枠）があります。その下に並んでいる二つのファイルはそれぞれの枠の中に表示されるファイルになります。ここまでいいですか？
この「枠-A」に表示されるファイル内からリンクしたファイルを「枠-B」に表示したい場合は「target=枠-B」となります。
もちろんこの表示場所の指定は逆も可能です。
たとえば「枠-B」のリンクをクリックして「枠-A」の部分に表示させたい場合は「target=枠-A」となります。
それでは「枠-B」をクリックした時に同じく「枠-B」の中に表示したい場合はどうでしょう？ この場合は過去学んだリンクの書き方と同じで「target」指定は必要ありません。 もちろんターゲット指定を行っても大丈夫です。
簡単に言えば「name="名前"」で指定したそれぞれの表示場所の名前をリンクの中で「target="nameで付けた名前"」として指定すれば該当する名前がついている場所にリンクで指定したファイルが表示される訳です。
■お疲れ様でした
今回はフレームの基礎について書いてみましたがいかがでしたでしょうか？ 書き方がうまくいかず少し解り辛い内容になっているかもしれません。 最初はフレームの説明だけで5ページ位になってしまっていたのですがそれでは読まれる方も大変ですものね。 一生懸命に簡略化して詰め込んでを繰り返してなんとか1ページにまとめました。 ただ短くしようとしすぎて最後のほうは書いている本人も混乱ぎみでした。 一段落したら折をみて修正したいと思います。とほほん。
例に漏れずこちらで紹介したのは構造と考え方・使い方を理解するための基本的な内容です。 もっと複雑な使い方もありますけれどそういった部分はとりあえず既存の専門サイトさんにお譲りしたいと思います。 興味を持たれた方はそういった専門サイトさんに行ってご覧になってくださいね。
