insomnia Web Workshop

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

Tweet

2001年に作成したコンテンツを移転したものです。

概要

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

ライセンス

CC0
To the extent possible under law, ugumi has waived all copyright and related or neighboring rights to this work.
このスクリプトはCC0 1.0 Universal ライセンスの下でリリースされています(パブリックドメイン)。

説明

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

サンプル

動作確認ブラウザ

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

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>

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

更新履歴

09/20/2012
CC0 1.0 Universal ライセンスの下、パブリックドメインとしました。
08/21/2004
クレジットのURIを変更
10/23/2001
WinIEとiCab以外のブラウザもbody要素のfontSizeプロパティを変更するように統一
09/21/2001
ソース見直し
07/17/2001
公開
トップページに戻る