CSSによる画像切替（ロールオーバー）に成功！

以前のエントリー「#BLOG: CSSで画像を動的に切り替えるには？」で、横に画像を並べるタイプの画像切替（ロールオーバー）について書きました。そのときは、私の力だけでは完成せず、とは言ってもせっかく調べたので、調査内容をとりあえず公開していました。

すると親切にも、Momomoさんのブログ「Alternative Design Project」と、森田雄さんのブログ「securecatのMT」からトラックバックをいただき、いろいろと勉強させていただきました。

Momomoさんや森田雄さんのロールオーバー実現方法は……

CSSで画像を動的に切り替えるには？

CSSによる画像切り替え（ロールオーバー）について調べてみました。

InternetExplorerやNetscapeで動作するものは完成しましたが、残念ながらOperaで動作するものは作成できませんでした。

また、本サイトの上部のメニューのように画像が並ばせる場合、縦に画像を並べるのはうまくいきましたが、横に並べるのはうまくいきませんでした。

最終的に、私のサイトの上部のメニューについて言えば、「CSSによる画像切り替えは使えない」という結論に達しました。（後日、解決→「#BLOG：CSSによる画像切替（ロールオーバー）に成功！」）

ですが、せっかく調べたので、参考資料として作ったHTMLを公開します。

MTで印刷用ページを作成するには？

Movable Typeで、印刷用ページを作成する方法を紹介します。
（Movable Typeを使っていなくても、CSSを使っていれば同様のことができます。）

次の画面のようなWebページをそのまま印刷すると、不要なものが印刷されたり、用紙からはみ出てしまう場合があります。

そこで、印刷の時だけ印刷用のページ レイアウトで表示するようにします。
次の画面は、その例です。余分な項目は削除され、固定幅だとはみ出る場合があるので、固定幅が解除されています。

（なお、今、参照している本サイトのページを印刷プレビューすると、印刷ページとWebページのレイアウトの違いを実際に確認できます。）

印刷用のページ レイアウトを作成するのはとても簡単です。