• 締切済み

ホームページ上に「文字サイズ大」ボタンのつけ方

ホームページ上に「文字サイズ大」のボタンをつけたいと思い、下記のように書きました。 基本の文字サイズは決めています。 「文字サイズボタン」を押すと、少し大きくしたいのですが、bodyは大きくなりますが、table内の文字は変わりません。 他にも「h1」「p」もあるのですが、どうしたらいいでしょうか？ ぜひ、教えてください。 よろしくお願いいたします。 ------------------------------------------------------------- <style type="text/css"> <!-- body,h1,table,p,{font-size:13px;} --> </style> <script type="text/javascript"><!-- function large() { document.body.style.fontSize = "100%"; } //--></script> </HEAD> <BODY><INPUT type="button" onclick="large()" value="文字サイズ「大」"> <BR> <BR> あああああああああああああああああああああああああああああああ <TABLE border="1"> <TBODY> <TR> <TD>ああああ</TD> <TD width="111">あああああああ</TD> </TR> </TBODY> </TABLE> </BODY>

みんなの回答

  • 15mm
  • ベストアンサー率65% (65/100)
回答No.3

スタイルシートとして記述した文字列 body,h1,table,p,{font-size:13px;} （ちなみに,がひとつ多い？） を書き換える方法はあります。 「document stylesheets rules」あたりで検索してみてください。 でも自ら表示崩れを引き起こす自爆行為ですので文字サイズというのはいじらないほうがいいものです。

noname#84373
noname#84373
回答No.2

body,h1,table,p,{font-size:80%;}

回答No.1

