JavaScriptとCSSで任意にフォントサイズを切り替える方法
大手のニュースサイトなどには、任意でフォントサイズを切り替える方法がある。
最も簡単な方法（検索して一番紹介されている方法）はstyleswitch.jsを用いた方法。
<html>
<head>
<title>フォントサイズを任意で切り替える</title>
<script src="styleswitch.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="font1" href="font1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="font2" href="font2.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="font3" href="font3.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="font4" href="font4.css" />
</head>
<body>
<span id="changefont">
<ul>
<li>フォントサイズ：</li>
<li><a href="javascript:chooseStyle('font1', 30)">小</a></li>
<li><a href="javascript:chooseStyle('font2', 30)">中</a></li>
<li><a href="javascript:chooseStyle('font3', 30)">大</a></li>
<li><a href="javascript:chooseStyle('font4', 30)">最大</a></li>
</ul>
</span><!–changefont–>
</body>
</html>
style.css
———————————–
#changefont li{
display: inline;
}
font1.css
———————————–
body{
font-size: 0.9em;
}
font2.css
———————————–
body{
font-size: 1.0em;
}
font3.css
———————————–
body{
font-size: 1.3em;
}
font4.css
———————————–
body{
font-size: 1.6em;
}
上記以外にはjquery.jsを用いる方法等が利用されているよう。
他にも様々な方法を紹介しているサイトはこちら
CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie
タグ: CSS, javascript