巫-KANNAGI-

フレームでWebページを作る

Published2004-12-1820:30

Modified

HTMLのframeを使ったWebページのレイアウトについて。

フレームの基本形、2・3カラムの作り方を解説。

水平（横）方向の分割

ページを水平（横）方向に分割する場合について。

例として次のページを作るものとする。

  • ページの左側にサイドバー、右側にコンテンツを表示する。
  • サイドバーは『side.html』として作成。
  • コンテンツは『content.html』として作成。
  • 分割されたページは『index.html』として出力。

この条件の時、各HTMLファイルの内容は次のようになる。

side.html
<!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">
</head>
<body>
<p>Side</p>
</body>
</html>
content.html
<!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">
</head>
<body>
<p>Hello World</p>
</body>
</html>
index.html
<!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>Frame</title>
</head>
<frameset cols="160,*" border="1">
<frame src="./side.html" name="side" frameborder="1">
<frame src="./content.html" name="content" frameborder="1">
<noframes>
<body>
<p>フレームをサポートしていない環境に表示する内容。</p>
</body>
</noframes>
</frameset>
</html>

ポイントは次の通り。

  • 『index.html』のframesetタグのcols属性に横幅を指定。
    • 横幅、半角カンマ、横幅……のように左から順に分割する数の横幅を書く。
    • 横幅の指定はピクセル（数値のみ）または割合（ページの半分を使うのであれば50%）で指定する。
    • 『*』は余った大きさを全て使うという指定。
  • 『index.html』のframeタグのsrc属性に表示するHTMLのファイル名、name属性にページの名前（何でも良い。半角英数で指定）を書く。

垂直（縦）方向の分割

ページを垂直（縦）方向に分割する場合について。

例として次のページを作るものとする。

  • ページの上側にヘッダー、下側にコンテンツを表示する。
  • ヘッダーは『header.html』として作成。
  • コンテンツは『content.html』として作成。
  • 分割されたページは『index.html』として出力。

この条件の時、各HTMLファイルの内容は次のようになる。

header.html
<!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">
</head>
<body>
<p>Header</p>
</body>
</html>
content.html
<!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">
</head>
<body>
<p>Hello World</p>
</body>
</html>
index.html
<!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>Frame</title>
</head>
<frameset rows="80,*" border="1">
<frame src="./header.html" name="header" frameborder="1" scrolling="auto">
<frame src="./content.html" name="content" frameborder="1" scrolling="auto">
<noframes>
<body>
<p>フレームをサポートしていない環境に表示する内容。</p>
</body>
</noframes>
</frameset>
</html>

ポイントは次の通り。

  • 『index.html』のframesetタグのrows属性に縦幅を指定。
    • 縦幅、半角カンマ、縦幅……のように左から順に分割する数の縦幅を書く。
    • 縦幅の指定はピクセル（数値のみ）または割合（ページの半分を使うのであれば50%）で指定する。
    • 『*』は余った大きさを全て使うという指定。
  • 『index.html』のframeタグのsrc属性に表示するHTMLのファイル名、name属性にページの名前（何でも良い。半角英数で指定）を書く。

2カラム

2カラムのレイアウトとなるフレームについて。

例として次のページを作るものとする。

  • ページの上側にヘッダー、中央の左側にメニュー、中央の右側にコンテンツ、下側にフッターを表示する。
  • ヘッダーは『header.html』として作成。
  • メニューは『menu.html』として作成。
  • コンテンツは『content.html』として作成。
  • フッターは『footer.html』として作成。
  • 分割されたページは『index.html』として出力。

この条件の時、各HTMLファイルの内容は次のようになる。

header.html
<!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">
</head>
<body>
<p>Header</p>
</body>
</html>
menu.html
<!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">
</head>
<body>
<p>Menu</p>
<ul>
<li><a href="./content.html" target="content">Content</a></li>
</ul>
</body>
</html>
content.html
<!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">
</head>
<body>
<p>Hello World</p>
</body>
</html>
footer.html
<!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">
</head>
<body>
<p>Footer</p>
</body>
</html>
index.html
<!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>Frame 2 Column</title>
</head>
<frameset rows="60,*,40" border="1">
<frame src="./header.html" name="header" frameborder="1" scrolling="auto">
<frameset cols="160,*" border="1">
<frame src="./menu.html" name="menu" frameborder="1" scrolling="auto">
<frame src="./content.html" name="content" frameborder="1" scrolling="auto">
<noframes>
<body>
<p>フレームをサポートしていない環境に表示する内容。</p>
</body>
</noframes>
</frameset>
<frame src="./footer.html" name="footer" frameborder="1" scrolling="auto">
<noframes>
<body>
<p>フレームをサポートしていない環境に表示する内容。</p>
</body>
</noframes>
</frameset>
</html>

ポイントは次の通り。

  • 『index.html』について、最初のframesetタグのrows属性にヘッダーの高さ、コンテンツの高さ、フッターの高さを指定。
  • 『index.html』について、2番目のframesetタグのcols属性にメニューの横幅、コンテンツの横幅を指定。
  • 『index.html』の各frameタグのsrc属性に表示するHTMLのファイル名、name属性にページの名前（何でも良い。半角英数で指定）を書く。
  • 『menu.html』のaタグのhref属性に表示するHTMLのファイル名、name属性に『index.html』のframeタグのname属性（例：コンテンツのページであれば『content』）を指定。

3カラム

3カラムのレイアウトとなるフレームについて。

例として次のページを作るものとする。

  • ページの上側にヘッダー、中央の左側にメニュー、上下左右の中央にコンテンツ、中央の右側にサイドコンテンツ、下側にフッターを表示する。
  • ヘッダーは『header.html』として作成。
  • メニューは『menu.html』として作成。
  • コンテンツは『content.html』として作成。
  • サイドコンテンツは『side.html』として作成。
  • フッターは『footer.html』として作成。
  • 分割されたページは『index.html』として出力。

この条件の時、各HTMLファイルの内容は次のようになる。

index.html
<!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>Frame 2 Column</title>
</head>
<frameset rows="60,*,40" border="1">
<frame src="./header.html" name="header" frameborder="1" scrolling="auto">
<frameset cols="160,*,80" border="1">
<frame src="./menu.html" name="menu" frameborder="1" scrolling="auto">
<frame src="./content.html" name="content" frameborder="1" scrolling="auto">
<frame src="./side.html" name="side" frameborder="1" scrolling="auto">
<noframes>
<body>
<p>フレームをサポートしていない環境に表示する内容。</p>
</body>
</noframes>
</frameset>
<frame src="./footer.html" name="footer" frameborder="1" scrolling="auto">
<noframes>
<body>
<p>フレームをサポートしていない環境に表示する内容。</p>
</body>
</noframes>
</frameset>
</html>

『header.html』、『menu.html』、『content.html』、『footer.html』、『side.html』は先述の項で解説した内容と同じになるため、省略。

ポイントに関しても同様。