フレームちょっとした手直し編
超簡単ＨＴＭＬ基礎

前のSTEPで作成したHTMLサンプルページ (flame2.html)では、フレームの境界線が表示され、その境界線を左右に動かすこともできます。このままでも別に大きな問題はないのですが、ほんの少しだけ手を加えてお洒落に修正してみました！
■STEP3-5．フレームの境界線を消す
　まずは、ちょっと目障りなフレームの境界線を消します。
フレームページの <FRAMESET> タグにBORDER="0"を追加するだけです。
<HTML>
<HEAD>
<TITLE>フレームサンプルページ３</TITLE>
</HEAD>
<FRAMESET COLS="120,*" BORDER="0">
<FRAME SRC="menu2.html" NAME="menu">
<FRAME SRC="top1.html" NAME="body">
</FRAMESET>
</HTML>

 		<--- flame3.htmlで保存．



<FRAMESET .... BORDER="0">
フレームの境界線をなくす．
境界線を太くすることもできます・・
HTMLサンプルページ (flame3.html)
フレームの境界線をなくしたページです。境界線をなくすと、見た目はフレーム無しの普通のページのようにも見えます。

HomePage作成支援Top HomePage

■STEP3-6．メニューページに背景画像を入れてみる
　次はメニューページにちょっとお洒落な背景画像を入れてみました。この背景画像 back2.gif の横幅は、フレームページで指定したメニューの左フレームの横幅(120pixel)と同じサイズにしています。
<HTML>
<HEAD>
<TITLE>メニューページ４</TITLE>
</HEAD>
<BODY BACKGROUND="back2.gif">
<BR><BR><BR><BR>
<FONT SIZE="2">
<A HREF="top1.html" TARGET="body">Home</A>
<BR><BR>
<A HREF="sample09.html" TARGET="body">うちのロン</A>
<BR><BR>
<A HREF="sample17.html" TARGET="body">色々な犬種</A>
<BR>
</FONT>
</BODY>
</HTML>

 		<--- menu4.htmlで保存．




back2.gif
(120×20pixel)











<--- flame4.htmlで保存．



メニューページを修正したので、
menu4.htmlに変更．
<HTML>
<HEAD>
<TITLE>フレームサンプルページ４</TITLE>
</HEAD>
<FRAMESET COLS="120,*" BORDER="0">
<FRAME SRC="menu4.html" NAME="menu">
<FRAME SRC="top1.html" NAME="body">
</FRAMESET>
</HTML>
HTMLサンプルページ (flame4.html)
・・・いかがでしょうか？ 少し立体感のあるページになったと思いませんか？

HomePage作成支援Top HomePage

■STEP3-7．スクロールバーを非表示にする
　前のSTEPで作成したHTMLサンプルページ (flame4.html)、ウィンドウの高さを縮めていくとスクロールバーが表示されてしまいます。メニュー項目が３つだけなので、特に気にする必要はないのですが・・・　せっかくメニューページをお洒落にしたので、念のためスクロールバーを非表示に設定しておきます。但し、縦に長いメニューページの場合には、この設定は解除しておきましょう！
<HTML>
<HEAD>
<TITLE>フレームサンプルページ５</TITLE>
</HEAD>
<FRAMESET COLS="120,*" BORDER="0">
<FRAME SRC="menu4.html" NAME="menu" SCROLLING="no">
<FRAME SRC="top1.html" NAME="body">
</FRAMESET>
</HTML>

 		<--- flame5.htmlで保存．




<FRAME .... SCROLLING="no">
スクロールバーを非表示にする．
（スクロール不可）
HTMLサンプルページ (flame5.html)
見た目は前のSTEPのページと変わりません。とりあえず、フレームページの完成です。

HomePage作成支援Top HomePage

■STEP3-8．フレームページでリンク集を作る
　フレームページのしめくくりとして、リンク集のページを追加してみましょう。
ここでは、リンク集のページ (link6.html) を新たに作成し、メニューページ (menu6.html) とフレームページ (flame6.html) に修正を加えています。フレーム内から他のWebサイトにリンクをはる場合、フレーム内に表示されないように TARGET="_top" または TARGET="_blank"を必ず指定しましょう。
リンク集のページで指定したリンク先URL (http://homepage2.nifty.com/f-pageh/) は、我が家のサイト「Family Page広島」のトップページです。
<HTML>
<HEAD>
<TITLE>リンク集</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<H3>リンク集</H3>
<BR><BR>
<A HREF="http://homepage2.nifty.com/f-pageh/">
■リンク１</A>
<BR><BR>
<A HREF="http://homepage2.nifty.com/f-pageh/" TARGET="_top">
■リンク２</A>
<BR><BR>
<A HREF="http://homepage2.nifty.com/f-pageh/" TARGET="_blank">
■リンク３</A>
<BR>
</CENTER>
</BODY>
</HTML>

 		<--- link6.htmlで保存．









TARGET="_top"
フレームを解除して、リンク先を表示
する．

TARGET="_blank"
新しいウィンドウを開いて、リンク先
を表示する．





<--- menu6.htmlで保存．












メニューページにリンク集の
ページ (link6.html) へのリンクを
追加します．




<--- flame6.htmlで保存．




メニューページを修正したので、
menu6.htmlに変更．
<HTML>
<HEAD>
<TITLE>メニューページ６</TITLE>
</HEAD>
<BODY BACKGROUND="back2.gif">
<BR><BR><BR><BR>
<FONT SIZE="2">
<A HREF="top1.html" TARGET="body">Home</A>
<BR><BR>
<A HREF="sample09.html" TARGET="body">うちのロン</A>
<BR><BR>
<A HREF="sample17.html" TARGET="body">色々な犬種</A>
<BR><BR>
<A HREF="link6.html" TARGET="body">リンク集</A>
<BR>
</FONT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>フレームサンプルページ６</TITLE>
</HEAD>
<FRAMESET COLS="120,*" BORDER="0">
<FRAME SRC="menu6.html" NAME="menu">
<FRAME SRC="top1.html" NAME="body">
</FRAMESET>
</HTML>
HTMLサンプルページ (flame6.html)
フレームページにリンク集のページを追加してみました。各々のリンクをクリックして、リンク先ページの表示させ方の違いを確かめてください。

HomePage作成支援Top HomePage
Prev.
フレーム基礎編		 Next
METAタグ編
Copyright(C) 2001 T.Kaze/Family Page Hiroshima