Webの記録

IE6で透過pngを表示してみました♪

投稿日:

この記事は約 3 分で読めます。

IE6対策をいつまですれば良いのかなぁというところですが、まだもう少しIE6を意識してサイトを作ってます。
今回は、IE6ではキレイに表示されない透過pngをキレイに表示する方法にチャレンジしてみました。

いくつかの方法があると思いますが、導入が簡単でMITライセンスの「DD_belatedPNG.js」というJavascriptライブラリを使ってみる事にします。

主な特徴

  • IE6でも透過pngが表示出来る
  • VMLという技術を使っている
  • 似たようなスクリプトのAlphaImageLoaderと比べて高速なので、ページをすぐに表示できる。
  • 導入が楽!
  • MITライセンス
  • 背景リピートに対応
  • img要素に指定した場合、他のライブラリで実装する「フェードイン」「フェードアウト」の視覚的効果が実行されない。

設置方法

DD_belatedPNG.js」をダウンロードします。

headerの記述。

1行目はIE6以下に対しての記述です。
2行目のsrcはDD_belatedPNG.jsのパスを記述します。

<!--[if lte IE 6]>
  	  <script type="text/javascript" src="js/DD_belatedPNG.js"></script>
  	  <script type="text/javascript">
//指定するid、class名を記述する。bodyのidやclass名と一致させる。
	  	DD_belatedPNG.fix('.png_img');
	  </script>
 <![endif]-->

htmlの記述。

適用したい要素に上記で指定したidまたはclassを設定します。

画像の場合
<img src="images/sample.jpg" width="100" height="200" class="png_img" />
背景の場合
<div class="png_img">sample</div>

記述はコレだけです。
DD_belatedPNG.js使用前は、IE6で透過表示されず下記のように画像の周りにグレーの枠が出来てました。

DD_belatedPNG.jsを使う前のIE6での透過png

DD_belatedPNG.jsを使うと・・・とても簡単に透過pngを表示出来ました!!
DD_belatedPNG.jsを使った後のIE6での透過png

-Webの記録
-, , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

FileZillaの転送キュー(キーファイル)をクリアする方法

この記事は約 1 分で読めます。 Webサイトをサーバーにアップする時、またサーバーにあるファイルをバックアップとる時など、私は「FileZilla(ファイルジラ)」というFTPソフトを利用しています …

no image

苦手なJavaScriptをイチから勉強してみる【JavaScriptを外部ファイルにする】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【関数編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しずつメ …

no image

WordPressのオベンキョウ①

WordPressで、自分のサイトを作る事にしました。

no image

スマホサイトの画像コピーガード対策

この記事は約 1 分で読めます。 スマホ向けのサイト制作の機会が増えました。 PC向けの時にいろいろとしていた画像コピーガード対策も、スマホ対応しなくてはならなくなってきました。 画面の長押しすると、 …

no image

サイトマップを作ってみた♪

この記事は約 1 分で読めます。 Webサイトを作った後にするコト。 検索エンジンにページの存在を知らせ、クローラーの巡回を促すために作る「sitemap.xml」を作りたいと思います。 いくつもある …