WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <frameset>「フレームのウィンドウ分割」

<frameset> 「ページの分割定義」[読み方:フレームセット]

<frameset>タグはページの分割を定義できます。各ページの設定は<frame>で指定します。
<frame>はHTML5で廃止されました。<div>タグなどでスタイルシートを指定してください。

HTML規格HTML4.01HTML5
使用可否○(*2)×
(*2)DTDがStrict、Transitionalの場合は使用できない
広告

<frameset> の属性

【構文】
<frameset row="10%,30%,*"></frameset>
<frameset col="100,*"></frameset>
属性意味値のサンプルなど
col="値,値,・・・"横方向に分割する設定
ピクセル、パーセント,相対比率で指定する
「10%」「100」「*」「3*」
row="値,値,・・・"縦方向に分割する設定
ピクセル、パーセント,相対比率で指定する
「10%」「100」「*」「3*」
グローバル属性
  • 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

<frameset>タグのサンプル

<html lang="ja">
<head><title>フレームの縦横4分割例</title></head>
<frameset rows="100,*,120"> ← (1)
   <frame src="f_top.html" name="t1">
   <frameset cols="20%,*"> ← (2)
     <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

留意事項

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