お知らせ
2008年6月24日
「作って覚えるPHP+MySQLアプリケーション」が発売されました。
PHP＋MySQL＋Smartyを使って、ブログ／ショッピングサイト／マッシュアップの3つのWebアプリケーションを作る方法を解説しています。
他にも多数書籍を執筆しています。
こちら
Webページに拡大／縮小機能をつける（IE専用）
Webページにできるだけ多くの情報を入れるには、フォントサイズを小さくするのが簡単です。
ただ、字があまりに小さすぎると、人によっては見にくいこともあります。
Webブラウザには、文字のサイズを変える機能があります。文字を大きくして表示することができます。
例えば、Internet Explorerなら、[表示]→[文字のサイズ]メニューです。
ただ、この機能だと文字のサイズだけが変わり、画像等はサイズが変わらないので、ページのレイアウトが崩れることもあります。
また、スタイルシートで文字サイズを決めうちにしていると、この機能を使っても文字サイズが変わらない場合もあります。
Operaにはページ全体を拡大／縮小する機能がありますが、Internet Explorerでもそれに近いことを行うことができます。
Internet Explorerでは、CSSに「zoom」という独自のプロパティがあり、それを使うとWebページ上の要素を拡大／縮小することができます。
このプロパティはbody要素にも適用することができ、それによってWebページ全体を拡大／縮小することもできます。
例えば、スタイルシートの部分に「body { zoom : 2;} 」と入れると、Webページ全体が2倍に拡大表示されます。
また、JavaScriptを使うと、zoomプロパティを動的に操作することもできます。
それを応用すれば、Webページの拡大／縮小を行うようなリンクを、そのページの中に入れることもできます。
まず、以下のJavaScriptを、Webページのヘッダー部分に入れます。
<script language="javascript">
<!--
function zoom(rate)
{
var obj = document.getElementsByTagName('body')[0];
obj.style.zoom = rate;
}
-->
</script>
そして、拡大／縮小のリンクをつける箇所には、以下のようなタグを入れます。
<a href="javascript:zoom(○);">□□□</a>
「○」の部分には、拡大／縮小の率（2や0.5など）を入れます。また、「□□□」の部分には、リンクとして表示する文字列を入れます。
例えば、「2倍に拡大」という文字をクリックした時に、Webページ全体が2倍に拡大されるようにするには、以下のようにします。
<a href="javascript:zoom(2);">2倍に拡大</a>
ただし、Webページによっては、拡大／縮小するとレイアウトが乱れる場合があります。
また、Internet Explorerのみで使える機能ですので、Webブラウザの種類を判別して、Internet Explorer以外ではリンクを表示しないようにするなどしておく方がより良いです。
前後の記事
トラックバック(0件)
このブログ記事を参照しているブログ一覧: Webページに拡大／縮小機能をつける（IE専用）
このブログ記事に対するトラックバックURL: http://www.h-fj.com/mt/mt-tb.cgi/127.
コメントする
管理者のみにコメントを送信したい場合は、「コメントを秘密にする」のチェックをオンにしてコメントを送信するか、メールフォームからメールをお送りください。
ブログ全体の感想など、この記事に直接に関係しないコメントは、ゲストブックにお気軽に投稿してください。