CSSでブログデザイン

IE6では使えない psition:fixed;（ボックスを画面上の任意の地点に固定する）を実現する方法です。

今までbodyをheight:100%にする方法はありましたが、レイアウトが複雑になってくると不具合がおきることが多かったので、使わずにいました。
ところがもっと簡単な方法があったんですね。ただしJavaScriptがONになってないと使いませんが。。。

position: fixed;
top: 0;
left: 0;
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop+0));

IE6以外のブラウザではアンダースコア( _ )の付いたスタイルは無視するので、普通にfixedが適用されます。

IE6ではスクロールのたびにtopの座標を画面の上部から0pxに指定するので、absoluteでもfixedと同じ効果が生まれます。
ただしこのままだとスクロールのたびに固定したボックスがガタガタしますので、以下のようにbodyの背景にfixdを指定してやると解決します。
body {
background: url(null) fixed; /* 画像はあっても無くても可 */
}

参考サイト
IEで固定座標を指定する方法

前回IE6で透過PNG画像を表示させる方法を書きましたが、今回はメニューの背景画像などをロールオーバーさせる方法です。

よくあるマウスONとマウスOUTの画像をひとつにまとめて作成し、背景画像のポジションチェンジによって画像が入れ替わったように見せるあれです。

IE6で透過PNG画像を使うときは背景画像のポジションが指定できないので無理かと思ってたのですが、画像が入った要素（ボックス）自体を動かしてやれば可能なことに気が付きました。

詳細はこちらから
IE6の透過PNGメニューロールオーバー

今回のテンプレ「png」にも使っているように、透過PNGに対応していないIE6できちんと透過させる方法です。

参考サイト
１、CSS TIPS 「アルファ画像を表示する」
２、[to-R] 「アルファ画像を扱うalphafilter.jsライブラリ」
３、ユンサンの／융상의／YungSang's 「透過PNG と IE と IE7」

１は直接Styleを指定して表示させる方法。
２と３は外部ファイルを利用してページ内のPNG画像を自動的に判別して透過処理を行なう方法です。

ブログのテンプレ作成時にはひとつひとつ指定したほうがやりやすかったので、１の方法を参考にしました。
この方法はJavaScriptがOFFになっていてもActiveXがOFF（セキュリティーレベル高）になっていなければ表示できます。

詳しい解説はこちら
IE6で背景画像に透過PNGを使用する

先日発表されたAppleのWin版Safariですが、Version 3.0.4 になって随分使いやすくなりました。ブラウザとしての性能はかなり高いので、これからシェアが上がってくるかもしれません。

CSSは今のところ大きな問題はありませんが、JavaScriptで幾つか気になる点があります。

ブラウザの表示範囲を計る時は
　　window.innerHeight　window.innerWidth　を使用。

背景画像のStyleを取得するときに何も指定されていない部分は「initial」と言う値を返してくる。
　　body { url('xxx.jpg') #000000 }　の場合
　　document.body.style.backgroundの値は
　　url('xxx.jpg) rgb(0,0,0) initial initial initial initial が返ってきます。
※Version 3.0.3までの話し。3.0.4では直ってました。

Safari判別スクリプトは
　　if (navigator.vendor == "Apple Computer, Inc.")


Windows版Safari（パブリックベータ）は
http://www.apple.com/jp/safari/download/
こちらからダウンロードできます。


2007/11/17追記
日本語化ファイルを作成している方がいらっしゃいました。
Using Windows: Safari 3.0.4 (523.12.9)を使ってみた。
こちらのページから入手できます。

ご無沙汰しております。

ほぼ一年ぶりにテンプレートを作ってみました。すでにこのブログは新しいテンプレに変わっていますが、今細かなところを修正中なのでもう少ししたら申請できると思います。

今回のテンプレはかなり気合が入ってますよ！特にIE6では難しかった透過PNG画像を使いまくっています。

では登録されるまでもうしばらくお待ちください。