フレームレイアウト/HTMLタグ素材集

フレームレイアウト

●フレームページのポイント●

frame nameは半角英数字であればなんでも構いません[hidari]や[migi]など
leftからrightへテキスト(文字)でリンクする場合フレームleftに表示するページに
<a href="URL" target="right">リンク文字</a>と記入します
leftからrightへ画像でリンクする場合フレームleftに表示するページに
<a href="URL" target="right">
<img src="画像URL">
</a>と記入します
border="0"はフレーム間の枠の太さ数字を大きくすると太くなり小さくすると細くなる
bordercolor="カラーコード"を加えると色をつけることも出来ます。
scrolling="yes"はyesだとスクロールバー表示、noだとスクロールバー非表示なります
cols="200,*"にするとページが縦割りになり
数字が大きいと左側が広くなり右側が狭くなる数字が小さいと逆になります
rows="200,*"にするとページが横割りになり
数字が大きいと上側が広くなり下側が狭くなる数字が小さいと逆になります
フレームページの仕組みについては[フレームとは？]ページをご覧下さい

左にメニュー、右に本文

○サンプルページを表示するにはここをクリック♪○

<frameset cols="200,*" border="0">
<frame name="left" src="左ページＵＲＬ" scrolling="yes">
<frame name="right" src="右ページＵＲＬ" scrolling="yes">
<noframes>
<body>
フレームを表示できないブラウザへのメッセージ
</body>
</noframes>
</frameset>

右にメニュー、左に本文

○サンプルページを表示するにはここをクリック♪○

<frameset cols="700,*" border="0">
<frame name="left" src="左ページＵＲＬ" scrolling="yes">
<frame name="right" src="右ページＵＲＬ" scrolling="yes">
<noframes>
<body>
フレームを表示できないブラウザへのメッセージ
</body>
</noframes>
</frameset>

上にメニュー、下に本文

○サンプルページを表示するにはここをクリック♪○

<frameset rows="100,*" border="0">
<frame name="top" src="上ページＵＲＬ" scrolling="yes">
<frame name="bottom" src="下ページＵＲＬ" scrolling="yes">
<noframes>
<body>
フレームを表示できないブラウザへのメッセージ
</body>
</noframes>
</frameset>

下にメニュー、上に本文

○サンプルページを表示するにはここをクリック♪○

<frameset rows="450,*" border="0">
<frame name="top" src="上ページＵＲＬ" scrolling="yes">
<frame name="bottom" src="下ページＵＲＬ" scrolling="yes">
<noframes>
<body>
フレームを表示できないブラウザへのメッセージ
</body>
</noframes>
</frameset>

左と上にメニュー、右に本文

○サンプルページを表示するにはここをクリック♪○

<frameset rows="100,*" border="0">
<frame name="top" src="上ページＵＲＬ" scrolling="yes">
<frameset cols="150,*" border="0">
<frame name="left" src="左ページＵＲＬ" scrolling="yes">
<frame name="right" src="右ページＵＲＬ" scrolling="yes">
</frameset></frameset>
<noframes>
<body>
フレームを表示できないブラウザへのメッセージ
</body>
</noframes>

右と上にメニュー、左に本文

○サンプルページを表示するにはここをクリック♪○

<frameset rows="100,*" border="0">
<frame name="top" src="上ページＵＲＬ" scrolling="yes">
<frameset cols="700,*" border="0">
<frame name="left" src="左ページＵＲＬ" scrolling="yes">
<frame name="right" src="右ページＵＲＬ" scrolling="yes">
</frameset></frameset>
<noframes>
<body>
フレームを表示できないブラウザへのメッセージ
</body>
</noframes>

左と下にメニュー、右に本文

○サンプルページを表示するにはここをクリック♪○

<frameset rows="*,100" border="0">

<frameset cols="150,*" border="0">
<frame name="left" src="左ページＵＲＬ" scrolling="yes">
<frame name="right" src="右ページＵＲＬ" scrolling="yes">
</frameset>

<Frame name="bottom" src="下ページＵＲＬ" noresize>
</frameset>
<noframes>
<body>
フレームを表示できないブラウザへのメッセージ
</body>
</noframes>

右と下にメニュー、左に本文

○サンプルページを表示するにはここをクリック♪○

<frameset rows="*,100" border="0">

<frameset cols="700,*" border="0">
<frame name="left" src="左ページＵＲＬ" scrolling="yes">
<frame name="right" src="右ページＵＲＬ" scrolling="yes">
</frameset>

<Frame name="bottom" src="下ページＵＲＬ" noresize>
</frameset>
<noframes>
<body>
フレームを表示できないブラウザへのメッセージ
</body>
</noframes>

上と下にメニュー、中央に本文

○サンプルページを表示するにはここをクリック♪○

<frameset rows="50,*,50" border="0">
<frame name="top" src="上ページURL" scrolling="yes">

<frameset cols="100%,*" border="0">
<frame name="center" src="中央ページURL" scrolling="yes">
</frameset>

<frame name="bottom" src="下ページURL" scrolling="yes">
</frameset>
<noframes>
<body>
フレームを表示できないブラウザへのメッセージ
</body>
</noframes>

右と左にメニュー、中央に本文

○サンプルページを表示するにはここをクリック♪○

<frameset cols="*,180" border="0">

<frameset cols="150,*" border="0">
<frame name="left" src="左ページＵＲＬ" scrolling="yes">
<frame name="right" src="中央ページＵＲＬ" scrolling="yes">
</frameset>

<Frame name="center" src="左ページＵＲＬ" noresize>
</frameset>

<noframes>
<body>
フレームを表示できないブラウザへのメッセージ
</body>
</noframes>

ページトップへ

文章の無断転載・タグサンプルの再配布を禁止します。
Copyright © 2005-2006 hide. All Rights Reserved.
全ページリンクフリーです。