ベストアンサー

Ｗｅｂページ上に「文字を大きくする」ボタンをつけたい

2003/04/11 11:05

どこかのページで見たような気がするのですが、「文字を大きくする」「文字を小さくする」ボタンが画面上に張ってあったような気がします。どうすれば実現できるでしょうか？できれば、ネットスケープ系ブラウザでも動作する方法が良いのですが。無論、ブラウザの操作で大きくしたりすることができるのですが、初心者や子供には画面上で指示をした方がわかりやすいので。よろしくお願いします。

giusa
お礼率75% (46/61)

JavaScript
回答数7
ありがとう数8

みんなの回答 （7）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#199778

2003/04/16 00:54 回答No.7

訂正… スクリプト自体は問題なかったのですが、ボタンのところにNetscape 4.xxでは解釈されない要素を利用していたせいで動かなかったようです。 <div><button onClick="fsCh(1)">拡大</button> <button onClick="fsCh(-1)">縮小</button></div> この部分を、 <div><form> <input type="button" value="拡大" onClick="fsCh(1)"> <input type="button" value="縮小" onClick="fsCh(-1)"></form></div> こちらに置き換えてみて下さい。多分これで動いてくれると思います。一応、Netscape 4.78を暫時に導入して、動作確認しました(すぐアンインストールしましたが…動作環境に合わないので…)。あと、こちらに置き換えた場合、 <style type="text/css"></style> この部分は不要ですので、削除してしまって構いません。ばたばたして申し訳ありません。失礼しました。

質問者

お礼 2003/04/16 18:19

【お見事！】動きました。すばらしい。Netscapeがかわいく見えてきました。私自身javascriptはほとんどわからないのですが、勉強しようという気になってきました。本当にありがとうございます。

その他の回答 (6)

noname#199778

2003/04/14 19:34 回答No.6

#2です。 Netscape 4.xxに対応することを想定して、前のスクリプトを少し改造してみました。 Cookieを利用して、JavaScriptから少々強引にスタイルシートを変更する形に直してあります。 <html> <head> <title>文字サイズ変更</title> <style type="text/css"></style> <script type="text/javascript"></script> </head> <body> <div><button onClick="fsCh(1)">拡大</button> <button onClick="fsCh(-1)">縮小</button></div> <p>ボタンのサイズも変わります。今度はcookieを利用して、サイズ変更をする仕組みに差し替えてみました。今度のスクリプトでは、head要素内にJavaScriptを使ってスタイルシートを吐き出すようになっています。サイズ変更のためのボタンをクリックすると、文字サイズの指定に使っている配列番号を変更してcookie内に保存し、リロードをかけます。リロード後は、cookie内から文字サイズ指定の配列番号を引き出して、適用する文字サイズを決定します。 JavaScriptとcookieの利用を許可していて、CSSに対応しているブラウザであれば、おそらく動作するでしょう。また、このスクリプトの場合、複数のHTMLファイルに同じものを記述しておけば、別のページでも自動的にサイズの変更をしてくれると思います(別のディレクトリのファイルを呼び出した場合を除く)。</p> </body> </html> とりあえず、IE 6とNetscape 7での動作の他、今度はOpera 6.05でも動作することを確認しました。私の手元にはNetscape 4.xx以前がないので、そちらでの動作確認は取れていません。もしNetscape 4.xxで動作しなかったらごめんなさい。

質問者

お礼 2003/04/15 18:56

うーん、もはやなんとお礼を申し上げてよいかわからないのですが、本当にありがとうございます。が、Netscape4.×では動作しませんでした。私もいまどきそんなものは使っていないので、サイトからダウンロードして使用しているのですが、ユーザーにいるのでしょうがないのです。トホホ

HP_Adviser
ベストアンサー率50% (1/2)

2003/04/14 07:47 回答No.5

