イテルの一日一問

IE6で透過PNG画像を使用する

イテル on 07 22, 2009

またまた伊藤商店で使用したcssのチップス。
今日は透過PNGの処理。

結構面倒だと思っていたため、今まで避けておりましたが
ちょっとかっちょいいことしたいと思うと避けて通れないため
この機会に学習してみることにした。

safari、firefox、ie7以上では透過PNGはそのまま
利用できるが、IE6はそのままでは使用できない。

今回は背景にPNGを指定してIE6以外のブラウザはそのまま表示させ、
IE6はフィルターを通して画像を表示させるという技。

説明は、cssのみで。

IE6以外のブラウザ

	#header h1 a {
	height:30px;
	width:130px;
	background-image:url(images/logo.png);
	background-position:left top;
	background-repeat:no-repeat;
	text-indent:-9999px;
	float:left;
	margin:0 30px 0 0;
	}

IE6のみ読み込み

	/* IE6のみ */
	background:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/images/logo.png', sizingMethod=scale);
	/*ファイルはフルパスでした方がいいかも*/
	text-indent:inherit;
	cursor:hand;

ついでに、IE6だけ読み込ませる際のHTMLの処理

HTML内でハックを使わずブラウザの分岐方法

<!--[if lt IE 7]>
	<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen">
<![endif]-->

※IE7未満のブラウザを対象（7含まず）。

ファイルのパスはフルパスで指定しないと表示できなかった。
wordpressのテーマで使用したからかもしれんけど。

また、aタグに書いているのだが、カーソルがそのままだったので、
handを指定した。

具体的に知りたい方は、webdesigningの7月号を参照してちょ。