cman.jpWEBページ作成
広告
<frame> 「分割されたフレームのページ設定」[読み方：フレーム]
<frame>タグは<frameset>で分割されたページの表示方法（属性）を指定します。<frameset>～</frameset>の間に記述します。
<frame>はHTML5で廃止されました。<div>タグなどでスタイルシートを指定してください。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○(*2) | × |
(*2)DTDがStrict、Transitionalの場合は使用できない
広告
<frame> の属性
【構文】
<frame src="sample1.html" name="frame01" ・・・>
| 属性 | 意味 | 値のサンプルなど | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| src"URI" | フレームに表示するページのURI | 「sample.cgi」 「http://cman.jp/abc.html」など | ||||||||
| longdesc="URI" | フレームに表示するページを説明する文書へのリンク | 「sample.cgi」 「http://cman.jp/abc.html」など | ||||||||
| name="名前" | フォームの名前 | 「frame01」「f001」など | ||||||||
| marginwidth="値" | フレーム内の横（左右）余白 ピクセル単位で指定 | 50 など | ||||||||
| marginheight="値" | フレーム内の縦（上下）余白 ピクセル単位で指定 | 50 など | ||||||||
| noresize | フレームのサイズを変更不可とする | 「noresize」 | ||||||||
| scrolling="値" | フレームにスクロールバーを表示するかを指定 |
|
||||||||
| frameborder="値" | フォームの境界線を表示するかを指定 |
|
| グローバル属性 |
| |
| イベント属性 |
| |
<frame>タグのサンプル
<html lang="ja">
<head><title>フレームの縦横4分割例</title></head>
<frameset rows="100,*,120">
<frame src="f_top.html" name="t1">
<frameset cols="200,*">
<frame src="fr_left.html" name="l1" frameborder="0">
<frame src="fr_right.html" name="r1" frameborder="0">
</frameset>
<frame src="frame_bottom.html" name="b1">
<noframes>
このページはフレームを使用しています。他のブラウザでご利用ください。
</noframes>
</frameset>
</html>
<head><title>フレームの縦横4分割例</title></head>
<frameset rows="100,*,120">
<frame src="f_top.html" name="t1">
<frameset cols="200,*">
<frame src="fr_left.html" name="l1" frameborder="0">
<frame src="fr_right.html" name="r1" frameborder="0">
</frameset>
<frame src="frame_bottom.html" name="b1">
<noframes>
このページはフレームを使用しています。他のブラウザでご利用ください。
</noframes>
</frameset>
</html>
DIVとCSSでframeを代替するサンプル（HTML5でも利用可能）
<html lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<style>
html {
height: 100%;
margin: 0;
}
body {
margin: 0;
padding-bottom: 120px;
padding-top: 100px;
}
body, .boxCal{
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 100%;
overflow: auto;
}
#frTop {
background-color: lime;
height: 100px;
width: 100%;
margin-top: -100px;
padding: 5px;
}
#frBottom {
background-color: yellow;
bottom: 0;
height: 120px;
position: absolute;
width: 100%;
padding: 5px;
}
#frMiddle { }
#frLeft {
background-color:aqua;
float: left;
width: 200px;
padding: 5px;
}
#frRight {
background-color:orange;
padding: 5px;
}
</style>
<title>フレームの縦横4分割例</title>
</head>
<body>
<div id="frTop" class="boxCal">TOPフレーム</div>
<div id="frBottom" class="boxCal">BOTTOMフレーム</div>
<div id="frMiddle " class="boxCal">
<div id="frLeft" class="boxCal">左フレーム</div>
<div id="frRight" class="boxCal">右フレーム</div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<style>
html {
height: 100%;
margin: 0;
}
body {
margin: 0;
padding-bottom: 120px;
padding-top: 100px;
}
body, .boxCal{
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 100%;
overflow: auto;
}
#frTop {
background-color: lime;
height: 100px;
width: 100%;
margin-top: -100px;
padding: 5px;
}
#frBottom {
background-color: yellow;
bottom: 0;
height: 120px;
position: absolute;
width: 100%;
padding: 5px;
}
#frMiddle { }
#frLeft {
background-color:aqua;
float: left;
width: 200px;
padding: 5px;
}
#frRight {
background-color:orange;
padding: 5px;
}
</style>
<title>フレームの縦横4分割例</title>
</head>
<body>
<div id="frTop" class="boxCal">TOPフレーム</div>
<div id="frBottom" class="boxCal">BOTTOMフレーム</div>
<div id="frMiddle " class="boxCal">
<div id="frLeft" class="boxCal">左フレーム</div>
<div id="frRight" class="boxCal">右フレーム</div>
</div>
</body>
</html>
留意事項
ページTOP| 関連するCSS(STYLE) | |
|---|---|
| background | 背景全般の設定 |
| border | 罫線の設定 |
広告