フォントの大きさを変更するjavascript「fontSize.js」

ユニバーサルデザインという言葉がWeb業界でも言われ、フォントのサイズを3段階に変更できるサイトも増えています。
しかし、開設者側の見やすさと閲覧者が望む見やすいフォントサイズは果たして一致しているのでしょうか。
justinmaierでは、既存の概念とはひと味違う方法でフォントの大きさを変更できる「fontSize.js」を公開しています。

sponsors

使用方法

fontSize.jsと、javascriptライブラリ「mootools」をダウンロードし、headに挿入します。
さらに以下のscriptを挿入します。
なお対象となるエレメントには、pやh1などを指定してください。
<script type="text/javascript">
window.onDomReady( function(){
new fontSizer($$('対象となるエレメント'));
});
</script>
またstyle属性として
div.fontSizer-sBox{
background:url(スライダー画像のURI) top left no-repeat;
}
を指定してください。

サンプル

このページではh1,h2,h3,p,codeを指定しています。
対象エレメントをクリックするとフォントサイズ変換用のスライダーが表示されます。

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん


sponsors

Javascriptサンプルページ一覧
skuare.net