無料ホームページ作成!HTML
フレームページの作成

無料ホームページ作成!HTML・フレーム
フレームページの作成(FRAMESET,FRAME要素)

ホームページでフレームページの作成

FRAMESET要素

frameset要素はフレームを使ったページを作成する要素です、このframeset要素を使うときは<body>タグと入れ替えて使います。

FRAME要素

frame要素は表示するページを指定する要素です。
終了タグはありません。

<frameset><frame>タグの使い方

HTMLソース
フレームページ「index.html」

<html>
<head>
</head>
<frameset cols="30%,70%">
 <frame name="menu" src="menu.html">
 <frame name="main" src="main.html">
</frameset>
</html>
 
「menu.html」

<html>
<head>
</head>
<body>
 <ul>
  <li><a href="main.html" target="main">main.html</a></li>
  <li><a href="link.html" target="main">link.html</a></li>
 </ul>
</body>
</html>
 
「main.html」

<html>
<head>
</head>
<body>
 <h1>main.html</h1>
</body>
</html>
 
リンク用ページ「link.html」

<html>
<head>
</head>
<body>
 <h1>link.html</h1>
</body>
</html>
 
結果

こちらのページで見てください

FRAMESET,FRAME要素で宣言できる属性

frameset用
属性名 概要
cols px,% pxか%で横の範囲を指定、フレームの数だけ記述、複数指定するので間に「,」を入れて分けるのを忘れないように
* 相対的に横の範囲を指定、フレームの数だけ記述、複数指定するので間に「,」を入れて分けるのを忘れないように
rows px,% pxか%で縦の範囲を指定、フレームの数だけ記述、複数指定するので間に「,」を入れて分けるのを忘れないように
* 相対的に横の範囲を指定、フレームの数だけ記述、複数指定するので間に「,」を入れて分けるのを忘れないように
frame用
属性名 概要
src URL 表示するURLを絶対パスか相対パスで指定
name 文字 フレーム名を付ける
frameborder 0 フレームの境界線を非表示
1 フレームの境界線を表示(初期値)
marginheight px pxでフレームの上下の余白の指定
marginwidth px pxでフレームの左右の余白の指定
noresize noresize フレームのサイズを変更できなくする
scrolling auto スクロールバーが必要なとき表示(初期値)
yes スクロールバーを表示
no スクロールバーを非表示

重要となるのがname属性です、この属性を付けないでリンクを張ると同じフレーム内でしか移動できなくなります。
<frame name="main" src="index.html">
とフレーム名がmainの画面を移動させる場合、リンクは
<a href="URL" target="main">のように、target属性の値を移動させたいフレーム名を入れなければなりません。

無料ホームページ作成!メニュー

HTML

基本

HEAD要素内

文章

画像

リンク

リスト

フォーム

グループ

フレーム

その他

リンクについてお問い合わせ
無料ホームページ作成!HTML&CSS