WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <frame>「フレームの設定」

<frame> 「分割されたフレームのページ設定」[読み方:フレーム]

<frame>タグは<frameset>で分割されたページの表示方法(属性)を指定します。<frameset>~</frameset>の間に記述します。
<frame>はHTML5で廃止されました。<div>タグなどでスタイルシートを指定してください。

HTML規格HTML4.01HTML5
使用可否○(*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="値"フレームにスクロールバーを表示するかを指定
意味
yes常に表示する
no表示しない
auto自動判別する(初期値)
frameborder="値"フォームの境界線を表示するかを指定
意味
0境界線を表示しない
1境界線を表示する(初期値)
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<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>
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>
ページTOP

留意事項

  • <frame>タグは、HTML5で廃止されました。<div>とスタイルシートの組み合わせ(上記サンプル)や<iframe>を使用してください。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン