フレーム
frame
フレーム
2008/3/26
構文
<frame> ～ </frame>
説明
frame要素は、frameset要素の子フレームを表す要素です。
src属性に子フレーム内に表示するページのURIを指定します（URIは相対パスでも絶対パスでもOK）。
frame要素は、空要素のため<frame />のように記述します。
frameset要素、frame要素は、「XHTML 1.0 Frameset」でのみ使用可能です。
- フレームを使用する場合は、親フレームの文書型を「HTML 1.0 Frameset」にしましょう。
- フレーム内に読み込むページ（frame要素のsrc属性に指定したURI）の文書型は、Framesetにする必要はありません。
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| コア属性 | F | - | 任意 | ||
| longdesc="%URI" | フレーム文書が定義されている文書のURIを指定。 | F | - | 任意 | |
| name"%NMTOKEN" | フレームの名前を指定。 | F | - | 任意 | |
| src="%URI" | フレームに読み込むページのURI（相対パスまたは絶対パス）を指定。 | F | - | 任意 | |
| noresize="noresize" | フレームのリサイズを禁止する場合に指定。 | F | - | 任意 | |
| scrolling="yes | no | auto" | フレームのスクロール方法を指定。スクロールを許可する場合は"yes"、スクロールを禁止する場合は"no"、ブラウザの解釈に任せる場合は"auto"（自動）を指定。 | F | - | デフォルトは"auto"（自動） | |
| frameborder="1 | 0" | フレームの枠線を指定。枠線なしの場合は"0"を指定。枠線ありの場合は"1"（デフォルト値）を指定。省略した場合は、デフォルト値が適用されます。 | F | - | "1" | CSS（borderプロパティ）で代替。 |
| marginwidth="%Pixels" | フレーム内の左右余白を指定（単位：px）。 | F | - | 任意 | CSS（paddingプロパティ）で代替。 |
| marginheight="%Pixels" | フレーム内の上下余白を指定（単位：px）。 | F | - | 任意 | CSS（paddingプロパティ）で代替。 |
サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>フレームの書き方</title>
</head>
<frameset cols='30%,70%'>
<frame src="left.html" />
<frame src="right.html" />
<!-- フレーム未対応のユーザーには、代替テキストが表示される -->
<noframes>
<body>
<p>フレーム対応のブラウザでご覧下さい。</p>
</body>
</noframes>
</frameset>
</html>
frameset
フレームセット
2008/3/26
構文
<frameset> ～ </frameset>
説明
frameset要素は、フレームをどのように分割するか、フレームの定義を表す要素です。 frameset要素には、frame要素またはnoframes要素が1回以上出現する必要があります。
フレームの分割方法は、cols属性（横方向の分割）およびrows属性（縦方向の分割方法）に指定します。
分割方法は、%値またはpx値をカンマ区切りで指定します。
例えば、横2分割の場合はcols="30%,70%"、横3分割の場合はcols="30%,30%,40%"のようになります。
frameset要素、frame要素は、「XHTML 1.0 Frameset」でのみ使用可能です。
- フレームを使用する場合は、親フレームの文書型を「HTML 1.0 Frameset」にしましょう。
- フレーム内に読み込むページ（frame要素のsrc属性に指定したURI）の文書型は、Framesetにする必要はありません。
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| コア属性 | F | - | 任意 | ||
| rows="カンマ区切りの分割方法" | 縦方向の分割方法。%またはpx単位で指定。 | F | - | 任意 | |
| cols="カンマ区切りの分割方法" | 横方向の分割方法。%またはpx単位で指定。 | F | - | 任意 | |
| onload="%Script" | フレームが読み込まれた時に実行する処理を指定。 | F | - | 任意 | |
| onunload="%Script" | フレームが閉じられたあるいは別のページに移動した時に実行する処理を指定。 | F | - | 任意 | |
サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>フレームの書き方</title>
</head>
<frameset cols='30%,70%'>
<frame src="left.html" />
<frame src="right.html" />
<!-- フレーム未対応のユーザーには、代替テキストが表示される -->
<noframes>
<body>
<p>フレーム対応のブラウザでご覧下さい。</p>
</body>
</noframes>
</frameset>
</html>
iframe
インラインフレーム
2008/3/26
構文
<iframe> ～ </iframe>
説明
iframe要素は、他のWebページの埋め込みを表すインライン要素です。
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| コア属性 | TF | - | 任意 | ||
| longdesc="%URI" | インラインフレーム文書が定義されている文書のURIを指定。 | TF | - | 任意 | |
| name="%NMTOKEN" | インラインフレームの名前を指定。 | TF | - | 任意 | |
| src="%URI" | インラインフレーム内に表示するページのURIを指定。 | TF | - | 任意 | |
| scrolling="yes | no | auto" | インラインフレームから内容がはみ出た場合のスクロールバーの表示方法を指定。スクロールバーを表示する場合は"yes"、スクロールバーを表示しない場合は"no"、ブラウザの解釈に依存する場合は"auto"（デフォルト値）を指定。省略した場合は、デフォルト値が適用されます。 | TF | - | "auto" | |
| frameborder="1 | 0" | インラインフレームの枠線を指定。枠線なしの場合は"0"を指定。枠線ありの場合は"1"（デフォルト値）を指定。省略した場合は、デフォルト値が適用されます。 | TF | - | "1" | CSS（borderプロパティ）で代替。 |
| marginwidth="%Pixels" | インラインフレーム内の左右余白を指定（単位：px）。 | TF | - | 任意 | CSS（paddingプロパティ）で代替。 |
| marginheight="%Pixels" | インラインフレーム内の上下余白を指定（単位：px）。 | TF | - | 任意 | CSS（paddingプロパティ）で代替。 |
| align="%ImgAlign" | インラインフレームの上下・左右方向の整列位置を指定。 | TF | - | 任意 | CSS（floatプロパティ、vertical-alignプロパティ） |
| height="%Length" | インラインフレームの高さを指定（単位：%またはpx）。 | TF | - | 任意 | CSS（heightプロパティ）で代替。 |
| width="%Length" | インラインフレームの幅を指定（単位：%またはpx）。 | TF | - | 任意 | CSS（widthプロパティ）で代替。 |
iframe要素のframeborder属性、marginwidth属性、marginheight属性、align属性、width属性、height属性はCSSで代替可能です。
サンプルを見る
<style type="text/css">
iframe#ifrm {
width:440px; /* インラインフレームの幅 */
height:200px; /* インラインフレームの高さ */
padding:10px; /* インラインフレーム内の上右下左余白 */
border:1px solid #000; /* インラインフレームの枠線 */
background-color:#999;
}
</style>
<iframe
id="ifrm" name="ifrm"
src="http://www.mozilla-japan.org/"
scrolling="auto"
>
インラインフレーム対応のブラウザでご覧下さい。
</iframe>
iframe要素は、XHTML 1.0 Strict および XHTML 1.1 で廃止されました。 そのためインラインフレームを埋め込む場合は、object要素で代替します。 IEはobject要素未対応のため、条件付コメントで括り、IE以外の場合に表示するようにしておきましょう。
サンプルを見る
<!--[if !IE]> <-->
<object type="text/html" data="http://www.mozilla-japan.org/" width="100%" id="ifrm">
<p>オブジェクトなし</p>
</object>
<!--> <![endif]-->
<!--[if IE]>
<p>
オブジェクトが埋め込まれていますが、IEだとobject要素未対応のため何も表示されません。
IE以外のブラウザでみるとインラインフレームが表示されます。
</p>
<![endif]-->
サンプル
<iframe name="ifrm6" src="http://www.mozilla-japan.org/"
width="100%" height="200px"
scrolling="yes" frameborder="0"
align="left"
marginwidth="10"
marginheight="10" >
インラインフレーム対応のブラウザでご覧下さい。
</iframe>
noframes
フレーム未対応ユーザ向けの代替テキスト
2008/3/26
構文
<noframe> ～ </noframe>
説明
noframes要素は、フレーム未対応ユーザー向けの代替テキストを表すブロック要素です。 frameset要素内に記述します。 noframes要素には、body要素が1回出現する必要があります。
属性
固有の属性はありません。
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | - | STF | S | 任意 | style属性はCSSで代替。 |
サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>フレームの書き方</title>
</head>
<frameset cols='50%,50%'>
<frame src="left.html" />
<frame src="right.html" />
<!-- フレーム未対応のユーザーには、代替テキストが表示される -->
<noframes>
<body>
<p>フレーム対応のブラウザでご覧下さい。</p>
</body>
</noframes>
</frameset>
</html>