難解らしいフレームを優しく解説してるつもり
|
|
HTMLの解説 難解らしいフレームを優しく解説してるつもり |
|
|
雑記 メモ 掲示板 SCRIPT HTML ├ 基本 ├ 前準備 ├ 保存 ├ 確認 ├ 更新 ├ 装飾 ├ リンク ├ テーブル ├ テーブル2 ├ フレーム └ フレーム2 CSS ├ 記述方法 ├ CSSファイル └ テキスト リンク メール |
1.フレームって えっと左のメニューを選ぶと右に内容が表示されるものです。 あ。もちろん上と下でも使えますけど。 フレームを使うとメニューページに戻らなくてすむし お買い得商品だと思うんですけどどうでしょう（笑） こんなの↓を作ろうと思ってます。  2.仕組み フレームを使うには最低でも3つのファイルが必要です。 とりあえず左右2分割のフレームを想定して説明します。 1.フレームを設定するファイル（f_index.html） 実際には表示されません。
2.左側に表示させるファイル（f_left.html）左右の割合とか表示させるファイルを指定します。 メニュー担当。
3.右側に表示させるファイル（f_right.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 | リンク | メール |