e-素材webロゴ
壁紙別館ホームに戻ります。 本館のホームに行きます。
Frame壁紙1→

【Frame壁紙の説明】

 Frame壁紙というネーミングは私が便宜上つけたものです。文字通り、Frame用の壁紙です。ここでご紹介するタグを参考に、Frame壁紙をご利用ください。ホームページビルダーをご利用の方は、メニューからフレームを選んで、ユーザーズガイドを参照してやってください。




<フレームページの作り方>

 ここでは、当サイトのFrame壁紙を使用される際に必要になるタグのみを解説します。ですので、詳しく知りたい方は、とほほさんのWWW入門などでお調べください。

1.必要なファイル

 例えば、右のようにフレームを横に2分割するような場合でしたら、HTMLファイルは3つ必要になります。

 ここでは、便宜上、frame.htmとmain.htm、title.htmというネーミングにします。





2.各ファイルのタグ

 まずは、2つの壁紙を用意します。ここでは、便宜上、Frame壁紙1からframe1_main1.gifとframe1_title1.gifをこれから作るHTMLファイルと同じフォルダに入れておきます。

 一つ目のHTMLファイル(frame.htm)
 …新規のテキストエディタ(メモ帳でOK)に次のタグをコピーしてファイル名をframe.htmとして保存します。このファイルは、フレーム未対応のブラウザでは、「このページはフレーム対応のブラウザでご覧ください。」というメッセージが表示されます。フレーム対応のブラウザでは、残りのtitle.htm、main.htmを作成したら、フレームページとして表示されます。

※ここで、cols=は横に分割でそのあとの数字は左が130ピクセルで右がその残りっていう意味です。

 二つ目のHTMLファイル(title.htm)
 …同じように、新規のテキストエディタに次のタグをコピーしてファイル名をtitle.htmとして保存します。


 三つ目のHTMLファイル(main.htm)
 …さらに、同じように新規のテキストエディタに次のタグをコピーし、ファイル名をmain.htmとして保存します。

 これでフレームページは完成しました。frame.htmをクリックしてみてください。フレームページが出来ていると思います。次は、フレーム間のリンクについてです。


3.リンクについて
 まずは、フレーム見本を開いてみてください。title.htmの各タイトルをクリックすると、main.htmのおのおのの場所に飛ぶようになっています。第1タイトルの場合は、右側メインフレーム内の第1タイトルに飛びます。第2タイトルの場合は、フレーム枠を解除して、全体を使って第2タイトルに飛びます。第3タイトルの場合は、新しいウインドウを開いてそこに第3タイトルを表示して飛びます。

 では、下準備として、main.htmの各タイトルに名前を付けましょう。テキストエディタでmain.htmを開きます。そして、次のタグを<!--ここから下に記入します。-->の下に写してください。ちなみに、一番下の<br><br>…というのは、ちゃんとリンク先に飛んだことがわかるようにするために入れた改行ですので、気にしないでください。ついでに、好みでセンター表示にしてます。

ここでは、第1タイトルの名前を1、第2タイトルの名前を2というふうにしています。

 次に、テキストエディタでtitle.htmを開きます。そして、そして、次のタグを<!--ここから下に記入します。-->の下に写してください。

 ここで、第1タイトルの前に入っている<a>の中のtarget="main"というのが、メインと名前を付けられた右側のフレームをターゲットにしているという意味です。同じように、第2タイトルの前に入っているtarget="_top"はフレームを解除して全画面で表示しますという意味です。さらに、第3タイトルの前に入っているtarget="_blank"は新しいウインドウに表示しますという意味です。お好きなように使い分けてください。
 また、main.htmの中の名前1に飛ぶには、<a>タグの中のhref=""にファイル名、続いて#で名前を入れます。ですから、<a href="main.htm#1">となるわけです。

 できましたか。フレーム見本と同じものになったと思います。もし、なってないようでしたら、どこか間違っているのかもしれません。一度、フレーム見本を開いて、各HTMLファイルの上で右クリックして、ソースの表示で、どこが違うか確認してみてください。ちなみに<br>の数が違うのは、気にしないでね。

e-素材web本館 e-素材web○○アップ別館 e-素材ranking e-ポジティブ(-ω☆)ショッピング


Copyrightc2002,E-chan. All right reserved.