- ベストアンサー
javascriptで文字を拡大・縮小させるには？
最近、アクセシビリティを考慮して、ブラウザの機能上だけでなく、 javascriptを使用した、文字を拡大・縮小するボタンがついているHPを良く拝見します。そこで、作成してみたのですが、どうもうまく機能してくれません。 下記のようにテキストのみの簡単なソースなら ＯＫなのですが、表の中の文字なども同じように拡大・縮小 させたりするにはどうしたらよいでしょうか？ お詳しい方がいらっしゃいましたらどうぞ宜しくご指導お願いします。 <style type="text/css"> <!-- .btn { width:100px; } --> </style> <script type="text/javascript"><!-- fsize = 100; function sizech(val) { fsize = fsize + eval(val); if(fsize < 40 ) { alert("これ以上小さくできません"); fsize = 40; return false; } if(fsize > 200) { alert("これ以上大きくできません"); fsize = 200; return false; } if(val == "0") fsize = 100; document.body.style.fontSize = fsize + "%"; } //--> </script><LINK rel="stylesheet" href="table.css" type="text/css" id="_HPB_TABLE_CSS_ID_"> </HEAD> <body id="bd"> <div><form> <input type="button" class="btn" value="縮小" onclick="sizech('-20')"> <input type="button" class="btn" value="default" onclick="sizech('0')"> <input type="button" class="btn" value="拡大" onclick="sizech('+20')"> </form></div> <P align="center">aaaa<BR> </P>
- may555may
- お礼率92% (12/13)
- JavaScript
- 回答数6
- ありがとう数6
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
・ 元のソースコードとyambejpさまのご指摘をまとめてみました。 ・ sizech(val)の引数valは、数値を渡すように変更しました。 ------------------------------------------------------------ <html> <head> <title>sizech.html</title> <style type="text/css"> <!-- .btn { width: 100px; } --> </style> <script type="text/javascript"><!-- fsize = 100; function sizech(val) { fsize = fsize + val; if(fsize < 40 ) { alert("これ以上小さくできません"); fsize = 40; return false; } if(fsize > 200) { alert("これ以上大きくできません"); fsize = 200; return false; } if(val == "0") fsize = 100; document.body.style.fontSize = fsize + "%"; var tds=document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].style.fontSize = fsize + "%"; } } //--> </script> </head> <body id="bd"> <div> <form action=""> <input type="button" class="btn" value="縮小" onclick="sizech(-20)"> <input type="button" class="btn" value="default" onclick="sizech(0)"> <input type="button" class="btn" value="拡大" onclick="sizech(+20)"> </form> </div> <div style="top: 50px; left: 50px; position: absolute; z-index: 1;" id="Layer1"> AAAAAAAAAAA <div> <table border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_B_080520130845" class="hpb-cnt-tb2" width="443" height="160"> <tbody> <tr> <td class="hpb-cnt-tb-cell3">AAAAA</td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> </tr> <tr> <td class="hpb-cnt-tb-cell3">BBBBB</td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> </tr> </tbody> </table> </div> </div> </body> </html>
その他の回答 (5)
- auty
- ベストアンサー率58% (284/486)
＞＞＞ ボタン自体の最初の大きさや、ボタンに表示される文字を ＞＞＞ 今よりも大きくしたいのですが・・・ これには、window.onload または style="font-size:20pt" を使います。 function setButton() { var bsize = 200; // 微調整 var inputs = document.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++){ inputs[i].style.fontSize = bsize + "%"; } } window.onload = setButton; または <input type="button" style="font-size:20pt" class="btn" value="縮小" onclick="sizech(-20)"> 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <title>sizech.html</title> <style type="text/css"> <!-- .btn { width: 100px; } --> </style> <script type="text/javascript"><!-- fsize = 100; function sizech(val) { fsize = fsize + val; if(fsize < 40 ) { alert("これ以上小さくできません"); fsize = 40; return false; } if(fsize > 200) { alert("これ以上大きくできません"); fsize = 200; return false; } if(val == "0") fsize = 100; document.body.style.fontSize = fsize + "%"; } function setButton() { var bsize = 200; // 微調整 var inputs = document.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++){ inputs[i].style.fontSize = bsize + "%"; } } // window.onload = setButton; //--> </script> </head> <body id="bd"> <div> <form action=""> <input type="button" style="font-size:20pt" class="btn" value="縮小" onclick="sizech(-20)"> <input type="button" style="font-size:20pt" class="btn" value="default" onclick="sizech(0)"> <input type="button" style="font-size:20pt" class="btn" value="拡大" onclick="sizech(+20)"> </form> </div> <div id="Layer1"> AAAAAAAAAAA <div> <table border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_B_080520130845" class="hpb-cnt-tb2" width="443" height="160"> <tbody> <tr> <td class="hpb-cnt-tb-cell3">AAAAA</td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> </tr> <tr> <td class="hpb-cnt-tb-cell3">BBBBB</td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> </tr> </tbody> </table> </div> </div> </body> </html>
お礼
何度も丁寧にご回答いただき本当にありがとうございました。 おかげさまで、思ったとおりのページに仕上げることができました。 図々しくも何度も質問させていただきましたが、皆様にご丁寧に 教えていただき大変感謝しております。本当にありがとうございました。
- auty
- ベストアンサー率58% (284/486)
・ フォントサイズだけ変えればよいようです。 var inputs = document.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++){ //inputs[i].style.width = inputs[i].offsetWidth * fsize / old_fsize + "px"; inputs[i].style.fontSize = fsize + "%"; }
お礼
度々ご回答ありがとうございます。 ボタンを押したときにサイズが変わるのではなく、 ボタン自体の最初の大きさや、ボタンに表示される文字を 今よりも大きくしたいのですが・・・ わがままばかり言ってしまって大変申し訳ないのですが、 もしお時間がありましたら宜しくお願いします。
- HIRSYU
- ベストアンサー率51% (45/87)
>ご丁寧にありがとうございました。 >おはずかしながら、ボタンの大きさや文字、 >はたまたボタン文字の中央表示ができません・・・（涙） >ボタンはこれ以上の大きさにはならないのでしょうか？ ボタンサイズも拡大縮小して欲しいってことですか？ もしそうなら、>ANo.3さんのを改良して、 function sizech(val) { var old_fsize = fsize; fsize = fsize + val; if(fsize < 40 ) { alert("これ以上小さくできません"); fsize = 40; return false; } if(fsize > 200) { alert("これ以上大きくできません"); fsize = 200; return false; } if(val == "0") fsize = 100; document.body.style.fontSize = fsize + "%"; var tds=document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].style.fontSize = fsize + "%"; } var inputs = document.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++){ inputs[i].style.width = inputs[i].offsetWidth * fsize / old_fsize + "px"; inputs[i].style.fontSize = fsize + "%"; } } みたいな感じです。 ちなみに、こういった拡大縮小を使用する場合、positionを使うとデザインが崩れる原因になりますので、気をつけたほうがいいですよ。
お礼
ご指導ありがとうございます。早速やってみましたが、 確かにデザインが崩れてしまうのでちょっと考えてからにします。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
あら申し訳ない document.body.style.fontSize = fsize + "%"; とご自身がかいている後ろの行に var tds=document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].style.fontSize = fsize + "%"; } を追記してください
お礼
ありがとうございました！できました！ }がひとつ抜けていました！！！ 本当にありがとうございました！
補足
なんだかぼけた質問ばかりで何度も申し訳ありません。 試してみましたが、ちょっとうまくいきませんでした。 ちなみに、 <BODY> <DIV style="top : 50px;left : 50px; position : absolute; z-index : 1; " id="Layer1"> <DIV> <TABLE border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_B_080520130845" class="hpb-cnt-tb2" width="443" height="160"> <TBODY> <TR> <TD class="hpb-cnt-tb-cell3">AAAAA</TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> </TR> <TR> <TD class="hpb-cnt-tb-cell3">BBBBB</TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> </TR> <TR> <TD class="hpb-cnt-tb-cell3"></TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> </TR> <TR> <TD class="hpb-cnt-tb-cell3"></TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY> 具体的にご相談すると、このような表があったとき、 その中の文字を拡大縮小をボタンでできるようにするにはどうしたらよいですか？ 図々しく質問攻めにしてしまって本当に恐縮ですが、お時間ございましたら宜しくご教授ください（＾－＾；）
- yambejp
- ベストアンサー率51% (3827/7415)
テーブルは独自のルールでスタイルが設定されるようですね。 tdを拾ってfontSizeを変更してやればよいでしょう。 document.body.style.fontSize = fsize + "%"; var tds=document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].style.fontSize = fsize + "%"; }
補足
早速のご回答ありがとうございます。 それなのに大変申し訳ないのですが、 javaにあまり詳しくないもので・・・ 上記のソースをどの部分に挿入したら良いでしょうか？ 詳しく教えていただけると大変助かります！
お礼
ご丁寧にありがとうございました。 おはずかしながら、ボタンの大きさや文字、 はたまたボタン文字の中央表示ができません・・・（涙） ボタンはこれ以上の大きさにはならないのでしょうか？