【改訂版】javascript + cssでフォントサイズ切り替え

以前「javascript + cssでフォントサイズ切り替え」という記事を書きましたが、だいぶ情報も古くなってしまったので書き直します。思いのほか「javascript フォントサイズ 切り替え」というキーワードで辿り着く人が多いって言うのもありますが。

以前の記事には javascript をあれこれ書いたりしてたので、敷居が高かったかもしれませんが、「styleswitcher.js」を使用すれば、 javascript を一切書く必要なくフォントサイズ切り替え機能を実装できます。

styleswitcher.js は A List Apart で配布されている、CSS を動的に切り替える javascript ライブラリです。
styleswitcher.js を使用してフォントサイズを切り替えるには、各種フォントサイズに対応した CSS が必要になります。（styleswitcher.js の使用方法は省略します。こちらのサイトを参考にしてください。当サイトでは CSS の記述方法のみ説明します。）

/* common.css デフォルトで読み込むCSS
   （styleswitcher.js の有無問わず常時読み込まれる CSS） */

body { font-size:small; } /* デフォルトサイズ「小」 */
　　　　　　・
　　　　　　・
　　　　　　・
/* 他の部分のスタイルなど */
　　　　　　・
　　　　　　・
　　　　　　・

/* font_small.css 代替CSSフォントサイズ「小」 */

body { font-size:small; }

/* font_medium.css 代替CSSフォントサイズ「中」 */

body { font-size:medium; }

/* font_large.css 代替CSSフォントサイズ「大」 */

body { font-size:large; }

body で指定されたフォントサイズは各要素に継承されるので、基本的にはこれだけで、ページ全体のフォントサイズが相対的に切り替わります。だたし、重要なポイントが一つあります。フォントサイズは、必ず相対サイズ指定（％、em など）にすることです。絶対サイズ指定（px 、 cm 、 mm 、 pt など）にするとその部分だけフォントサイズが切り替わりません。逆にフォントサイズを変えたくない部分は絶対サイズ指定をするというのも有効です（ただし、IE 系ブラウザのみ有効）。

また、デフォルトの CSS を各種代替 CSS で上書きする形になるため（正確には代替 CSS で記述したスタイルのみ、他の部分はデフォルトのままになる）、link 要素を記述する順序も重要です。下記のようにします。

<link rel="stylesheet" type="text/css" href="common.css" />

<link rel="alternate stylesheet" type="text/css" href="font_small.css" title="alternate1" />
<link rel="alternate stylesheet" type="text/css" href="font_medium.css" title="alternate2" />
<link rel="alternate stylesheet" type="text/css" href="font_large.css" title="alternate3" />

また、絶対サイズ指定でも styleswitcher.js によるフォントサイズ切り替えは可能ですが、各要素毎に代替スタイルを用意しなければならないので手間が増えます。

個人的にはフォント切り替え機能事態あまり必要ないと感じているんですけどね。ブラウザ側でのフォントサイズ切り替え方法を記載しておけば十分な気がします。そのほうが他のサイトでも応用が効きますしね。