ケム   HTMLの解説
 難解らしいフレームを優しく解説してるつもり

HOME

  雑記  
  メモ  
  掲示板  
  SCRIPT  
  HTML  
  ├ 基本  
  ├ 前準備  
  ├ 保存  
  ├ 確認  
  ├ 更新  
  ├ 装飾  
  ├ リンク  
  ├ テーブル  
  ├ テーブル2  
  ├ フレーム  
  └ フレーム2  
  CSS  
  ├ 記述方法  
  ├ CSSファイル  
  └ テキスト  
  リンク  
  メール  
1.フレームって

えっと左のメニューを選ぶと右に内容が表示されるものです。
あ。もちろん上と下でも使えますけど。
フレームを使うとメニューページに戻らなくてすむし
お買い得商品だと思うんですけどどうでしょう(笑)

こんなの↓を作ろうと思ってます。
フレームサンプル

2.仕組み

フレームを使うには最低でも3つのファイルが必要です。
とりあえず左右2分割のフレームを想定して説明します。

1.フレームを設定するファイル(f_index.html)
実際には表示されません。
左右の割合とか表示させるファイルを指定します。
2.左側に表示させるファイル(f_left.html)
メニュー担当。
クリックで内容を右側に表示させます。
3.右側に表示させるファイル(f_right.html)
内容担当。
普通のHTMLファイルです。

*カッコの中はそれぞれのファイル名です。
 えっと。あの。深い意味はありません。
 名前がないと不便なんで適当につけました。

3.f_index.htmlの説明

これがフレームの設定をするファイルです。
場所の名前や左右の大きさの割合などを指定します。

<HTML>
<HEAD>
<TITLE>

フレームページ
</TITLE>
</HEAD>
<FRAMESET cols="20%,*">
  <frame src="f_left.html" name="hidari">
  <frame src="f_right.html" name="migi">
  <NOFRAMES>
  フレーム対応のブラウザでご覧下さい。
  </NOFRAMES>
</FRAMESET>
</HTML>

んじゃタグの説明をしましょう。
<FRAMESET cols="20%,*">
「cols="20%,*"」で左右の割合を決めています。
「*」というのは指定されてる残りを示します。
ここでは(左側が)20%なので100%-20%の80%が右側になります。
この場合は「cols="20%,80%"」と指定しても同じです。
ピクセル指定だとモニタによってサイズが変わるので「*」を使うようにしよう。
そうだ。縦に分割する時は「cols」を「rows」にしてください。

<frame src="f_left.html" name="hidari">
まず左側に表示するファイルを指定します。
もし3分割だったら順に左側、真ん中、右側の順に書いていきます。
「src="f_left.html"」これが左側に表示するファイル。
「name="hidari"」で場所の名前を決めます。

<frame src="f_right.html" name="migi">
今度は右側に表示するファイルの指定です。
こっちは「migi」って名前になってますね(単純)

4.f_left.htmlの説明

ええとメニューを担当する部分です。
や。別にメニューじゃなきゃいけない訳じゃないけど(^^;
さてソースから見てみましょう(サンプルと多少違います)

<HTML>
<HEAD>
<TITLE>
めにゅー
</TITLE>
</HEAD>
<BODY>
<A href="f_right2.html" target="migi">
右を変更</A><BR>
<A href="f_left2.html" target="hidari">
左を変更</A><BR>
<A href="f_all2.html" target="_top">
全体を変更</A><BR>
<A href="f_new2.html" target="_blank">
新窓</A>
</BODY>
</HTML>

これってたいして説明することないんですよね(笑)
ターゲットの設定さえしてあれば問題ないですから。
<A href="f_right2.html" target="migi">
右側のコンテンツを表示させるのは「migi」ですよね。
ということでリンクの表示先を「target="migi"」と指定します。
これをやらないと同じウィンドウ(左側)で開かれます。

<A href="f_left2.html" target="hidari">
これはターゲットが「hidari」に変わっただけですね。
コンテンツが増えたときに使うかも。
これをクリックしたらHTMLのコンテンツが細分化されるとか。

<A href="f_all2.html" target="_top">
<A href="f_new2.html" target="_blank">

あの。これ非常に大切なんで覚えておいてください。
「リンク」のとこでも書いたんですけど他サイトへリンクを貼るときは
必ずどちらかのターゲットを指定してください。
というのもフレームを使っていてターゲットを指定していないと
その場所(領域)に表示されるんですよ。
同じウィンドウで開きたいときは「target="_top"」を
新しいウィンドウで開きたいときは「target="_blank"」を指定してください。
あ。あとね。メニューで使うときってほぼ右側に開くじゃないですか。
そのリンクをいちいちターゲット指定するのは面倒ですよね。
「<base target="migi">」って書くとターゲット指定のないリンクは
右側に開くことが出来ます(name="migi"の場合)。
*<HEAD>〜</HEAD>の間に書いてください。

5.f_right.htmlの説明

んー。これは普通のHTMLファイルなんで説明いらないかな。
いや、ホントに。普通に書いてもらえれば結構ですんで。


△ 上へ △

HOME  | 雑記  | メモ  | 掲示板  | SCRIPT  | HTML  | リンク  | メール