たびたびすみません。 No.3,4の者です。一つアドバイスをしますが、No.3に書かれているスクリプトだと、これ以上文字サイズを大きく(小さく)出来ない時のメッセージが出てきません。そのメッセージが出てくるようにするには、No.3のスクリプトを少し変える必要があります。 for Internet Explorer 4,5,6の > if (pm == "b") { > if (fspre < sizemax) { > document.all("bo").style.fontSize = fspre + pmper + "%"; > } > } else if (pm == "s") { > if (fspre > sizemin) { > document.all("bo").style.fontSize = fspre - pmper + "%"; > } > } の部分を、 if (pm == "b") { if (fspre < sizemax) { document.all("bo").style.fontSize = fspre + pmper + "%"; } else { // これ以上文字を大きくすることが出来ないときのメッセージ alert("これ以上文字を大きくすることが出来ません。"); } } else if (pm == "s") { if (fspre > sizemin) { document.all("bo").style.fontSize = fspre - pmper + "%"; } else { // これ以上文字を小さくすることが出来ないときのメッセージ alert("これ以上文字を小さくすることが出来ません。"); } } に変えてください。また、for Netspace 6,7の部分も、 > if (pm == "b") { > if (fspre < sizemax) { > document.getElementById("bo").style.fontSize = fspre + pmper + "%"; > } > } else if (pm == "s") { > if (fspre > sizemin) { > document.getElementById("bo").style.fontSize = fspre - pmper + "%"; > } > } を if (pm == "b") { if (fspre < sizemax) { document.getElementById("bo").style.fontSize = fspre + pmper + "%"; } else { // これ以上文字を大きくすることが出来ないときのメッセージ alert("これ以上文字を大きくすることが出来ません。"); } } else if (pm == "s") { if (fspre > sizemin) { document.getElementById("bo").style.fontSize = fspre - pmper + "%"; } else { // これ以上文字を小さくすることが出来ないときのメッセージ alert("これ以上文字を小さくすることが出来ません。"); } } にするとアラートメッセージが出てきます。

HP_Adviser
ベストアンサー率50% (1/2)

2003/04/13 23:33 回答No.4

すみません、先程の者ですが、スクリプトの中に、パーセンテージで指定とコメントされている部分がありますが、「%」は抜かしてください。つまり、300%を指定したい場合は、ただ単に300と入れてください。他の部分も、同じようになりますので、そこの部分を注意してください。

HP_Adviser
ベストアンサー率50% (1/2)

2003/04/13 23:30 回答No.3

ちょっと長いですが、こんなスクリプトなんか、どうですかね？そのままコピペして試してみてください。動作ブラウザは、Internet Explorer 4,5,6、Netspace 6,7です(DHTMLの技術を利用しているため)。 <html> <head> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body id="bo" style="font-size:100%;"> <a href="javascript:sizechange('b','10')">拡大</a>,<a href="javascript:sizechange('s','10')">縮小</a> 文字が拡大したり縮小したりします。 </body> </html> ちなみに、ボタンにするには、 <input type="button" onclick="sizechange('b','10')" value="拡大"> <input type="button" onclick="sizechange('s','10')" value="縮小"> のようにするといいでしょう。

質問者

お礼 2003/04/14 14:51

HP_Adviserさん、ありがとうございます。お名前に違わずあらゆるケースに対応できるように思いました。しかし、前の「お礼」でも少し触れたのですがNetscapeの旧バージョンのユーザーが多くいます。別にネスケでないと困る、というようなページでもないのですが、古いユーザーがそのまま使い続けているようです。自分でブラウザを更新したり変更したりしない（でききない）ユーザーなので、彼らこそが、ブラウザのメニューから文字の大きさを変更できないのです。ネスケの旧バージョンで実現できないなら、責め方を変えてみます。ありがとうございました。

noname#199778

2003/04/12 10:16 回答No.2

DHTML的手法ですが、こんな感じではいかがでしょうか。 <html> <head> <title>文字サイズ変更</title> <style type="text/css"></style> <script type="text/javascript"></script> </head> <body id="bd">  <div><button onClick="fsCh(1)">拡大</button> <button onClick="fsCh(-1)">縮小</button></div> <p>ボタンのサイズも変わります。 Winodws Me上のIE6とNetscape 7で動作確認しました。 Opera 6.05では駄目でした。 IE4、NN4.xx以前のブラウザでも動作しないと思います。</p> </body> </html> 見当違いでしたら、ごめんなさい。

質問者

お礼 2003/04/14 14:33

lead1976さん、ありがとうございます。「大」「小」も実現されていて、このまま張り込んでしまったらどんなに楽かと思いました。しかし、ユーザーにNetscapeしかも4.8ユーザーがかなりいることがわかっています。私もNetscape(R) Communicator 4.78 で試したのですがやはり上手く動作しないようです。ユーザーにブラウザを替えてもらいましょうか、、、

wo-007
ベストアンサー率68% (15/22)

2003/04/12 03:05 回答No.1

これでどうでしょうか？スクリプトの引数に拡大したい部分のタグのIDと、拡大するポイント数を指定することができます。 IE6.0で動作確認済みです。 <html> <head> <script language="javascript"> function sizeUp(argId, argPoint){ 　size = document.all[argId].currentStyle.fontSize; 　sizeNum = new Number(size.substring(0,size.length-2)); 　document.all[argId].style.fontSize 　　= sizeNum + argPoint + "pt"; } </script> </head> <body id="bodyId"> <input type="button" value="拡大" onClick="sizeUp('bodyId', 4)"> あいうえお </body> </html>

質問者