HTML逆引きリファレンス～フレーム

無料ではじめる！ホームページ入門～ホームページ作成解説サイト～

フレーム

フレームを作りたい

<frameset ○>～</frameset>…フレームの作成
<frame src="●">…表示されるファイルの指定
○…rows="横割りの指定（ピクセル、%、*）"、cols="縦割りの指定（ピクセル、%、*）"
●…ファイルのURL

１つのブラウザウィンドウをいくつかに区切って、それぞれに別の文書を表示することができます。
<frameset>タグと</frameset>タグに挟んで、分割方法を指定します。
<frameset>タグと</frameset>タグは通常<body>タグと</body>タグがある位置に記述し、<body>タグと</body>タグは記述しません。
row属性はフレームを横に分割し、それぞれの高さを上から順にカンマ（,）で区切って記述します。
cols属性はフレームを縦に分割し、それぞれの高さを左から順にカンマ（,）で区切って記述します。
このとき使える単位はピクセル、%、*です。*は前に数字をつけてその割合で分割します。

たとえば100ピクセルを分割する際、「*，40，2*」と指定した場合、まず40ピクセルが確保されます。残りの60ピクセルを1*、2*に分割し、それぞれ20ピクセル（60ピクセルの3分の1）と40ピクセル（60ピクセルの3分の2）になります。

フレームに表示させるファイルは<frame>タグのsrc属性で指定します。<frame>タグは<frameset>タグと</frameset>タグで挟んで記述します。

HTMLソース

<html>
<head>
<title>フレーム上下２分割</title>
</head>
<frameset rows="20%,80%">
<frame src="sub.html">
<frame src="main.html">
</frameset>
</html>

結果はこちら。

HTMLソース

<html>
<head>
<title>フレーム左右２分割</title>
</head>
<frameset cols="20%,80%">
<frame src="sub.html">
<frame src="main.html">
</frameset>
</html>

結果はこちら。

TOP

境界線の表示・非表示を指定したい

<frame src="○" frameborder="●">
○…ファイルのURL
●…1（表示、デフォルト）、0（非表示）

<frame>タグのframeborder属性でフレームとフレームの境界線の表示・非表示を指定することができます。

HTMLソース

<html>
<head>
<title>フレーム境界線非表示</title>
</head>
<frameset cols="20%,80%">
<frame src="sub.html" frameborder="0">
<frame src="main.html" frameborder="0">
</frameset>
</html>

結果はこちら。

TOP

フレームの境界線を固定したい

<frame src="○" noresize>
○…ファイルのURL

<frame>タグのnoresize属性でフレームとフレームの境界線を固定し、ウィンドウのサイズを変更できないようにします。

HTMLソース

<html>
<head>
<title>フレーム境界線を固定</title>
</head>
<frameset cols="20%,80%">
<frame src="sub.html" noresize>
<frame src="main.html" frameborder="0">
</frameset>
</html>

結果はこちら。

TOP

境界線の幅を指定したい

<frameset border="○">～</frameset>
○…境界線の幅（ピクセル）

<frameset>タグのborder属性で境界線の幅を指定することができます。

HTMLソース

<html>
<head>
<title>境界線の幅を指定</title>
</head>
<frameset cols="20%,80%" border="30">
<frame src="sub.html">
<frame src="main.html">
</frameset>
</html>

結果はこちら。

TOP

境界線の色を指定したい

<frameset bordercolor="○">～</frameset>
<frame src="●" bordercolor="○">
○…色指定値または色名
●…ファイルのURL

bordercolor属性で境界線の色を設定することができます。
<frameset>タグ、<frame>タグ、どちらにも指定できます。
カラーコードはこちら。

HTMLソース

<html>
<head>
<title>境界線の色を指定</title>
</head>
<frameset cols="20%,80%" bordercolor="red">
<frame src="sub.html">
<frame src="main.html">
</frameset>
</html>

結果はこちら。

TOP

フレーム枠からのマージンを指定したい

<frame src="○" marginwidth="●" marginheight="□">
○…ファイルのURL
●…左右のマージン（ピクセル）
□…上下のマージン（ピクセル）

