htmlで文字サイズのコントロール
「http://www.tagindex.com」様の掲示板がたいへん参考になりました。
think様がアップされました「プルダウンメニューで実装」のソースはたいへん気にいりました。
利用させていただきます。
また、2011年11月20日には、think様、直々にソース修正の旨コメントをいただきました。
修正版を掲載させていただきます。ありがとうございます。
ソースは、下記を参照されたほうが正確かと思います。
http://jsbin.com/uyepik/3/edit#source
（掲載に問題がありました、すぐに削除します）
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html lang=”ja”><head>? <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>? <meta http-equiv=”Content-Style-Type” content=”text/css”>? <meta http-equiv=”Content-Script-Type” content=”text/javascript”>? <title>文字サイズのコントロール</title><style type=”text/css”><!–body {? font-size: 100%;}#Test1{? font-size: 150%;}#Test2{? font-size: 200%;}#Test3{? font-size: 70%;}#Test4{? font-size: 50%;}–></style><script type=”text/javascript”><!–window./*@cc_on @if(@_jscript) attachEvent(‘on’ + @else @*/addEventListener(/*@end @*/ ‘load’, function (evt) {? document.getElementById(‘textZoom’)./*@cc_on @if(@_jscript) attachEvent(‘on’ + @else @*/addEventListener(/*@end @*/ ‘change’, function (evt) {? ? var select = evt.target || evt.srcElement;? ? select.ownerDocument.body.style.fontSize = select.value + ‘%’;? ? evt.preventDefault();? },false);},false);–></script></head><body><form action=”#”>? <p>? ? <select id=”textZoom” name=”textZoom”>? ? ? <option value=”50″>50%</option>? ? ? <option value=”70″>70%</option>? ? ? <option value=”100″ selected>100%</option>? ? ? <option value=”150″>150%</option>? ? ? <option value=”200″>200%</option>? ? </select>? </p></form><p id=”Test1″>標準的な大きさ</p><p id=”Test2″>少し大きい</p><p id=”Test3″>かなり大きい</p><p id=”Test4″>少し小さい</p><p id=”Test5″>かなり小さい</p></body></html>
Follow me!
そのコードを書いた者です。
掲載に問題はありませんが、/ さんから指摘された「HTML 4.01 Strict に違反」が未修正のため、
http://jsbin.com/uyepik/edit#preview を掲載してもらえると有り難く。
JSBinでは日本語を扱えないので数値参照化してありますが、デコードしていただいても構いません。
失礼。JSBinで数値参照化しなくても文字化けしないように修正されたようなので改めてリンクを貼っておきます。
http://jsbin.com/uyepik/3/edit#preview
think49様、いろいろとありがとうございます。
修正ソースを掲載させていただきました。