フレーム
frame
フレーム
2008/3/26
構文
説明
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要素には、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要素は、他の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
構文
説明
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>