IE6でpngファイルをキレイに表示させる

透過pngファイルの表示ですが、InternetExplorer6では対応していません。でも、最近のデザインではpngも使いたいし・・・という方にオススメのjsがあります。

Unit PNG Fix

こちらのサイトでダウンロードできるファイルに「unitpngfix.js」というjsがありますので、外部読み込みで各ページにリンクさせればOKです。また、「clear.gif」という画像ファイルも必要ですのでアップしましょう。

::::: HTML表記 :::::
◎ヘッダー内に記入します。パスを間違えないように。
<script type="text/javascript" src="../js/unitpngfix.js"></script>

::::: Javascript :::::
◎unitpngfix.js 1行目のパスを確認しましょう。以下のように画像名を変えてもOK！
var clear="../img/spacer.gif" //path to clear.gif

フォーカスされたフォームオブジェクトの色を変える

◎ワンポイントメモ
※inputの後ろに[type="text"]をつけることで、テキストフィールド以外に適用されません。
※focusは残念ながらIE7までは対応していません（泣）。IE8は対応になるようです。

::::: CSS表記 :::::
.sample005 {
margin:0px;padding:10px;
line-height:1.8em;
}
.sample005 form {
margin:0px;padding:0px;
}
.sample005 input[type="text"] {
border:1px solid #0000CC;
background-color:#FFFFFF;
}
.sample005 input[type="text"]:focus {
border:1px solid #FF6600;
background-color:#FFFFCC;
}

::::: HTML表記 :::::
<div class="sample005">
<form>
氏名：
<input type="text" name="textfield" value="" />
<br />
住所：
<input type="text" name="textfield" value="" />
<br />
電話：
<input type="text" name="textfield" value="" />
<br />
<input type="submit" name="Submit" value="送信" />
</form>
</div>

テキストリンクに背景色

::::: CSS表記 :::::
a:link　　　{color:#0066CC;}
a:visited　 {color:#009999;}
a:hover　　 {color:#FF3300;text-decoration:none;background-color:#FFFFCC;}
a:active　　{color:#FF3300;text-decoration:none;background-color:#FFFFCC;}