JavaScriptでCSSを切り替えて文字サイズを変更する。

ごぶさたしています。
アルバイトと年賀状書きが忙しく、まったく更新できませんでした。

話は変わりますが、以前アルバイト先で
「最近、文字の大きさを画面上のボタンで切り替えられるサイトがあるよね。あれできる？」
と聞かれたことがありました。

結局、時間と労力のなさから実装しないこととなったのですが、
後々の自分のために色々と調べてようやくつくることができたのでメモ。

正常動作環境：Windows OS
Firefox, Safari, Opera, Necscape, GoogleChrome, IE7

準動作環境（オンマウスでの色変更なし）：IE6, IE5.0

確認不可：IE5.5

詳しくはHTMLで説明しているので見てください。

１．制作前準備

A list apartの記事の下部にあるDownload styleswitcher.jsをクリックして、ファイルをダウンロード。
さらに、jQueryもダウンロードします。理由は、私がjQueryなしでJavaScriptを書くことができないからです。

２．文字サイズ変更ボタンをつくる。

今回は、JavaScriptでCSSを切り替えることによって文字サイズを変更するため、
JavaScriptなしの状態では、文字サイズ変更ボタンはまったく意味のないものになります。
ので、このボタンはJavaScript側で生成した方がよさそうです。
コードとしては

<dl id="swapcss">
<dt>文字サイズを変更する</dt>
<dd>小</dd>
<dd>中</dd>
<dd>大</dd>
</dl>

こんな感じ。今回は時間がないのでテキストで作りました。

３．CSSを書く

簡略化すると

body {
    font-size: medium;
}
#header {
    font-size: 14px;
} #swapcss dt {
    margin-bottom: 10px;
}
#swapcss dd {
    display: inline;
    margin: 0 20px 0 0;
    padding: 6px;
    border: 1px solid #fc0;
}
#swapcss dd:hover,
#swapcss dd.here {
    background: #fec;
}

こんな感じ。

#headerにだけフォントサイズが固定で指定してありますが、
これがサンプルサイトの文字が変更しない水平線の上の部分に対する指定です。

このbase.cssに加え、文字の大きいバージョン(large.css)、文字の小さいバージョン(small.css)も記述します。今回は フォントサイズしか変更していないため、わざわざ別のCSSつくらなくても、追加でクラス名つけてしまえばいいじゃないかということも考えました。
ですが、実際サイトに使用する際は文字サイズに加え、余白類(margin, padding)だとか行間(line-height)とかも同時に微調整する必要があるんじゃないかと考え、拡張性も考え、CSSを分けて制作しました。

4.JavaScriptを書く。

書く内容は、３つです。

文字サイズ変更ボタンの生成

$(".addtextswap").after("<dl id=\"swapcss\"><dt>文字サイズを変更する</dt><dd>小</dd>& amp; lt;dd class=\"here\">中</dd><dd>大</dd></dl>");

ボタン（dd）にカーソルを合わせると、ポインタが変化する

$("#swapcss dd").css("cursor", "pointer");

CSSを変更する。

$("#swapcss dd").eq(0).click(function () {
  setActiveStyleSheet('small');
  $("#swapcss dd").eq(0).addClass("here");
  $("#swapcss dd").eq(1).removeClass("here");
  $("#swapcss dd").eq(2).removeClass("here");
}); $("#swapcss dd").eq(1).click(function () {
  setActiveStyleSheet(' ');
  $("#swapcss dd").eq(1).addClass("here");
  $("#swapcss dd").eq(0).removeClass("here");
  $("#swapcss dd").eq(2).removeClass("here");
}); $("#swapcss dd").eq(2).click(function () {
  setActiveStyleSheet('large');
  $("#swapcss dd").eq(2).addClass("here");
  $("#swapcss dd").eq(1).removeClass("here");
  $("#swapcss dd").eq(0).removeClass("here");
});

５．完成。

サンプルページをご覧下さい。

以上、フォントサイズ変更JavaScriptに関するメモでした。

---

参考にさせていただいたサイト
三菱UFJフィナンシャルグループ
（「文字サイズ変更　大　中　小」で検索して3番目にヒットしたサイトです。（笑）

Stacktrace
(jQueryリファレンスとして利用させていただきました。)