フレームに関するタグ

フレームに関するタグを示します。フレームは、ウィンドウ内を複数のフレームに区切り、別々のHTMLファイルを表示させるためのものです。トップページにフレームを使用する場合には、indexファイルにフレームの記述を行います。

フレームは管理が楽で便利ですが、SEOの観点からはフレームは推奨できません。スタイルシートを持ちいる場合には使用しません。

フレームの割り付け frameset

フレームの定義部分を囲み、分割方法などを指定します。以下の属性を持ちます。

rows	横に分割するウィンドウのサイズをピクセル数かウィンドウサイズに対する割合で順次指定します。*で任意のサイズになります。
cols	縦に分割するウィンドウのサイズをピクセル数かウィンドウサイズに対する割合で順次指定します。*で任意のサイズになります。
frameborder	分割したフレームの境界線の有無を指定します。1が有り、0が無しです。
border	境界線の太さをピクセル数で指定します。
bordercolor	境界線の色を指定します。
framespacing	フレーム間の距離をピクセル数で指定します。

frameset要素内には、分割数と同じ数のframe要素またはframeset要素が入ります。

個別フレーム frame

frameset要素内に記述し、各フレームを定義します。終了タグはありません。以下の属性を持ちます。

src	最初にフレーム内で表示するページのURLアドレスを指定します。
name	フレームに名前を付けます。link要素のtarget属性でこの名前を指定して、表示するフレームを特定します。
frameborder	フレームの境界線の有無を指定します。1が有り、0が無しです。
bordercolor	境界線の色を指定します。
scrolling	スクロールバーの有無をyes, no, autoで指定します。
noresize	フレームのサイズ変更を禁止します。属性値はありません。
marginwidth	フレームの左右マージンをピクセル数で指定します。
marginheight	フレームの上下マージンをピクセル数で指定します。

フレーム非対応ブラウザでの表示 noframes

frameset要素にフレーム非対応ブラウザで表示したい内容を記述します。通常、body要素が記述されます。フレーム対応ブラウザではこの部分は無視されます。

フレームを使ったページのサンプル

ページ上部にロゴを、下部左にメニューを、下部右に内容を表示するようなフレームページです。

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
</head>
<frameset rows="80, *">
  <frame name="logo" src="logo.htm">
  <frameset cols="150, *">
    <frame name="menu" src="menu.htm">
    <frame name="main" src="top.htm">
  </frameset>
</frameset>
<noframes>
  <body>
    このページはフレームを使用しています。
    フレーム対応のブラウザでごらんください。
  </body>
</noframes>
</html>

この例では、index.htmの他にフレーム内に表示するlogo.htm、menu.htm、top.htmが必要になります。

menu.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
</head>
  <a href="ningen.htm" target="main">人間科学部</a><br>
  <a href="kokusai.htm" target="main">国際学部</a><br>
  <a href="komisin.htm" target="main">コミュニティ振興学部</a><br>
</body>
</html>

メニュー部分からリンクをクリックして、リンク先のページをmainフレーム内に表示します。