投稿日: | 最終更新日:
透過PNGがサポートされていないIE6の対処方法
IE6(Internet Explorer6)で透過PNGを対処する方法を紹介します。
透過PNGとは?
透過PNGとは、PNGの機能を用いて画像の一部を透明または半透明にした画像のことです。マイピクチャや一部のグラフィックソフトなどでは、透過部分が白とグレーの市松模様で表示されます。
しかし、透過PNGは、IE6ではサポートされていません。IE7以降のブラウザで透過PNGを表示すると、透過の部分は背景の色になります。
IE6では、透過の部分が灰色になってしまいます。
DD_belatedPNG.jsなどのJavaScriptを利用して対応します。
ダウンロード
①以下の配布元サイトを開きます。
②最新版の「DD_belatedPNG 0.0.x」と書かれた記事までスクロールします。
例)2015年1月現在では、DD_belatedPNG 0.0.8a releasedと書かれています。
③その記事にあるリンク「http://dillerdesign.com/experiment/DD_belatedPNG/#release0.0.8a」を開きます。
④すると配布用記事の中段辺りに飛ばされます。
少し上にスクロールすると、緑色の四角ボタンがありますので、クリックします。
※「0.0.8a.js」と、「0.0.8a-min.js」ボタンの2つがあります。
- 前者は通常版で、後者は圧縮版です。
- 解析する場合は、「0.0.8a.js」(通常版)を選びます。
- 解析不要な場合は「0.0.8a-min.js」(圧縮版)を選びます。
⑤JavaScriptが表示されます。
- 右クリックで「このページのソースを表示」をクリックします。
- 表示されたソースを全てコピーし、新規テキストにペーストして、名前を「DD_belatedPNG.js」として保存します。
コード
DD_belatedPNG.jsを利用してIE6の透過PNGに対処するには、以下のようにコーディングします。
index.htmlにDD_belatedPNG.js読み込み
<!--[if IE 6]> <script src="○○○/DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('img, .png_bg'); </script> <![endif]-->
- </head>の直前に記述します。
- 「<!–[if IE 6]>」で、IE6にだけこのスクリプトを実行すると宣言します。
- 「<script src=”○○○/DD_belatedPNG.js”></script>」で「DD_belatedPNG.js」をリンクします。
- 「DD_belatedPNG.fix(‘img, .png_bg’);」は、jsを反映させる要素名、id名、クラス名を記入します。
上記の例では、「img要素全て」と「png_bgというクラス名の要素」に対してDD_belatedPNG.jsが動作します。
※DD_belatedPNG.js内部で画像がpng形式かどうかの判別を行っています。
gifやjpgへの影響はありません。
divやpの背景に使用する
#foo {background:url(bg.png) repeat left top;}
<div id="foo" class="png_bg"> <p>テキストテキストテキスト</p> </div>
- 背景にpng画像を指定します。
- 要素にhead内で設定したクラス名「class=”png_bg”」を記述します。
※1 body・tr・td要素の背景には使えません。
ページ全体にpng画像の背景を設定する場合、全体を<div id=”wrap”></div>などで囲み、背景を設定して下さい。
※2 「background-position:fixed;」には未対応の模様です。
img要素に使用する
#rollover01 {width:○○○px;height:○○○px;} a#rollover01:link {background:url(mouse_on.png);} a#rollover01:visited {background:url(mouse_on.png);} a#rollover01:hover {background:url(mouse_off.png);} a#rollover01:active {background:url(mouse_off.png);}
<a href="http://○○○.html" id="rollover01" class="png_bg"></a>
- png画像のimg要素を<a>で囲み、リンクボタンとしてimgタグをロールオーバーする場合注意が必要です。
- imgタグに「onmouseover=」て指定しても動作しません。
- ロールオーバーする場合、上記のようにCSSだけでロールオーバーを再現します。
a:link 未訪問リンクのスタイルを指定します。
a:visited 訪問済みリンクのスタイルを指定します。
a:hover カーソルは乗っているがクリックはされていない状態のスタイルを指定します。
a:active クリックされてから離されるまでのスタイルを指定します。
jQueryのフェードイン・アウトを指定しても反応しない仕様です。
- Python 88
- 制作 56
- RaspberryPi 41
- WordPress 40
- Django 32
- Linux 24
- VPS 22
- PHP 20
- JavaScript 20
- HTML・CSS 18
- 仮想環境 15
- レスポンシブデザイン 13
- WEB全般 11
- AWS 10
- マイコン 9
- Webサービス 8
- 統合開発環境 8
- 起業・設立 7
- jQuery 7
- SEO 6
- C# 6
- 携帯サイト 5
- heroku 5
- デザイン 5
- PyCharm 5
- symfony 4
- node.js 4
- 機械学習 4
- illustrator 4
- Mac 4
- Visual Studio 4
- ツール 3
- データベース 3
- facebook 3
- Go言語 3
- PC 3
- Docker 3
- 作業効率化 3
- Webスクレイピング 3
- photoshop 3
- Cloud9 3
- インフラ 3
- Webサーバー 2
- movie 2
- ネットワーク 2
- Java 2
- ドローン 2
- コンテナ 2
- Kali Linux 2
- コマンド 2
- XSERVER 2
- MariaDB 2
- 動画製作 2
- DaVinci Resolve 2
- 知識 1
- アフィリエイトノウハウ 1
- スマートフォン 1
- アクセス解析 1
- windows 1
- 役立つ本・書籍 1
- git 1
- アニメ 1
- Rhino 1
- D3.js 1
- アニメーション 1
- TypeScript 1
- データサイエンス 1
- Nginx 1
- ownCloud 1
- ESP32 1
- API 1
- ネットワーク 1
- pydata 1
- ムームードメイン 1
- S3 1
- JSON 1
- Bootstrap 1
- SSL 1
- 音楽 1
- PCDJ 1
- バージョン管理システム 1
- 数学 1