Firefox & IE 両対応 ビジュアル オブジェクトを透明にする
光の加減などは設定できませんが、透過だけなら Firefox 用 と IE 用 の Opacity を記入することで、統一する事が可能です。
設備が整っていないので、あまり乗り気では無かったのですが、YouTube と呼ばれる動画共有サイトでチャンネルを作成してみました。 チャンネルとは、アカウントを作成した時点で、自分のアカウント専用のページとなるのですが、このページのデザインを変更できます。
一般的なブログと異なるのは（あまりレンタルブログを知りませんが）、Transparency Level を自由に変更できるところです。 これはパーセントで指定しますが、背景画像が透けてみえる効果があります。 以前紹介した「ビジュアル オブジェクトを透明にする Filter Alpha」を利用して、Internet Explorer であれば透過する事は容易でしたが、単純に透過するだけなら Firefox でも可能な事を知りました。
HTMLソース(メモ帳)
<html>
<head>
<title>題名</title>
</head>
<body background="背景画像のアドレス">
<table>
<tr style="padding:0px; margin:0px;">
<td>
<div style="background-color:#ffffff; padding:20px; width:155px;">
A<img src="画像.PNG" width="100" height="104" />
</div>
</td>
<td>
<div style="Filter: Alpha(Opacity=50); background-color:#ffffff;
padding:20px; width:155px;">
B<img src="画像.PNG" width="100" height="104" />
</div>
</td>
</tr>
<tr style="padding:0px; margin:0px;">
<td>
<div style="opacity:.50; background-color:#ffffff; padding:20px; width:155px;">
C<img src="画像.PNG" width="100" height="104" />
</div>
</td>
<td>
<div style="Filter: Alpha(Opacity=50);opacity:.50; background-color:#ffffff;
padding:20px; width:155px;">
D<img src="画像.PNG" width="100" height="104" />
</div>
</td>
</tr>
</table>
</body>
</html>
ブラウザ
A:指定無し B:Filter: Alpha(Opacity=50); C:opacity:.50; D:Filter: Alpha(Opacity=50);opacity:.50;
上がサンプルの HTML ソースですが、ブラウザにより表示が異なるのでスクリーンショットで説明すると以下になります。
| IE | Firefox |
 |
 |
管理人は Firefox で透過ができる事を知らなかったので少しびっくり。少しなのは、管理人のサイトではあまり関係ないからです。 A , B , C , D の 4 つの内、Internet Explorer と Firefox の両方で透過になっているが D です。 ソースは
style="Filter: Alpha(Opacity=50);opacity:.50;"
となり、最初の Filter: Alpha(Opacity=50); は Internet Explorer が解釈でき、次の pacity:.50; は解釈できません。 一方、Filter: Alpha(Opacity=50); は Firefox では解釈できませんが、次の pacity:.50; を解釈できます。 pacity:.50;の数字の前に「.（ドット）」をつける必要があるようです。YouTube でアカウントを作成して良かったです。
