Javascriptを用いてCSSを切り替えるスクリプトを利用して、フォントサイズを大、中、小に切り替えれるようにしてみました。
実装したのは初心者のためのPC用語講座です。
利用方法は簡単で、まずはAlternative Style: Working With Alternate Style Sheetsにてスクリプトをダウンロードします。
これをhead内で呼び出します。スクリプトで利用するスタイルシートも呼び出します。
— HTML —
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="standard">
<link rel="alternate stylesheet" type="text/css" href="style1.css" title="alternate1">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="alternate2">
<script type="text/javascript" src="styleswitcher.js">
</head>
ポイントは、変更するフォントのスタイルシートをrel=”alternate stylesheet”で呼び出す事。title=は処理を判断する時の名前だとでも思ってください。
— HTML続き —
<body>
<a href="#" onclick="setActiveStyleSheet('alternate1'); return false;">小</a> -
<a href="#" onclick="setActiveStyleSheet('standard'); return false;">中（標準） -
<a href="#" onclick="setActiveStyleSheet('alternate2'); return false;">大</a>
<div id="contents">
ここのサイズが変わります
</div>
</body>
style.cssには
#contents{font-size:100%;}
style1.cssには
#contents{font-size:80%;}
style2.cssには
#contents{font-size:120%;}
と記述しておけば完成です。
あとは、それぞれクリックすれば、文字サイズが変更されます。
参考ページ：JavaScriptを使ったCSSの切り替え
[tmkm-amazon]4774127205[/tmkm-amazon]