- ベストアンサー
表の文字サイズ変更ボタンについて教えてください。
- 表の文字サイズ変更ボタンについて詳しく教えてください。
- 質問内容としては、jqueryを使用してテーブルの中の文字サイズを変更する方法について教えてほしいです。
- 希望としては、ボタンを押すごとに文字の大きさが変わるようにしたいです。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
今日お昼過ぎに回答したんですが、最近「教えてGoo」がハングしまくるみたいで．．．． No.4さんの意見に大賛成です。質問者様の回答に答えますと １．問題ないでしょうか？ あなたのページを全部見てないから責任は持てません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> でうまくいかなかったって事は、ブラウザーの後方互換モード（quirk）はだめで、 標準モードはOKということでしょう。 http://w3g.jp/others/data/doctype_switching 私の回答のDOC宣言は単に、「jquery.textresizer.js」の配布元サイトのサンプル をコピペしただけです。私は、普段HTMLの時は、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> としてます。 ２．小・中・大に変更して．．．ことは可能でしょうか？ ＝＞「中」の意味が今一ですが、ボタンを「小・大」にして、相対サイズ指定の sizes: [ "smaller", "larger"] でできるんじゃないかと思います（試してみてね） ３．<input type="button" value="拡大" onclick="fsc('larger');return false;" onkeypress="fsc('larger');return false;" /> <input type="button" value="縮小" onclick="fsc('smaller');return false;" onkeypress="fsc('smaller');return false;" /> <input type="button" value="元に戻す" onclick="fsc('default');return false;" onkeypress="fsc('default');return false;" /> </form> に変更しても駄目でしょうか？ ボタンの数と順序を、size:[]の配列要素数と順序に合致させれば出来るはずです sizes: [ "1.5em",".8em", "1em"] あるいは sizes: [ "x-large","x-small", "medium"] とか、 参考 ※無断抜粋（「とほほのスタイルシート入門より」） ＜＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ font-size: size (C1/e3/N4) フォントの大きさを指定します。絶対指定として xx-small, x-small, small, medium（既定値）, large, x-large, xx-large、相対指定として larger, smaller、絶対単位指定として 10in, 10cm, 10mm, 10pt, 10pc, 相対単位指定として 10px, 10ex, 10em などを、割合指定として 120% などを指定します。単位を省略して 20 のようには指定できないので注意してください。 周りのフォントに対する相対的な大きさを指定する時は 120% などのパーセント指定が無難です。small や smaller などや、em や ex などの単位は、ブラウザにより解釈が異なるため、予想外のフォントサイズになるという悲劇がおこることがあります。 画像サイズにあわせてフォントの大きさを固定したいという要望がありますが、ブラウザによって単位の解釈が異なるため、すべてのブラウザで同じフォントの大きさを実現するのは困難なようです。詳細は「長さの単位 を参照してください。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＞
その他の回答 (4)
- babu_baboo
- ベストアンサー率51% (268/525)
まえもってことわっておきますが、 「気」をわるくなさらないでください。 <p><em>文字の大きさは[CTRL]+マウスのホイールで<strong>超簡単^100</strong>に変えられます。UIに優れたブラウザは、その機能をすでに保持しています<em></p> これで、じゅうぶんすぎるくらいだとおもいます。 べんりだとおもっているのは、せいさくしゃであって・・・ これでなやむくらいなら、そもそものないようをぎんみすべきです。 それがさいりょうだとおもいます。 そこそこHTMLもできるようにきてみましたが、せっかくなのではつげんしてみました。 ごめんなさい。
お礼
お礼が遅くなってスミマセン。 マウスでの操作できました。 まだまだホームページ作成が未熟で皆様にご迷惑をおかけています。 回答ありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
No.1です。 私がテストしたのはIE8.0とFireFox3.6.3で、DOC宣言は、HTML4.0 STRICT でした。jQueryのバージョンは別に1.3.2でも同じでした。 これね、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> $(function()｛．．．が認識できないという事は、ライブラリーが正常に読み 込まれて無いということです。（別のとバッティングしてるとか．．．）
お礼
お礼が遅くなってスミマセン yyr446さんありがとうございました。 うまく表示が変わりました。Firefoxでも表示は変わりました。 本当に本当にありがとううございました。 教えていただいて心苦しいのですが、あと３点お聞きしたいのですが・・・ 良ければで結構ですのでお願いします。 １．表示するようになったのは、yyr446さんが指摘されるように <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <META http-equiv="Content-Style-Type" content="text/css"> として記述していたソースを、 <!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=Shift_JIS"> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <META http-equiv="Content-Style-Type" content="text/css"> に変更しました。今後文字サイズ変更ボタンを全ページに張り付けて行き公開したいのですが問題ないでしょうか？ ２． 文字変更ボタンを小・中・大に変更して押すごとにどんどん大きくなったり、小さくなったりすることは可能でしょうか？ ３． <ul class="textresizer"> <li><a href="javascript:void(0)" class="small-text" title="Small">Small</a></li> <li><a href="javascript:void(0)" class="medium-text" title="Medium">Medium</a></li> <li><a href="javascript:void(0)" class="large-text" title="Large">Large</a></li> <li><a href="javascript:void(0)" class="larger-text" title="Larger">Larger</a></li> </ul> を <form id="textresizer" action="#"> <input type="button" value="拡大" onclick="fsc('larger');return false;" onkeypress="fsc('larger');return false;" /> <input type="button" value="縮小" onclick="fsc('smaller');return false;" onkeypress="fsc('smaller');return false;" /> <input type="button" value="元に戻す" onclick="fsc('default');return false;" onkeypress="fsc('default');return false;" /> </form> に変更しても駄目でしょうか？ いろいろ教えて頂いたので駄目であれば駄目でいいです。 よろしくお願いいたします。
- askaaska
- ベストアンサー率35% (1455/4149)
テーブル内のフォントサイズはね。 いろいろ問題があるのよ。 参考： http://norisfactory.com/stylesheetlab/000007.php http://www.koikikukan.com/archives/2006/07/24-021206.php http://www.hajimeteno.ne.jp/stylesheet/actually/fsize.html
お礼
ありがとうございました。 感謝いたします。 参考のURLを見て検討いたします。
- yyr446
- ベストアンサー率65% (870/1330)
タグのマークアップがおかしいんじゃないですか。そのまま出来てますよ。 <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>TextResize</title> <style type="text/css"> ul {list-style:none;} ul li {padding:0;display:inline;} ul li a {padding:3px 4px;text-decoration:none;color:#333;background:#dcdcdc;border:1px solid #505050;} ul li a:hover {background:#fafafa;} .small-text {font-size:x-small;} .medium-text {font-size:small;} .large-text {font-size:large;} .larger-text {font-size:x-large;} </style> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.4.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="/jslib/jquery.cookie.js"></script> <script type="text/javascript" charset="utf-8" src="/jslib/jquery.textresizer.js"></script> <script type="text/javascript" charset="utf-8"> <!-- $(function(){ $("ul.textresizer a").textresizer({ target: "#content", sizes: [ ".8em", "1em", "1.5em", "2em" ] }); }); // --> </script> <body> <div id="content"> contentブロック <div id="container"> containerブロック <div id="main"> mainブロック <div id="header" align="center"> headerブロック <table> <tbody> <tr> <td align="right" nowrap style="font-size : 10px;"> <ul class="textresizer"> <li><a href="javascript:void(0)" class="small-text" title="Small">Small</a></li> <li><a href="javascript:void(0)" class="medium-text" title="Medium">Medium</a></li> <li><a href="javascript:void(0)" class="large-text" title="Large">Large</a></li> <li><a href="javascript:void(0)" class="larger-text" title="Larger">Larger</a></li> </ul> </td> </tr> <tr> <td>td要素</td> </tr> </tbody> </table> </div> <table><tbody> <tr><td>別のテーブルのtd要素</td></tr> </tbody></table> </div> </div> </div> </body> </html>
お礼
お礼が遅くなってスミマセン。 ご教授いただきありがとうございました。
補足
yyr446さん。ご回答い頂き感謝します。ありがとうございます。 さっそく掲載されたソースを張り付けてプレビューするのですが <!-- $(function(){ ←のところで"オブジェクトを指定してください"というエラーが表示されます。 掲載されたソースのjqueryのパスも自分が保存している場所に変更しました。 query.cookie.jsとjquery.textresizer.jsは自分が持っていたものを使い、jquery-1.4.2.min.jsは新規にダウンロードしました。 使用しているソフトはホームページビルダーV14です。 なにぶん初心者なものでスミマセン。 よろしくご教授下さい。
お礼
お礼が遅くなってスミマセン。 上手くいきました。 yyr446さんの指導を素に検討してみます。 貴重なお時間を割いていただきありがとうございました。 今後もっと勉強いたします。