5.FRAMEタグを知る
今回はフレームタグというタグについて勉強します。
フレームタグはWEBページを分割する時に使います。
5-1,frameタグとは
フレームはよくメニューなどに使われているやつです。→
見本
機能はブラウザのウィンドウ部分を分割することでページの一部分だけ表示を変えたりできます
作り方が簡単で、デザイン面・便利面でも利点があるので、ホームページを良くするのにフレームを使うのも一つの手です。
しかし、検索エンジンで不具合が出たりとデメリットもありますのでそこは各コンテンツの傾向を見ながら使ってください。
5-2,frameタグの基本形
frameタグの基本は土台の紙（HTML）に内容（違うページ）を貼るといった形で作成します。
ですからページを沢山分ければ、その分１ページに必要なコンテンツのhtmlファイルの数も増えます。要するに複数のﾍﾟｰｼﾞを１ページで表示します。
では、土台の紙になるhtmlファイルを書きましょう。
これの→
framepractice.htmlソース↓
| <html> |
|
| <head> |
| <title>例</title> |
| </head> |
|
| <frameset rows="15%,75%"> |
| <frame src="framepractice1.html"> |
| <frameset cols="20%,80%"> |
| <frame src="framepractice2.html"> |
| <frame src="framepractice3.html"> |
| </frameset> |
| </frameset> |
| </html> |
これが土台です。表示されている文章をこのhtmlファイルには書いていませんね。土台は特殊なリンクだと思ってみてください。
まず大まかなタグの説明をします。
普段は<body> 〜 </body>の間に内容を書くのですが、フレームを使用するときは<body>の代わりに<frameset> 〜 </frameset>を使用します。
そして〜の部分に張り付けるhtmlのパスを書きます<frame src="URL"> ※画像のリンクと似てます。
そして内容の方はいつも通りページを作れば終わりです。ただし、表示するﾍﾟｰｼﾞのタイトルは付けても表示されません。
この流れで作っていくのですが、説明と上のソースと比べてまだ足りないところがあります。（一つのページの大きさなど）
次は設定に入ります。しっかりと設定をしなければフレームは表示されないので注意
5-3,frameの設定
5-3-1,表示させる物の入れ方
<frameset ○>〜</frameset> （○にはrows="ﾋﾟｸｾﾙか%,・・・"かcols="ﾋﾟｸｾﾙか%,・・・" rowsにすると上下に分かれる。colsだと左右に分かれる。
・・・の説明は、例えばrows="20%,20%,60%"などと・・・個並べられるということ＝分割を沢山出来るということ。）
余りの大きさについてですが、例えばrows="400,（余り）"なら400,*とすれば自動で数値を決めてくれます
〜の部分には<frame src="URL">か、さらにまた分割をしたいのであれば<frameset ○>〜</frameset>を分割した分だけ入れてください
5-3-2,フレームを使えない環境
フレームに未対応のブラウザのために代替の「文章や移動先」などを書いておきましょう。
設定は簡単で<frameset ○> 〜 </frameset>の 〜 の部分に<noframes>〜</noframes>タグを置きます
後はbodyタグを書いた時とに同じように、<noframes>〜</noframes>の〜にコンテンツを書いていくか、移動先を書いておけばOKです。
5-3-3,スクロールバー
スクロールバーを非表示にしたり必ず表示させる設定に変えたり出来ます。
デフォルトでは、autoになっているので必要な時だけ表示されます
それを固定する方法は、<frame src="URL" ここ>の属性（ここの部分）にscrolling="設定の値"を足せば出来ます。設定の値に「表示はyes」、「非表示はno」を入れる。
5-3-4,境界線について
境界線を表示させたり表示させないようにするには、上と同じように<frame src="URL" >の属性にframeborder="○"で完成です。
（○に表示は1で、非表示は0をいれる。1がデフォルト）
※上記の方法では、境界線を完全に消すことは出来ません。↓の↓を見てください
また境界線の固定も↑の属性の所にnoresizeと書けばフレームを動かすことは出来なくなります。→<frame src="URL" noresize>
IEとNetscpe用では設定が異なりますので、両方記しておけば大抵のユーザーに対応できます
<frameset 略 frameborder="0" framespacing="0"【←IE】 border="0"【←Netscape】> 【】内はもちろん書かないでください
以上で境界線についてを終わります
5-4,ページの表示について
ここまででフレームの形についてはほぼ完成しているのですが、一つまだやり残していることがあります。
それはリンクを読み込むウィンドウをどれにするかという設定です。
設定の方法は大まかにわけて二通りあります。一つ目は各フレームに名前を付けて、その名前のついたフレームに表示させるようにする設定です
各フレームに名前を付ける方法↓
フレームに表示させるファイルのURLを書くとき（<frame src="URL">）にname="nanndemoii"属性を付けて、""ないにてきとうな名前を付けます。
そして、リンク先の指定のタグを書くとき（<a href="URL" ここ>）”ここ”にtarget="「リンクを取り込ませたいフレーム」に付けた名前"属性を追加させると、表示させたい場所にリンク先が読み込まれます。→１のついたフレームのリンクで試してみてください。
シンプルな方法↓
次にもう一つの方法ですが、それは形式上の判断で決める方法です。これも上と同じ位置の所に属性として書くだけです。
<frame src="URL" 例 target="_blank">
| _blank | ・・・新たなウィンドウを作る。 |
| _self | ・・・英語の通り自分自身にリンク先を表示する |
| _top | ・・・フレームを無くし最大の状態で表示 |
実際どのような動きをするか見てみましょう→
２のついたフレームのリンクで試してみてください。
以上で基本的なフレームタグの設定は終わりです。後はやっぱり工夫です。
5-5,インラインフレームについて
次は、フレームの一種のインラインフレームというフレームについて説明します。
まず、インラインフレームは、更新情報などに使われている↓です
インラインフレームの設置方法は画像を貼るのと似ているのでとても簡単です。
このタグは<iframe src="URL" wigth="横幅" height="縦幅"> 〜 </irame>で、画像を貼るときのタグと大きさの指定の方法が同じです。
〜 の所にインラインフレームの使用できない環境の人への対処として何か書いておくと良いでしょう。
次は上のフレーム編でやったのと同じ設定ですが、フレームにスクロールバーを付けない設定や境界線を消す設定をします。
この設定の方法は普通のフレームの設定と同じで、属性の部分にscrolling="yes（表示）かno（非表示）"境界線の表示について"frameborder="0（非表示）"です。
他にはテキストの回り込みの設定（これも画像でやったやつです）などをしましょう。属性にalign="leftか、centerか、right"を入れれば終わりです。
画像の設定、フレームの設定でも同じようにやっているので簡単ですね。
このタグは画像やtableと同じような感覚で簡単に貼れてしまうのでフレームより実用性が高いかも知れませんね。
一つ気をつけておかなければいけないのが、フレームもインラインフレームも他のﾍﾟｰｼﾞの内容を持ってくるため、レンタルサーバーを利用している方は広告が沢山出てきてしますおそれがあります。
そこは、ドント・マインドですね。それが嫌な方はページに広告がつかないサーバーや有料のサーバー、自宅サーバーで対処してください。
では、そのサーバー編へ進みましょう
GET HOMEPAGE 講座へ戻る
6.サーバーについて（公開方法）へ
Copyright © 2004-2005 BREAKDOWN. All rights reserved.
