文字サイズ変更

古いブラウザ（NN4とか）ではうまくいかないかもしれません。

全体の変更

ページ全体を変更します。

<script type="text/javascript">
var x = 100;
function larger()  { x *= 1.2; document.body.style.fontSize = x + '%'; }
function smaller() { x /= 1.2; document.body.style.fontSize = x + '%'; }
</script>

<p>
<input type="submit" value="小さく" onclick="smaller();" />
<input type="submit" value="大きく" onclick="larger();" />
</p>

部分的な変更

特定の部分だけ文字サイズを変更します。

ほげほげほげ

<script type="text/javascript">
var x = 100;
function larger()  { x *= 1.2; document.getElementById('resizable').style.fontSize = x + '%'; }
function smaller() { x /= 1.2; document.getElementById('resizable').style.fontSize = x + '%'; }
</script>

<p>
<input type="submit" value="小さく" onclick="smaller();" />
<input type="submit" value="大きく" onclick="larger();" />
</p>

<p id="resizable">ほげほげほげ</p>

（蛇足）文字サイズ変更ボタンを付けるべきか

FirefoxやSafariには自由に文字サイズを変えられる機能がありますので，文字サイズ変更ボタンの意味はあまりありません。むしろ，ブラウザで文字サイズを変えたときに文字どうしが重なって読めなくならないように注意するほうが意味があるでしょう。同様なことが，ページを声で読み上げる仕組みについても言えます。

奥村晴彦

Last modified: 2008-08-07 15:46:01