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>

htmlで文字サイズのコントロール” に対して1件のコメントがあります。

  1. think49 より:

    そのコードを書いた者です。
    掲載に問題はありませんが、/ さんから指摘された「HTML 4.01 Strict に違反」が未修正のため、
    http://jsbin.com/uyepik/edit#preview を掲載してもらえると有り難く。
    JSBinでは日本語を扱えないので数値参照化してありますが、デコードしていただいても構いません。

  2. think49 より:

    失礼。JSBinで数値参照化しなくても文字化けしないように修正されたようなので改めてリンクを貼っておきます。
    http://jsbin.com/uyepik/3/edit#preview

  3. oda より:

    think49様、いろいろとありがとうございます。
    修正ソースを掲載させていただきました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください