HOME


フレームのページを作る



フレームとは一つのウインドウで複数のHTML文書を表示させることができるタグです。
フレームのページは<body>タグは使わずにその部分に、<frame 分割の指定>〜</frame>を入れます。
分割の指定は、横割りはrows="ピクセル数,*"などとし、縦割りはcols=" , "とします。三つ以上に分割したい場合は「,」で区切っていけばできます。<frame cols="200,300,100,*">〜</frame>といったように。
<html>
<frameset cols="180,*">
<frame src="frame1.html" name="1">
<frameset rows="50%,*">
<frame src="frame2.html" name="2">
<frame src="frame3.html" name="3">
</frameset>
</html>

このようなタグを書くとこういうページになります。


フレーム内のリンクの貼り方



フレーム内でリンクを貼り、そのリンクをどのフレームに表示させる方法を説明します。

まず、そのフレームに対して名前をつけます。フレームに名前をつけるには、<frame src=" " name="フレームの名前">と書きます。
下のような文書を書くと、左のフレームは"1"、右上のフレームは"2"右下のフレームは"3"という名前がつきます。名前には、アルファベットと数字の半角が使えます。

・最初にフレームを表示させるページ(ri_index.html)
<html>
<frameset cols="300,*">
<frame src="ri1.html" name="1">
<frameset rows="50%,*">
<frame src="ri2.html" name="2">
<frame src="ri3.html" name="3">
</frameset>
</html>


次にリンクを貼るページには<a href="アドレス" target="フレームの名前">〜といったタグを書きます。
リンクを同じウインドウでフレームのないページに開きたい場合はtarget="_top"とします。

・リンクを貼るページ(ri1.html)
<html>
<body>
この<a href="rink.html" target="1">リンク</a>は"1"と名前をつけたフレームに表示されます。
この<a href="rink.html" target="2">リンク</a>は"2"と名前をつけたフレームに表示されます。
この<a href="rink.html" target="3">リンク</a>は"3"と名前をつけたフレームに表示されます。
この<a href="rink.html" target="_top">リンク</a>は同じウインドウでフレームのないページに表示されます。

</body>
</html>

これはri_index.htmlのページです。


フレームを表示できない環境に対応する!



フレームに対応していないプラウザやを使用している場合や、ユーザーがフレームを表示しないように設定している場合などに変わりのページを表示させるものです。
その、フレームのページのHTML文書の中に書くもので、<noframes>と</noframes>の間が変わりに表示されます。

<html>
<frameset cols="180,*">
<frame src="frame1.html" name="1">
<frameset rows="50%,*">
<frame src="frame2.html" name="2">
<frame src="frame3.html" name="3">
</frameset>
</frameset>

<noframes>
フレームが見れない方はここの部分が表示されます。<br>
そのような方は<a href="no.html">こちら</a>からお入りください<br>
</noframes>
</html>


フレームが見れない方はここの部分が表示されます。
そのような方はこちらからお入りください





インラインフレームをつける!!



インラインフレームとはウインドウ内に挿入するフレームのことです。
インラインフレームを使うには<iframe src=" " name=" " width=" " height=" ">などといった文書を書きます。

ここは普通に表示される部分です。

↓インラインフレーム
<iframe src="if_index.html" name="iframe" width="300" height="100">
ここはフレームが見れない人に表示される部分
</iframe>


ここは普通に表示される部分です。

↓インラインフレーム




フレームの境界線を指定する



フレームの境界線の色や幅をしていするには<frameset frameborder="" framebordercolor="">という風に指定します。
frameborder="0"とするとフレームの境界線を表示しなくなります。

<html>
<frameset cols="180,*" border="10" bordercolor="#ffff00">
<frame src="frame1.html">
<frameset rows="50%,*">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</frameset>
</html>

フレームの枠を指定したページ






SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送