最近のお気に入りのWEB関連本。

差がつくWEBデザインの技

デザインだけではなく、JavaScriptを使った“気の利いた小技”がいろいろと掲載されていて、サンプルを試してみるだけでも結構楽しい。

単なる遊びだけではなく実戦向きのテクニックも掲載されているため、「今までとはちょっと違うページにしたい」と思ったときに役に立つ。

今回やってみたことは「画像と文字の拡大」である。

アクセシビリティ絡みの取り組みの中で「文字拡大」については、JavaScriptを使う方法を試した後、JavaScriptを使わない方法で上手くできたため、それで落ち着いた。

「他とはちょっと違うページになった」という点にはそれなりに満足していたが、技術者としては「文字拡大だけ」という機能に不満があった。

「まっ、そのうちブラウザ側で全部対応してくれるさ。Web標準に準拠したページにしておけば問題ない。」というのが『仕事』としては正解だろう。今現在なんとかしたいというのは『趣味』の範囲である。

趣味ならば「チャレンジあるのみ」でいけるので気楽。

『差がつくWEBデザインの技』に掲載されていた「ドロップダウンメニューでページサイズを変更する」(IE5.5以降でサポート)を動かしてみると…………

これはスゴイ!!

さっそくやってみるか。

と取り組んでみたものの、いきなりのつまづいた。サンプルはあくまでもサンプルであり、自分のページに使うためには「機能」を理解して取り組むべし。

サンプルの記述
document.body.style.zoom = size;
これは「CSSのzoomプロパティ」とのこと。(styleと書いてあるから当然か)
ならばこれもJavaScriptを使わずに実現可能である。

さっそく「青空写楽」に組み込んでみた。

IEの場合に「文字と画像のサイズ ： 大きくする | 元に戻す」が表示され、IE以外の場合は「文字の大きさ ： 大きくする | 元に戻す」が表示される。

IEの場合に「大きくする」を選択すると「bigbody.css」が適用される。
bigbody.cssの中身
#banner {
  zoom: 200%;
}
#pagebody {
  zoom: 200%;
}

IE以外の場合に「大きくする」を選択すると「bigfont.css」が適用される。
bigfont.cssの中身
body {
  font-size: 160%;
}

文字だけではなく画像も大きくなるというのは結構面白い。

こんなことをしなくても、IE7には標準装備機能だけどね。

ツイート