javascript + cssでフォントサイズ切り替え

2009年6月この記事の改訂版を書きました。こちらを参考にしてください。

ユーザービリティやアクセシビリティを意識して、フォントサイズ切り替え機能を実装するサイトが増えてきましたが、どうやって作るのか分からない人も多いかと思いますので制作方法を紹介。

当サイトではjavascript + cssでフォントサイズ切り替え機能を実現していますので、ある程度javascriptとcssの知識があることを前提として説明していきます。

フォントサイズ切り替え機能の概要を説明しますと...

1. ユーザーがフォントサイズ切り替えボタンを押す
2. 押したボタンに対応するデータをクッキーに保存し、ページリロード処理
3. クッキーの情報を元に、対応するフォント用のスタイルシートを読み込む

といった感じです。では実際のソースを見てみましょう。まずXHTML(HTML)から。ちなみに、このサンプルは実際サイトで使っているものと違うものなので、コピペしても動作の保証はしません。あくまで大まかな流れとしてとらえてください。

■XHTML

//ヘッダー内に以下の一行を追加（この部分がフォント用CSSに置き換わる）
//このファイル内にクッキーの有無の判定やクッキーの書き込み処理を定義
//（複数スタイルシートを読み込む際はこのファイルを優先させる必要があるので最後に書く）
<script src="http://sample.com/common/js/fontsize.js" type="text/javascript"></script>



//body内のフォント切り替えボタンにしたい部分にonClickイベントハンドラを追加
//fontsize.js内のfontChange関数を実行

<p>文字の大きさ</p>
<ul>
<li onClick="fontChange('big')">大</li>
<li onClick="fontChange('medium')">中</li>
<li onClick="fontChange('small')">小</li>
</ul>

■javascript( fontsize.js内に記述 )

//イベントハンドラから受け取った値を元にクッキーに値を書き込む関数

function fontChange(str){
	var targetFile;
	switch(str){
	case "small":
		targetFile="http://sample.com/common/css/font_small.css";
	break;
	case "medium":
		targetFile="http://sample.com/common/css/font_medium.css";
	break;
	case "big":
		targetFile="http://sample.com/common/css/font_big.css";
	break;
	default:
		alert("error");
	break;
	}
	//フォント用CSSのファイル名をクッキーの値として保存
	//フォント切り替え機能をサイト全体適用するためpathに/（ルート）を指定
	document.cookie="fontstyle="+targetFile+";path=/;";
	window.location.reload(); //ページをリロードして設定を反映。
}



//以下はページが読み込まれる際必ず実行される処理

var name="fontstyle";
var cookie=document.cookie; //クッキーを取得
if(-1==cookie.indexOf(name)){ //クッキーがなければsmallを指定（デフォルト）
	var file='http://sample.com/common/css/font_small.css';
}else{
	var pos_s=cookie.indexOf(name)+name.length+1; //クッキーの値の開始位置
	var pos_e=cookie.indexOf(";",pos_s); //クッキーの値の終了位置
	if(-1==pos_e){ //末尾にセミコロンがあるか？
		var file=cookie.slice(pos_s); //無い
	}else{
		var file=cookie.slice(pos_s,pos_e); //有る
	}
}
//クッキーの値に対応するCSSを読み込む。
document.write('<link rel="stylesheet" href="'+file+'" type="text/css" />');

■CSS

//font_small.css内

#content p{ font-size : 10px ; }
#content h2{ font-size : 12px ; }

//font_big.css内

#content p{ font-size : 14px ; }
#content h2{ font-size : 16px ; }

//font_large.css内

#content p{ font-size : 12px ; }
#content h2{ font-size : 14px ; }

と、だいたいこんな感じになります。

このケースではcontent部分のpとh2のフォントサイズを切り替えてますが、臨機応変に指定してください。

今回はフォントサイズ切り替え機能として取り上げましたが、CSSで指定するプロパティを変更すれば、背景色や文字色、レイアウトなども変更が可能です。