フォントサイズを動的変更

ページ内の文字サイズを一発変更。

全てのフォントサイズを%やemなどの相対値で指定している場合、数行のソースでページの文字サイズを変更できる。<font size="6">のような古い方法を使っている場合やスタイルシートを使っていてもptなどで指定されている場合は効果なし。柔軟にチューンされたスタイルシートのみが成せる技。

Fontsize: 80% |100% |120%

<p>Fontsize:
<a href="#" onclick="document.getElementsByTagName('body')[0].style.fontSize='80%';return false;">80%</a>
|<a href="#" onclick="document.getElementsByTagName('body')[0].style.fontSize='100%';return false;">100%</a>
|<a href="#" onclick="document.getElementsByTagName('body')[0].style.fontSize='120%';return false;">120%</a></p>

他の方法(Zoom)

強引ながらスタイルシートによらず表示倍率を変更する方法もある。

Zoom: 80% |100% |120%

この方法だとどんな下手なサイズ指定を行っていても有効だが、対応ブラウザがWinIE5.5以上に限られる。

<p>Zoom:
<a href="#" onclick="document.getElementsByTagName('body')[0].style.zoom='0.8';return false;">80%</a>
|<a href="#" onclick="document.getElementsByTagName('body')[0].style.zoom='1';return false;">100%</a>
|<a href="#" onclick="document.getElementsByTagName('body')[0].style.zoom='1.2';return false;">120%</a></p>

ページ情報

作成日時
2005/10/05
最終更新日時
2005/10/05
HTML4.01版
index.html
XHTML1.1版
index.xhtml
XML原本
index.xml