[新着] Webテンプレートを仮オープンしました
iframeタグに allowtransparency="true" を指定すると、インラインフレーム内の背景を透明にすることができます。
この指定を行うと、メインページの背景の設定がインラインフレーム内にも適用されるようになります。
<iframe src="example.html" allowtransparency="true"> 〜 </iframe>
| allowtransparency="" | true … （背景を透過します） |
|---|---|
| false … （背景を透過しません）デフォルト |
透過の指定を有効にするには、同時に以下の指定を行っておく必要があります。
■インラインフレームに読み込まれるページの指定
インラインフレーム内に表示されるページのbodyタグに、スタイルシートで次の内容を指定しておきます。
<body style="background-color: transparent;">
background-color … 背景色を指定するプロパティ
transparent … 透過を指定
スタイルシートを使わない次の指定方法もありますが、
<body bgcolor="transparent">
この指定方法はIE以外では対応していないので、FirefoxやOperaなどでは意図しない背景色で表示されてしまいます。（transparent が不正なカラーネームとして認識されてしまう？ようです）
allowtransparency属性はIE5.5以上で対応しています。スタイルシートによる透過方法の詳細は「関連ページ」をご覧ください。
■メインページ（インラインフレームを指定するページ）
<html>
<head>
<title>TAG index Webサイト</title>
</head>
<body background="image/back.gif" bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<p><iframe src="iexample_k.html" width="300" height="150" allowtransparency="true">サンプル</iframe></p>
<p>メインのページには背景画像を指定しています。</p>
</body>
</html>
■インラインフレームに読み込まれるページ（iexample_k.html）
<html>
<head>
<title>インラインフレーム内のページ</title>
</head>
<body style="background-color: transparent;">
<p>透過に対応しているブラウザでは、インラインフレーム内にも背景画像が表示されます。</p>
・
・
・
</body>
</html>
▼これをブラウザで見ると次のように表示されます
