フレームちょっとした手直し編
超簡単HTML基礎

前のSTEPで作成したHTMLサンプルページ (flame2.html)では、フレームの境界線が表示され、その境界線を左右に動かすこともできます。このままでも別に大きな問題はないのですが、ほんの少しだけ手を加えてお洒落に修正してみました!
STEP3-5.フレームの境界線を消す
 まずは、ちょっと目障りなフレームの境界線を消します。
フレームページの <FRAMESET> タグにBORDER="0"を追加するだけです。
<HTML>
<HEAD>
<TITLE>フレームサンプルページ3</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>メニューページ4</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>フレームサンプルページ4</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)、ウィンドウの高さを縮めていくとスクロールバーが表示されてしまいます。メニュー項目が3つだけなので、特に気にする必要はないのですが・・・ せっかくメニューページをお洒落にしたので、念のためスクロールバーを非表示に設定しておきます。但し、縦に長いメニューページの場合には、この設定は解除しておきましょう!
<HTML>
<HEAD>
<TITLE>フレームサンプルページ5</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/">
■リンク1</A>

<BR><BR>
<A HREF="http://homepage2.nifty.com/f-pageh/" TARGET="_top">
■リンク2</A>

<BR><BR>
<A HREF="http://homepage2.nifty.com/f-pageh/" TARGET="_blank">
■リンク3</A>

<BR>
</CENTER>
</BODY>
</HTML>

<--- link6.htmlで保存.









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

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





<--- menu6.htmlで保存.












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




<--- flame6.htmlで保存.




メニューページを修正したので、
menu6.htmlに変更.
<HTML>
<HEAD>
<TITLE>メニューページ6</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>フレームサンプルページ6</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