フォントサイズ変更スクリプト(タイプA)

概要

ページをリロードすることなくフォントサイズの変更を反映するタイプです。

説明

body要素のstyleオブジェクトのプロパティを書き換え、文書全体のフォントサイズを変更します。変更したサイズ設定は保存できませんので、リロードしたり別のページに移動すると設定は失われます。

サンプル

• サンプルページ
• サンプルページを新しいウィンドウで開く

動作確認ブラウザ

以下の環境で動作を確認しました

• Mozilla 0.9.5(Windows)
• Mozilla 0.9.5(Macintosh)
• Mozilla 0.9.5(Linux)
• Netscape 6.1(Windows)
• Netscape 6.1(Macintosh)
• Internet Explorer 6(Windows)
• Internet Explorer 5.01(Windows)
• Internet Explorer 5(Macintosh)
• Internet Explorer 4.5(Macintosh)
• iCab Pre2.5.3(Macintosh)

Netscape Communicator 4.x、Internet Explorer 4.0(Macintosh)では動作しません。その他のブラウザは未確認です。

設置方法

jsファイルの保存

jsファイルを適当なファイル名で保存して、格納したいディレクトリに置きます。ここではスクリプトを使用したいHTMLファイルと同じディレクトリに「fscA.js」というファイル名で保存したと仮定します。
なお、ファイルはUTF-8Nでエンコードしています。必要に応じて変更してください。

jsファイルの初期設定

値の単位を設定

font-sizeの単位を設定します。%、em、ex、pt、pxなどから好きな単位を選んで入力します。

一回の操作で変化させる値

「拡大」「縮小」操作をするごとに増減する数値を設定します。

初期状態の値

デフォルト状態での数値を設定します。「元に戻す」操作をしたときもこの値が適用されます。

HTMLファイルの設定

スクリプトを使用したいページのHTMLファイルのhead要素内に<script type="text/javascript" src="fscA.js"></script>を記述します。（HTMLファイルとjsファイルを違うディレクトリに置く場合はパスに注意してください）

body要素内にフォントサイズ変更設定を行うページに操作のための要素とonclick属性とonkeypress属性を記述します。属性値は拡大の場合"fsc('larger');return false;"、縮小は"fsc('smaller');return false;"、元に戻すのは"fsc('default');return false;"となります。

input要素を使う場合の記述例

XHTMLの場合はinput要素を閉じる必要があります

<form id="fscform" action="#">
<p>
<input type="button" value="拡大" onclick="fsc('larger');return false;" onkeypress="fsc('larger');return false;" >
<input type="button" value="縮小" onclick="fsc('smaller');return false;" onkeypress="fsc('smaller');return false;" >
<input type="button" value="元に戻す" onclick="fsc('default');return false;" onkeypress="fsc('default');return false;" >
</p>
</form>

a要素を使う場合の記述例

<a href="#" onclick="fsc('larger');return false;" onkeypress="fsc('larger');return false;" >拡大</a>
<a href="#" onclick="fsc('smaller');return false;" onkeypress="fsc('smaller');return false;" >縮小</a>
<a href="#" onclick="fsc('default');return false;" onkeypress="fsc('default');return false;" >元に戻す</a>

ブラウザごとの動作の違い

• IE、iCabは見出し要素（Hx要素）のフォントサイズが変更されません。別途スタイルシートでフォントサイズを指定することで変更できるようになります。
• Mozilla以外のブラウザではtable要素やform要素など一部の要素は親要素のfont-sizeを継承しないので、これらの要素の文字サイズは変化しません。

更新履歴

08/21/2004

クレジットのURIを変更

10/23/2001

WinIEとiCab以外のブラウザもbody要素のfontSizeプロパティを変更するように統一

09/21/2001

ソース見直し

07/17/2001

公開