フレーム枠とコンテンツとの余白（マージン）を指定します。 <frame>タグのmarginwidth属性で左右の余白を、marginheight属性で上下の余白を指定することができます。

HTMLソース

<html>
<head>
<title>フレーム枠からのマージンを指定</title>
</head>
<frameset cols="20%,80%">
<frame src="sub.html">
<frame src="main.html" marginwidth="100" marginheight="200">
</frameset>
</html>

結果はこちら。

TOP

スクロールバーの表示・非表示を指定したい

<frame src="○" scrolling="●">
○…ファイルのURL
●…auto、yes、no

<frame>タグのscrolling属性でスクロールバーの表示・非表示を設定します。
auto…スクロールバーが必要かどうかブラウザ側が判断します。（デフォルト）
yes…スクロールバーを表示
no…スクロールバー非表示

HTMLソース

<html>
<head>
<title>スクロールバーの表示・非表示を指定</title>
</head>
<frameset cols="20%,80%">
<frame src="sub.html" scrolling="no">
<frame src="main.html" scrolling="yes">
</frameset>
</html>

結果はこちら。

TOP

フレームを表示しない環境に対処したい

<noframes>～</noframes>

フレームに対応していないブラウザ等で見た場合に表示させる内容を設定します。
<noframes>～</noframes>タグを<frameset>～</frameset>タグの間の最後に記述します。 <noframes>～</noframes>タグの間には単純なテキストだけでなくHTML文書を記述することができますが、<body>タグを書くことはできません。

HTMLソース

<html>
<head>
<title>フレームを表示しない環境に対処したい</title>
</head>
<frameset cols="20%,80%">
<frame src="sub.html>
<frame src="main.html>
<noframes>このページはフレームを使用しています。</noframes>
</frameset>
</html>

TOP

インラインフレームを作りたい

<iframe src="○" ●>～</iframe>
○…ファイルのURL
●…属性

ウィンドウを分割させるフレームではなく、ウィンドウ内に埋め込む形のインラインフレームを作成します。
<frame>タグとは異なり、<body>タグ内で使用し、属性には以下のようなものがあります。

name="フレーム名"
width="フレームの横幅"…ピクセルまたは%で指定
height="フレームの高さ"…ピクセルまたは%で指定
marginwidth="フレーム内の左右のマージン"…ピクセルで指定
marginheight="フレーム内の上下のマージン"…ピクセルで指定
scrolling="スクロールの指定"…auto、yes、no
frameborder="フレームの表示・非表示"…0（非表示）、1（表示）
align="テキストの回りこみの指定"…left、right、center

<iframe>タグと</iframe>タグの間の記述は、インラインフレームを表示しないブラウザで表示されます。

HTMLソース

<html>
<head>
<title>インラインフレームを作りたい</title>
</head>
<body>
<h1>インラインフレーム</h1>
<iframe src="iframe.html">
このページではインラインフレームを使用しています。
</iframe>
</body>
</html>

結果はこちら。

TOP

リンクを表示させるウィンドウを指定したい

<frame src="○" name="●">～</frame>
<a href="□" target="●">～</a>
○…ファイルのURL
●…フレーム名または_blank、_self、_parent、_top
□…読み込むファイルのURL

リンク先の内容を表示させるウィンドウやフレームを指定します。（通常はリンク先の内容はリンク元と同じウィンドウやフレーム内に表示されます。）
<frame>タグのname属性でフレームの名前を設定し、<a>タグでリンクを作成する際にtarget属性で表示させたいフレーム名を指定してやります。

_blank…名前の付いてない新しいフレームに内容を表示
_self…リンク元と同じフレームに内容を表示
_parent…フレームを１段だけ解除し、親フレーム（<frameset>で各フレームを設定しているフレーム）に表示。親フレームがない場合は「_self」と同じ。
_top…すでにあるフレームをすべて解除し、ウィンドウいっぱいに表示。親フレームがない場合は「_self」と同じ。

TOP

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