MB-Support

パソコン初心者のサポートページ

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 でアカウントを作成して良かったです。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項