6-9

 超初心者を脱皮したい-9
   フレームを3分割で使いこなしたいっ。


『答え』 6-6の応用で出来ます。

先に見本を見ましょうか。 「ココ」をクリックして下さい。
(ちゃんと戻ってきましょうね)

どうですか、3つのフレームで2種類のメニューを使いこなしていたでしょ。このサンプルでは6個のHTMLで機能しています (メニュー選択後の表示文は含まれていません)。
 @上下分割のフレーム宣言文(f0.html)
 A下段を左右分割するフレーム宣言文・A〜C(f1.html)
 B下段を左右分割するフレーム宣言文・D〜F(f2.html)
 C下段左側のメニュー表示文・A〜C(f1-2.html)
 D下段左側のメニュー表示文・D〜F(f2-2.html)
 E一番上に表示させるメニュー文(f3.html)
以上の6個のHTML文です。
6−6をマスターされていれば、細かいHTML文の説明は不要かと思います。理解しておかなければならないのがフレームの名前でしょう。 解説すると下記の図(赤字コメント)のようになります。


上の各枠の中に赤い文字で書いている名前(upとかleftやright)がありますね。このフレーム名がタグの中でname=とtarget=にて使われていることを理解出来れば難しくありませんね。 (上下分割の際には、updownでフレーム分割して、 その次にdownのフレームをleftrightに左右分割しています。 これもポイントです)
戻る時はTARGET="_top"と書いて、フレームなしの状態にブラウザを掃除して戻りましょう (HP6-9.htmlって言うのは、このページの名前です)。この辺りは、6-6でマスター済みですね、きっと。
如何でしょう、ご理解戴けましたか。以上で、この項は修了です。

上でお見せしたサンプルをダウンロードしたい場合は「ここ」をクリックして下さい。
☆彡main point
・フレーム3分割を上下分割+左右分割の2段階で実現した技です。
・フレーム名のup、down、left、rightの場所を理解しましょう。
・rightフレームへ表示する為のモノを抜いて6個のHTML文が必要です。


質問メール  OZ道場メニュー