« スライドインしてくるメニュー | トップページ | Webでの適正な文字の指定って? »

2007.10.11

JavaScriptで文字サイズを変更

CSSを切り替えるJavaScript|styleswitcher.js

ユーザビリティを考えると、文字の大きさを可変できるコトは必須だと思う。僕もCSSを組む時は、WindowsのIEでも文字サイズを可変できるように相対的な数値を指定している。ただ、文字サイズを変えるメニューがどこにあるのかも分からないユーザーも多い。特に高齢者で大きい文字の方が読みやすい方たちに多いと思う。
また、ブラウザで一律に文字を拡大してしまうと、レイアウトが崩れてしまうので、デザイナーにとっては必要以外のトコロは元のサイズのままで、できるだけ体裁を保ちたいという欲求もある。

そこで今回のJavaScriptの登場です。
A List Apartが紹介しているstyleswitcher.jsというJavaScriptが有名らしい。
何ができるかというと、JavaScriptを使ってCSSを切り替えるコトができる。これを使って文字のサイズ別CSSをいくつか作り、切り替えようという寸法です。
早速、ページの下方にある「Download styleswitcher.js」というリンクからJavaScriptをダウンロードして使ってみる。

サンプルはこんな感じです。

↑このサンプルはこちらからダウンロードできます。

設定の仕方は至って簡単。(HTML 4.01仕様)
<head>〜</head>の中に、
<script type="text/javascript" src="(任意の場所)/styleswitcher.js"></script>を置き、
代替用のCSSとして例えば、
<link rel="alternate stylesheet" type="text/css" href="(任意の場所)/small.css" title="Small">
<link rel="alternate stylesheet" type="text/css" href="(任意の場所)/large.css" title="Large">
をデフォルトのCSSの下に配置します。
※上が文字サイズ小、下が文字サイズ大、文字サイズ中はデフォルトとする。

<body>〜</body>には、実際にこの機能させるリンクを配置します。例えば、
<a href="#" onClick="setActiveStyleSheet('Small'); return false;">小(画像でもOK)</a>
<a href="#" onClick="setActiveStyleSheet('Default'); return false;">中(画像でもOK)</a>
<a href="#" onClick="setActiveStyleSheet('Large'); return false;">大(画像でもOK)</a>
と配置すればできあがりです。
※もちろん、デフォルトのCSSと文字サイズ小・大のCSSも作っておきます。

ただ、Firefoxでの不具合が見つかっているらしく、対処法は「r-Studioさん」の「JavascriptでCSSを切り替える」という記事に書かれていますので、参考にしてください。

最後に1つお願いです。
現在表示しているサイズが分かるようにしたいんですが、誰か教えてください!

|

« スライドインしてくるメニュー | トップページ | Webでの適正な文字の指定って? »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/16728096

この記事へのトラックバック一覧です: JavaScriptで文字サイズを変更:

» Webでの適正な文字の指定って? [Good Sleep]
前回の記事絡みなのだが、Webサイトを作っていて適正な文字サイズの指定っていつも悩んでしまう。僕自身はMacを使っており、ブラウザはほとんどFirefox。大きな文字だと扱いづらいので、環境設定で基本... [続きを読む]

受信: 2007.10.13 12:16

» JavaScriptで文字サイズを変更2 [Good Sleep]
カレント表示対応版|styleswitcher.js 以前、「JavaScriptで文字サイズを変更」という記事を書きましたが、カレント表示(現在どのサイズで表示されているか)でつまずき、結局画像を使 [続きを読む]

受信: 2008.03.12 12:29

« スライドインしてくるメニュー | トップページ | Webでの適正な文字の指定って? »