付けないことを強く勧める。 代わりに、ブラウザ側のテキストサイズ変更機能に慣れてもらうのが吉。 スクリーンショット付きの手順を示したページにリンクを張ろう。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • コード整理・修正おねがいします。

    <html> <head><title>Century_1974のHP</title></head> <body bgcolor="#afafb0" text="#ffffff" link="#0033ff" vlink="#0000ff" alink="#ccff00"> <p></p> <p><br /><br /><br /></p> <div align="left"> <table height="76" width="1033" border="5"> <tbody> <tr> <td bgcolor="#0f2350" align="center"><span style="font-size: 300%;" size="7"><b><i> <i>Century_1974のホームページ</i></i></b></span></td> </tr> <tr> <td align="center"><marquee scrollamount="1">ようこそ。この度はアクセス有り難うございます。こまめに更新しているので、ブックマークへの登録を是非どうぞ。また、Twitterなどもやっております。そちらのフォローも是非よろしくお願いします。</marquee></td> </tr> </tbody> </table> </div> <hr /> <p>ようこそ。貴方は<a href="http://www.mini-counter.com/" target="_blank"><img src="http://www.mini-counter.com/group3/counter2.cgi?TAZ=85=5" alt="mini-counter" height="17" width="75" border="0" /></a>人目のお客様。</p> <hr /> <p>特に書くことも今のところ見当たらない。だけど、いまこういうシンプルなサイトって見直されていいと思う。</p> <hr /> <p>掲示板</p> <table height="118" width="718"> <tbody> <tr> <td bgcolor="#0f2350" align="center"><span style="font-size: 300%;" size="7"><b><i>Contents<br /></i></b></span></td> </tr> <tr> <td bgcolor="#ffffff"><a href="jikoshoukai.html"><span style="font-size: x-large;">自己紹介</span></a></td> </tr> <tr> <td bgcolor="#ffffff"><a href="gakkoukiroku.html"><span style="font-size: x-large;">学校記録</span></a></td> </tr> <tr> <td bgcolor="#ffffff"><a href="kaihatu.html"><span style="font-size: x-large;">開発室</span></a></td> </tr> <tr> <td bgcolor="#ffffff"></td> </tr> <tr> <td bgcolor="#ffffff"> <p><a href="mailto:n***@excite.co.jp"><span style="font-size: x-large;">リンク<br /></span></a></p> </td> </tr> <tr> <td></td> <td></td> </tr> </tbody> </table> <p></p> </body> </html> <body oncontextmenu="alert('右クリックは禁止です。');return false;"> <!-- text below generated by geocities.jp --></object></layer></div></span></style></noscript></table></script></applet><script language="javascript" src="http://bc.geocities.yahoo.co.jp/js/geov2.js"></script><script language="javascript">geovisit();</script> 誰かコード整理お願い。 右クリ禁止を正しく設定してください。 宜しくお願いします。

  • （超初心者）ウインドウサイズを小さくするには。

    今、HPB9.0にて、以下のページに対し、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="0"> <TBODY> <TR> <TD height="0" align="center" width="248"><FONT color="#ff0000">パスワードが誤っています。<BR> 再度入力して下さい。</FONT></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 以下のような記述で、サイズを指定したいのですが、 <script type="text/javascript"> <!-- window.resizeTo(300, 300); // --> </script> どこに（どのように）記述をすれば良いでしょうか？ ご教示下さい。

  • テーブルの中の文字もスタイルシートで設定するには

    <html> <head> <title>test</title> <STYLE TYPE="text/css"> <!-- h1 { font-size:50%;color:green; } '--> </STYLE> </head> <body> <h1> あああ <br> <table border=1> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> </h1> </body> </html> これだとブラウザで見た時にテーブルの外の文字しか適用されていませんが テーブルの中まで範囲は及ばないのでしょうか？ テーブルの中はテーブルの中専用のタグを作らないとダメでしょうか？ テーブルの外の文字と全く同じにしたいので一気に指定したいです。

    • ベストアンサー
    • HTML
  • テーブルの一つのtdタグだけ、文字を小さく

    テーブルの一つのtdタグだけ、文字を小さくしたい場合は、 この方法でいいのでしょうか？ <html> <head> <title></title> <STYLE type="text/css"> <!-- p { font-size: 20%; } '--> </STYLE> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>普通</td><td>普通</td></tr> <tr><td>普通</td><td><p>test</p></td></tr> </table> </body> </html>

    • ベストアンサー
    • CSS
  • 表示すると文字化けします

    下記のファイルが表示されると文字化けしてエンコードを修正しないとみれませんなぜでしょうか？ 日本語EUCになってしまします。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD bgcolor="#ffff00" width="699"><B><FONT size="+2">登録ありがとうございました</FONT></B></TD> </TR> <TR> <TD height="99" width="699"><B>■<A href="http*************************">使いこなすために</A>手順に沿って進んでください</B>→<A href="http**************************">次へ進む</A></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • tableでレイアウトが崩れる場合

    技術の足りなさからCSSにできなかったので、再度テーブルでサイズを指定してやってみようとしているところです。 どこかの数字がおかしくなっていると思うのですが、どうしてもわかりません。 ちゃんと表示できるブラウザとそうでないブラウザがあり、Firefoxは環境設定により表示が崩れる場合があります。 使用ソフトはビルダーの１１です。 なんでも良いのでどうぞアドバイスをよろしくお願い致します。 <body> <div ALIGN="center"> <table> <tbody> <tr> <td CLASS="td4" HEIGHT="70"> <table WIDTH="600" CELLSPACING="1" CELLPADDING="0"> <tbody> <tr> <td VALIGN="top" CLASS="td1" WIDTH="400" ALIGN="left" HEIGHT="180"> <b>文字 <textarea ROWS="15" COLS="70">文字</textarea><br> <br> </td> <td VALIGN="top" CLASS="td1" WIDTH="100" HEIGHT="180"> <table CELLSPACING="0" CELLPADDING="4"> <tbody> <tr> <td CLASS="td2" HEIGHT="16" WIDTH="100">文字</td> </tr> </tbody> </table> 文字 <br> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div> </body>

    • ベストアンサー
    • HTML
  • テーブルサイズ指定

    こんにちは。 困ったことがあるのですが、 <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170文字</TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TR></TBODY></TABLE> <BR> <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170>文字</FONT></TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TBODY></TABLE> (それぞれの文字の長さは違います。) という２つのテーブルで、 ２つともテーブルの幅が異なるんです。 これを、両方とも同じ幅にすることはできないでしょうか？ 宜しくお願いします。

    • ベストアンサー
    • HTML
  • formのtextの文字色を変えたい

    JavaScriptで１page目で指定したパラメータを2page目で別のフォーム内のtextボックスに記入する際、他にも作るテキストボックスと違う文字色にしたいのですが、方法が判りません。そもそもそんなことできないのでしょうか？ -------　1page目　------- <html> <head> <title>別ページのフォームにパラメータを送る</title> </head> <body> <table border="1" cellpadding="5" cellspacing="5" width="80"> <tbody><tr> <td align="center"> <input type="button" onClick="location.href='form2.html?No.001'" value="セット"></td> <td align="center"> <input value="閉じる" onClick="window.close()" type="button"> </td> </tr> </tbody> </table> </body> </html> -----　2page目　----- <html> <head> <title>別ページからのパラメータをフォームに書き込む</title> <script language="JavaScript"> <!-- function pdata() { para= location.search; para = para.substr(1,6); document.myform.number.value=para; } //--> </script> </head> <body onLoad="pdata()"> <table border="1" cellpadding="2" cellspacing="2" width="150"> <tbody> <form name="myform" method="post"> <TR> <TD >番　号</TD> <TD ><input name="number" type="text" id="番号" size="15" /></TD> </TR> </form> </tbody> </table> </body> </html>

  • avaSprictを使ってcookieに保存できるようにしたい

    JavaSprictで動かす計算式を作りました。 見よう見まねで初めて作ったので色々と変なところがあるかもしれませんが とりあえず動作はOKな状態になっています。 HTMLソースと、jsファイルの中身は下記のようになっているのですが このファイルのINPUT1とINPUT2、プルダウン1とプルダウン2の内容を JavaSprictを使ってcookieに保存できるようにしたいです。 jsファイルをどのようにすれば良いでしょうか？ できれば、Saveボタンのようなものが無い状態で cookieを削除するまでずっと保存できる形にしたいです。 【HTMLソース】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <SCRIPT type="text/JavaScript" src="test.js"> </SCRIPT> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.0.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE> test </TITLE> </HEAD> <BODY onload="SetTarget()"> <P> test </P> <TABLE> <TBODY> <TR> <TD> INPUT1 </TD> <TD> <INPUT type="text" value="200" size="11" onkeyup="NumOnly(this);Calc()"> </TD> </TR> <TR> <TD> INPUT2 </TD> <TD> <INPUT type="text" value="500" size="11" onkeyup="NumOnly(this);Calc()"> </TD> </TR> </TBODY> </TABLE> <TABLE border="1"> <TBODY> <TR> <TD><SELECT onchange="Calc()"> <OPTION value=",">プルダウン1 </OPTION> <OPTION value="1.4">P1-1 </OPTION> <OPTION value="1.5">P1-2 </OPTION> </SELECT></TD> <TD><SELECT onchange="Calc()"> <OPTION value=",">プルダウン2 </OPTION> <OPTION value="1.2">P2-1 </OPTION> <OPTION value="1.3">P2-2 </OPTION> </SELECT></TD> </TR> </TBODY> </TABLE> <HR> <SELECT onchange="ListSel(this.value)"> <OPTION value=",,"> リスト </OPTION> <option value="100,30,100"> リスト2 </option> <option value="1220,60,80"> リスト3 </option> </SELECT> <TABLE border="0" cellpadding="3" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#FFFFFF"> 1 <INPUT type="text" size="11" value="" onkeyup="NumOnly(this);Calc()"> </TD> <TD bgcolor="#FFFFFF"> 2 <INPUT type="text" size="11" value="" onkeyup="NumOnly(this);Calc()"> </TD> <TD bgcolor="#FFFFFF"> 3 <INPUT type="text" size="11" value="" onkeyup="NumOnly(this);Calc()"> </TD> </TR> </TBODY> </TABLE> <HR> <B> Ans </B> <TABLE border="1"> <TBODY> <TR> <TD>Ans1</TD> <TD>Ans2</TD> <TD>Ans3</TD> </TR> <TR> <TD><INPUT type="text" size="11"></TD> <TD><INPUT type="text" size="11"></TD> <TD><INPUT type="text" size="11"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

  • メールフォームについて質問です。

    メールフォームについて質問です。 <h3>ご注文ご依頼メール</h3> <span style="font-weight: bold;"></span> <center> <form style="margin-left: 0px; width: 800px;" method="post" action="当方アドレス" enctype="text/plain" name="メールフォーム"><br /> <table style="width: 694px; height: 202px;"> <tbody> <tr> <td style="text-align: center;"><b>お名前</b></td> <td style="width: 599px; text-align: left;"><input size="40" name="name" type="text" /></td> </tr> <tr> <td style="text-align: center;"><b>郵便番号</b></td> <td style="text-align: left;"><input size="20" name="郵便番号" /></td> </tr> <tr> <td style="text-align: center;"><b>ご住所</b></td> <td style="width: 599px; text-align: left;"><input size="80" name="jyusho" type="text" /></td> </tr> <tr> <td style="text-align: center;"><b>お電話番号</b></td> <td style="text-align: left;"><input size="40" name="電話番号" type="text" />　　<font color="#ff0000">（記入例）000-0000-0000</font></td> </tr> <tr> </tbody> </table> <br /> ご希望の商品名・数量などをお書き込みください。<br /> <table> <tbody> <tr> <td colspan="2" align="center"><b><font color="#ff00ff">ご記入内容に問題がなければ、送信するのボタンをクリックして下さい。</font></b></td> </tr> <tr> <td style="text-align: center;" colspan="2">　<input value="送信する" type="submit" />　　　<input value="取り消す" type="reset" /></td> というメールフォームを作ったのですが、送信ができません。 どこが間違っているのでしょうか？ 全くの素人なのでどこが違うのか見当もつきません。 それから、送信後に送信確認ページを表示させたいのですが、どうしたらよろしいでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する