CSSでブログデザイン

IE7が
・「透過PNG」
・「position: fixed;」
・「:hover」を指定できる要素の拡大
を採用したようです。

「透過PNG」は前回の書き込みを見てもらえばわかると思うので、
「position: fixed;」と「:hover」を指定できる要素の拡大を説明します。

「position: fixed;」とは、画面上の指定した位置に固定するスタイルです。
これを使うと画面をスクロールしても常に同じ位置に固定されるので、メニューなどを表示するのに大変便利です。
「:hover」はマウスカーソルが上に来たときのスタイルで、JavaScriptのonmouseoverと似たような物です。

IE6では「a:hover」（リンク部分にマウスカーソルが来たとき）しか使えませんでしたが、IE7からは様々な要素に使えるようになりました。
「div:hover」を使って、記事部分の色を変えたりサイドカラムの大きさを変えたりなど、いろいろなことがJavaScriptを使わずに出来そうです。


カスタマイブログの実験ページで、この新しい（と言ってもFirefoxやOperaでは以前から採用されてましたが）3つの機能を使ったメーニューを作りましたので、興味のある方は見てください。

対応ブラウザはIE7、Firefox、Operaです。
今までにはあまり見れなかった、ちょっと面白いメニューになりました。

IE6でしか見れない方は、続きのページでどのような感じのものか見てください。