フレームの作り方
ここでは横2分割ページの作り方を例に解説します。
横二分割 フレームページ
ソースは下の通り
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=Shift_JIS">
<META
http-equiv="Content-Style-Type"
content="text/css">
<TITLE>タイトル</TITLE>
</HEAD>
<FRAMESET cols="左の幅,*" border="境界線の数値">
<FRAME
name="左のフレーム名"
src="左のアドレス">
<FRAME name="右のフレーム名" src="右のアドレス">
<NOFRAMES>
<BODY>
<P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML> |
左の幅 左のページ幅を指定します。（ピクセル数値） （*は右のページが残りの部分で表示されます）
※幅は○%でも指定できます。この場合画面全体の○%が幅になります。
境界線の数値 0にすると境界線がなくなります。
フレーム名 半角英数字で付けてください。
スクロールバーを表示したくない場合は下のように変えてください。
<FRAME name="フレーム名" src="アドレス"
scrolling="no">
このページを表示するには、フレームをサポートしているブラウザが必要です。っていうのはフレームに対応していないブラウザで表示される文字です。
右に目次をもっていきたいときは
<FRAMESET cols="*,右の幅" border="境界線の数値">にしたらOKです。
境界線を変える場合（左がメニューの時）
<FRAME name="左のフレーム名" src="アドレス" style="border-right:線の種類 数値px
色;">
境界線を変える場合（右がメニューの時）
<FRAME name="右のフレーム名" src="アドレス" style="border-left:線の種類 数値px
色;">
線の種類
これがフレームページを構成するソースになるわけですが目次やメインフレームで表示するページのリンクはどのフレームで開くかという指定が必要になります。
普通にリンクさせるとリンクタグを入れたページのフレームで開くことになってしまいます。
フレームページのリンクについて
上のように目次、本文ページがあり、それをまとめるフレームページがあるとします。フレームページは目次、本文ページを表示させるだけなのでリンクなどは関係ありませんが重要なのは目次と本文ページです。
ここではフレームページを作る際、目次のフレーム名をframe1、本文のフレーム名をframe2にした場合を例にして説明します。
まずは目次のリンクの仕方です。普通にリンクを貼れば、目次のフレームでリンクしてしまい全然フレームの意味がありません。
目次のリンクを本文のフレームで開くには、
<a href="アドレス"
target="フレーム名">
文字</a> |
フレーム名の部分をframe2にします。
これで本文の部分のフレームで開くことができます。
この方法で本文のフレームからのリンクで目次ページのフレームを開くことも可能です。開くフレームをframe1に指定すればいいだけですから。
次にフレームページ全体で開く方法です。
<a href="アドレス"
target="_top">文字</a>
目次の部分でも本文でもOKです。
フレームページのソース一覧はトップページからどうぞ
ページ作りの際他のサイトもご利用下さい。
LINK
パソコン情報まとめサイト HTMLタグ CSSスタイルシート FFFTPの使い方 Digital Life -デジタルライフ-
|
トップページへ
|
