[使える CSS テクニック] CSS で文字サイズを変更するボタンを設置する

使えるCSSテクニック Vol.01

2008.06.30

第 10 回目は「CSSで文字サイズを変更するボタンを設置する」です。

今回は「styleswitcher.js」でCSSを切り替えて、サイトの文字サイズを変更するボタンの設置方法を解説します。
「styleswitcher.js」は複数のスタイルシートファイルを切り替えて読み込むことができ、クッキーに保存できる優れもののライブラリです。

実装手順は以下の通りです。

1. styleswitcher.js をダウンロード

「styleswitcher.js」を以下のサイトからダウンロードします。
「A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets」のエントリーの中にある Download styleswitcher.js からダウンロードできます。

2. font-sizeの値が異なるCSSファイルを個別に作成

font-sizeの値がそれぞれ異なるCSSを3つ用意します。

3. XHTMLに実装する

外部 CSS

外部 CSS を読み込む際には title 属性に固有の名前を入れておきます。
また、rel 属性の値に注意してください。「alternate」は必須です。

<link rel="stylesheet" type="text/css" media="all" href="common/css/style-st.css" />　/*←ベース*/
<link rel="alternate stylesheet" type="text/css" href="common/css/style-st.css" title="standard" />　/*←標準*/
<link rel="alternate stylesheet" type="text/css" href="common/css/style-l.css" title="large" />　/*←大*/
<link rel="alternate stylesheet" type="text/css" href="common/css/style-el.css" title="extra-large" />　/*←特大*/

外部 Java Script

ダウンロードした「styleswitcher.js」を読み込みます。

<script type="text/javascript" src="styleswitcher.js"></script>

切り替えボタン

文字サイズを切り替えるボタンの a 要素に onclick イベントを追加します。
setActiveStyleSheetのパラメータに、切り替えたい CSS の title 属性の値を指定します。

<ul>
<li><a href="javascript:void(0);" onclick="setActiveStyleSheet('standard'); return false;">標準</a></li>
<li><a href="javascript:void(0);" onclick="setActiveStyleSheet('large'); return false;">>大</a></li>
<li><a href="javascript:void(0);" onclick="setActiveStyleSheet('extra-large'); return false;">特大</a></li>
</ul>

以上で実装作業は完了です。