DN*blog

色々なサンプルを試してみてそのままにしているのももったいないので、Demoページを作ってそこに保管しておくことにしました。
まだ、透過PNGの項目しかないですけど、色々追加していきますので皆様のご参考になればと思います。

Demoページは下の方にあるメニューからいけます。

Demoページへ行ってみる。

うーん。
やっぱりメニューへいけるアンカーリンクをつけたほうがいいかな・・・。

<code></code>内に書き込まれたソースコードに色を付けてくれるJavaScriptライブラリ。
jQueryベースでできています。

言語も指定する事ができる。
<code class=”html”></code>や<code class=”css”></code>等とクラスを付ける事によってそれに合わせた色をつけてくれる。

用意されている言語は、C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, XHTMLなどがある。

一応導入してみたんですけど、IEだとなぜか改行されないで表示されてしまう・・・。
ソースをみると「<br />」は記述されているみたい。
なんでだろ。。。

サンプル（CSS）

h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
#wrapper {
width:770px;
text-align:left;
font-size:92%;
margin:0 auto;
}

サンプル（html）

<code class="html">
<div id="header">
<h1>タイトル</h1>
</div>
</code>

という具合に色づけ出来ます。
背景が黒だと見づらいですね・・・。

こちらからダウンロード出来ます。
Notes Log - Chili 2.2

ちなみに、WordPressユーザーにはプラグインもあるようです。
WP Chili

まず注意しないといけないのが、IEへの対策。
IE6以下は透過PNGに対応していないので背景が真っ白で表示されてしまう。
対応策は色々あるけど、今回は使い勝手もいいスクリプトを用いた対応策をご紹介します。

demoサイト

使ったスクリプトを提供しているサイト。
Post Production - A Better IE 5.5 and 6 PNG Fix

上記サイトの「Get the code」からソースをダウンロード。
ダウンロードしたファイルを任意のフォルダにいれておく。

コードはCSSを利用してHTML内の画像要素に適用させる。

CSSソース

img {
    behavior:url(任意のパス/fx-iepngfix.htc);
}

上記のソースだと全てのimg要素に対してスクリプトが適用される。
背景画像などに適用させたいときは、

.contents {
    behavior:url(任意のパス/fx-iepngfix.htc);
    background:url(任意のパス/sample.png) no-repeat top left;
}

などと記述すればよい。

これでお手軽にIE6以下でも透過PNGを利用することができる。

スクリプトは他にもあるので自分が使いやすいものを利用して透過PNGを有効活用してみてください！
代表的なものを他に2点あげておきます。

TwinHelix - IE PNG Fix v1.0 / 2.0 Alpha 3

jQuery JavaScript Library - jquery.pngFix.js

ちなみに、当ブログでも透過PNGを使っていますが、使っているスクリプトは「IE PNG Fix」を使っています。
今回は、あえて自分の使っていない物をご紹介しましたが、「A Better IE 5.5 and 6 PNG Fix」は使用するファイルがスクリプトファイルのみなので始めて透過PNGを使う方にはオススメかもしれません。