web material *Essence

  1. Home
  2. DesignTips
  3. OtherTips › iframe

Inline Frame

インラインフレーム

<iframe>はinline frameの略です。1つのページ内に別のページを入れ子に配置して表示させる事ができます。
src属性でフレーム内に表示するurlを指定し、name属性でフレームに名前を付けることでインラインフレームをリンクの表示先として指定することもできます。

<iframe 属性="属性値"></iframe>(HTML5)
<iframe 属性="属性値">iframeを利用できないブラウザ用に代替内容を記述</iframe>
(HTML5ではiframe未対応ブラウザ用の代替テキストは不要になりましたが、有っても問題ありません。)

インラインフレームの背景透過

iframe内でbackground-colorを指定しない場合 親ページの背景指定が有効になりますが、IE8以前では透過が反映しません。
IE8以前のブラウザに背景を透過をさせるには、配置するページのiframe要素に allowtransparency="true" を指定し、表示される側のbody要素にスタイルシートで background-color: transparent; を指定すると、インラインフレームの背景を透過させることができます。 (しかし、現在IE8以前のバージョンで閲覧されている方はかなり減っていると思われます。)

<iframe src="sample1ページurl">
この部分は iframe 対応のブラウザで見てください。
</iframe>
<iframe src="sample1-2ページurl" allowtransparency="true">
この部分は iframe 対応のブラウザで見てください。
</iframe>
body{
   background-color: transparent;
}

インラインフレームの半透明化

DesignTipsの半透明部品と同様に、opacityやRGBAカラーモデルを使ってiframeを半透明にすることができます。

<iframe class="sample2-1,2" src="sample2-1,2ページurl">
この部分は iframe 対応のブラウザで見てください。
</iframe>
(インラインフレーム内に表示する側の背景色や背景画像は未指定にしてください。)
.sample2-1{
   background-color: #ffffff; /* 透過したい背景色 */
   opacity: 0.5; /* 透過度(50%) */
}
.sample2-2{
   background-color: rgba(255,255,255,0.5); /* 透過したい背景色 */
}

RGBAについてと数値取得ツールがDesignTipsの『RGBA変換ツール』のページに有るのでご利用下さい。

HTML4.01からHTML5への変更点

align属性・frameborder属性・scrolling属性・marginheight属性・marginwidth属性・longdesc属性が廃止され、代わりに新しくsrcdoc属性・sandbox属性が追加されました。

属性値 説明 サポート
align="数値" iframeを表示する位置を指定(top,middle,bottom,left,right) 4.01非推奨 HTML5廃止
src="url" iframe内に表示するurlを指定 HTML4~  
name="*" iframeの名前 HTML4~  
frameborder="*" iframe枠線の有無(yes,no,auto,1,0) HTML4 HTML5廃止
scrolling="*" スクロールバーの有無(yes,no,auto 省略時はauto) HTML4 HTML5廃止
marginheight="数値" iframe内の上下の余白(ピクセル数) HTML4 HTML5廃止
marginwidth="数値" iframe内の左右の余白(ピクセル数) HTML4 HTML5廃止
longdesc="URL" 長文の説明や代替コンテンツが必要になる場合のURLを指定 HTML4 HTML5廃止
height="数値" iframeの高さ([HTML5]ピクセルまたは[HTML4.01]ピクセルかパーセンテージで指定) HTML4~  
width="数値" iframeの横幅([HTML5]ピクセルまたは[HTML4.01]ピクセルかパーセンテージで指定) HTML4~  
srcdoc="フレームの内容" インラインフレームの内容を属性値として記述(HTMLタグ使用可。詳細は下記参照元をご覧下さい) HTML5
sandbox="値" インラインフレーム内のコンテンツにセキュリティ上の制限をかける(値についての詳細は下記参照元をご覧下さい) HTML5
グローバル属性 すべての要素で使用できる属性(詳しい解説は下記参照元をご覧下さい) HTML4~ HTML5追加

参照:MDN web docs - html|iframe
CreatorQuest HTMLreference - グローバル属性