• 締切済み

フォントサイズの変更(CSS、Javascript)

いつもお世話になっております。 スタイルシートで設定しているフォントサイズを、 <select>タグによるメニューにて、 任意のサイズに変更させる機能をつけたいと 考えています。 (メニューからフォントサイズを指定する) IEは問題ないのですが、NNだと、 まったくだめです。 NNで同じようにフォントサイズを変更するには、 どうすればよろしいのでしょうか? 問題点*********************************** IE5.01、5.5だと、問題なく変更できました。 NN4.75で行うと、だめでした。 OSはWindows(98、2000、Me)です。 記述:*********************************** <head>タグ内 <script language = "javascript"> <!-- //親フレームから、現在のフォントサイズを取得。 var changeSize = parent.fontSize; var str = "<style type=\"text/css\">"; str += "body{font-size:" + changeSize + "}"; str += "</style>"; document.write(str); function changeFontSize(TargetFont){ var Sel=TargetFont.selectedIndex; var lclFontSize = TargetFont.options[Sel].value; //親フレームに変更後のサイズを格納 parent.fontSize = lclFontSize; location.reload(); } //--> </script> <body>タグ内 <select name="OP1" onChange="changeFontSize(this);"> <OPTION value="10">10pt</option> <OPTION value="20">20pt</option> <OPTION value="20">30pt</option> </select> ****************************************** 補足: メニューで選択されたフォントサイズを取得して、 ページをreloadします。 親フレームにフォントサイズを一度格納するのは、 他の子フレームすべてにフォントサイズを対応させるためです。

みんなの回答

  • selene_pl
  • ベストアンサー率49% (102/207)
回答No.2

回答ではありませんが、少し気になったので。 >(メニューからフォントサイズを指定する) >IEは問題ないのですが、NNだと、 >まったくだめです。 これは、サイズ指定にptを使い、絶対指定しているからだと思います。 ptではなく%を使えば、わざわざスクリプトで変えさせなくても メニューから変えられるはずですよ。 ちょっと大きくしたいのであれば、font-size:110%; とかすればいいです。

hide_momiji
質問者

お礼

ありがとうございます。 >これは、サイズ指定にptを使い、 >絶対指定しているからだと思います。 NNでもpt、%、両者ともに指定できるはずです。 実際にやってみました。 >メニューから変えられるはずですよ。 ですよね~? そうしたいところなんですが、 コンテンツの仕様として、 メニュー非表示でやらなくては、 ならないんです。 結果的にうまくいきました。 body要素ってNNは対応していないんでしたっけ? body要素をはずして、 classで指定するとうまくいきました。 みなさまヒントをいただきありがとうございました。

noname#199778
noname#199778
回答No.1

ちょっと気になるのですが、質問文の中のスタイル要素の記述ではフォントサイズの値に単位が付属しないように見えますが、CSSでのフォントサイズの指定は単位をつける必要があったと思います。 正確を期すのであれば、 str += "body{font-size:" + changeSize + "pt}"; などとするか、<option>タグのvalueの値に単位を付加した方が良いと思います。 これが直接解決策になるかどうかはわかりませんが… 失礼しました。

hide_momiji
質問者

お礼

試してみたところ、解決まではいたりませんでしたが、 単位の付加は必要だと思います。 ありがとうございます。

関連するQ&A

  • 文字の書体&サイズを変更する方法。

    HP製作支援系のサイトを検索したのですが、 解決策が見つからなかったのでこちらにて質問致します。 テキスト系のサイトを作ろうと思っています。 閲覧者の方が自由に書体やフォントサイズを変更できるような記述を探していたところ、 --------------------------------------------------- ↓フォントサイズ変更 <select onchange="document.body.style.fontSize=this.value;"> <option value="12pt">12pt</option> <option value="11pt">11pt</option> <option value="10pt" selected>10pt</option> <option value="9pt">9pt</option> <option value="8pt">8pt</option> </select> ↓書体変更 <select onchange="document.body.style.fontFamily=this.value;"> <option value="Osaka" selected>Osaka</option> <option value="MS ゴシック">MSゴシック</option> <option value="MS 明朝">MS明朝</option> </select> --------------------------------------------------- といった同フレーム内の文字を変化させる記述を見つけました。 しかし、問題があります。 <b> <i> <a href="***"> 等のタグならば問題なく変更が適応されましたが、 <table> <input> <textarea> 等のタグになると変更が適応されず変化がありません。 変化の適応されないタグで囲まれた中の文章も適応させるには、 どのように記述を変更すればよいのでしょうか? もしくは変化させる事は不可能なのでしょうか? 将来的には別フレームでも同一の動作ができるようにしたいと思っております。 ご回答、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSSの{font-size:}について

    CSSで{font-size:○○pt;}ってタグがありますよね? そのタグを使ってHPを作ろうと思ってるんですが、 調べてみたら{font-size:○○pt;}では見てる人のブラウザで サイズ変更ができないとのことです。 僕のHPは少し小さめのフォントを使おうと思っているので 見る人が字が小さくて読みずらい、大きさを変えよう。 と思っても変えられないってのは困りますよね? フォントサイズを、中のときあたりに、12ptぐらいにして(標準を決める。みたいな?) ブラウザでフォントサイズを変えると、少し大きくなったり小さくなったりする。。。 ってかんじにしたいんです。 ワケワカメな質問ですみませんw よろしくお願いします。

  • スタイルシートのフォントサイズの変更

    下記のようなことをしたいのですが、簡単かと思ったものの下記より進みませんでした。 (^^; <STYLE TYPE="text/css"> <SCRIPT language=JavaScript> function set(n) ※選択ボックスの数値を変更したときにスタイルシートのフォントサイズを変更したい。 </SCRIPT> <!-- body { font-size:★pt } --> </STYLE> <SELECT NAME="moji" onchange="set()"> <OPTION SELECTED>10</OPTION> <OPTION VALUE="20"></OPTION> <OPTION VALUE="30"></OPTION> <OPTION VALUE="40"></OPTION> <OPTION VALUE="50"></OPTION> </SELECT>

  • javascriptとcssでフォントサイズを切り替えたい

    javascriptとcssでフォントサイズを大中小で切り替えたいと思い、いろいろとサイトをまわりながら以下のようなものを作成しました。 しかし、どうもうまく動いてくれません。 ●●●●●javascript●●●●● function fontChange(str){ var targetFile; switch(str){ case "small": targetFile="../css/font_small.css"; break; case "medium": targetFile="../css/font_medium.css"; break; case "big": targetFile="../css/font_big.css"; break; default: alert("error"); break; } //フォント用CSSのファイル名をクッキーの値として保存 //フォント切り替え機能をサイト全体適用するためpathに/(ルート)を指定 document.cookie="fontstyle="+targetFile+";path=/;"; window.location.reload(); //ページをリロードして設定を反映。 } //以下はページが読み込まれる際必ず実行される処理 var name="fontstyle"; var cookie=document.cookie; //クッキーを取得 if(-1==cookie.indexOf(name)){ //クッキーがなければmediumを指定(デフォルト) var file='../css/font_medium.css'; }else{ var pos_s=cookie.indexOf(name)+name.length+1; //クッキーの値の開始位置 var pos_e=cookie.indexOf(";",pos_s); //クッキーの値の終了位置 if(-1==pos_e){ //末尾にセミコロンがあるか? var file=cookie.slice(pos_s); //無い }else{ var file=cookie.slice(pos_s,pos_e); //有る } } //クッキーの値に対応するCSSを読み込む。 document.write('<link rel="stylesheet" href="'+file+'" type="text/css" />'); ●●●●●css●●●●● 各種用意しました ●●●●●XHTML●●●●● <ul> <li onclick="fontChange('big')">大</li> <li onclick="fontChange('medium')">中</li> <li onclick="fontChange('small')">小</li> </ul> ちなみにこちらのサイトを参考にいたしました。 http://ks-product.com/arc/2007/01/0701082109.html また、XHTML内の<li onclick~>というのをCSSにして<li id="●●">にしたいと思っているのですが、その際CSSにはどのように記載すればよろしいのでしょうか? 長々と大変申し訳ありませんが、よろしくお願いいたします!

  • フォントサイズの変更

    jqueryを使用したフォントサイズの変更について質問です。 サイズの変更は以下のスクリプトで動作するのですがクラス名(active)が付与されずうまく動作しません。 html <ul class="switch"> <li><span class="fontChangeSmall">小</span></li> <li><span class="fontChangeNormal">中</span></li> <li><span class="fontChangeLarge">大</span></li> </ul> font-change.js $(document).ready(function() { var bodyClass = 'font'; var switchClass = 'fontChange'; var startClass = 'Normal'; var activeClass = 'active'; var value = $.cookie('fontSize'); if ( value ) { $('body').addClass(bodyClass + value); $('.switch .' + switchClass + value).addClass(activeClass); } else { $('body').addClass(bodyClass + startClass); $('.switch .' + switchClass + startClass).addClass(activeClass); } $('.switch span').click( function() { value = $(this).attr('class').replace(switchClass, ''); $('body').removeClass(bodyClass + 'Normal').removeClass(bodyClass + 'Small').removeClass(bodyClass + 'Large'); $('body').addClass(bodyClass + value); $('.switch span').removeClass(activeClass); $('.switch .' + switchClass + value).addClass(activeClass); $.cookie('fontSize', value); }); }); 上記だけであれば動作するのですが下記のスクリプトがあるとactiveが付与されない状況です。 下記をコメントすると正常に動作します。 ※どちらのjsも外部ファイルとして読込みしてます。 common.js $(function() { $('body :first-child').addClass('firstChild'); $('body :last-child').addClass('lastChild'); }); どのようにすればactiveが付与されるようになりますでしょうか?

  • コンボボックスのOPTIONごとにフォントサイズを指定したい

    コンボボックスの幅サイズが決まっているため、 文字数の長い選択肢(OPTION)FONTSIZEを小さくしたいのですが、 色は変えられたものの、大きさを変えることができません。 <OPTION VALUE="A" STYLE="FONT-SIZE=○○">やSTYLE="SIZE=○○"> ではダメでした。 これって不可能ですか?  

  • cssでフォントサイズを相対指定。→NNで小さすぎ

    webデザイナーを目指しただ今、HP制作勉強中の者です。 Win&Mac(IE5.5、NN4.7、7.0)で確認作業しています。 IE、NNで共にフォントサイズの固定をせずに、尚且つ、IEでの表示文字サイズ「中」を基準として、程よい大きさで表示をさせたいと思い、cssで相対サイズの font-size:x-small を指定しました。 IEではうまい具合にいくのですが、NNの方で、大きさは可変するものの、デフォルト(文字の大きさ100%)で小さすぎになってしまい、どうにかこのような状況を避け、下記のような条件でフォントサイズを制御したいのですがどんな方法がありますでしょうか? ●NN、IEともにサイズ固定させたくない ●NNデフォルトで、読みやすいくらいのフォントサイズで表示したい ptで指定すると、IEでは固定されてしまいます。 ユーザーがNNのブラウザの設定をいじって、デフォルトサイズを変更しない限り無理なのでしょうか? また、IEとNNで別々のcssを適用させるなどの方法が存在するのでしょうか? NNでの表示は目をつぶりますか? 又、商業的なサイトを制作されている方は、文字サイズを固定させたくない場合にどんな指定をしますか?

    • ベストアンサー
    • HTML
  • フォントサイズ

    タグを記入しながらHPを作っているんですが、フォントサイズを指定するとき、 通常は<font size="フォントのサイズ">で指定しますが、フォントサイズを ptで指定するにはどう記入すればいいのでしょうか? どなたか知っているかたがいましたら教えて下さい。 よろしくお願いします。 (CSSでの指定の仕方もあったら教えて下さい)

    • ベストアンサー
    • HTML
  • 入力フォームの文字の大きさとフォント種類を表示させたい

    入力フォームの文字の大きさとフォント種類を 確認ボタンで画面上に表示させたいのですが、エラーになってしまいます。また、文字の大きさは反映されますが、フォントの種類は反映されません。どのようにすればいいでしょうか? <HTML> <HEAD> <STYLE type="text/css"> <!-- INPUT {font-size: 12px;} --> </STYLE> <SCRIPT language="JavaScript"> <!-- // フォームの文字の大きさと種類を変更 function sizeTxt(n){ document.nForm.textN.style.fontSize = n.options[n.selectedIndex].value + "px"; } function fontTxt(n){ document.nForm.textN.style.fontFamily = n.options[n.selectedIndex].value; } function check(){ var strName; strName = document.nForm.textN.value; var test = document.getElementById("test"); test.innerHTML = strName; var strName2; strName2 = document.nForm.textN.value; var test2 = document.getElementById("test2"); test2.innerHTML = strName2; var size = document.nForm.sizeSelect; test.style.fontSize = size.options[size.selectedIndex].value + "px"; var element = document.nFORM.fontSelect; test2.style.fontFamily = element.options[element.selectedIndex].value; } </SCRIPT> </HEAD> <BODY> <FORM name="nForm" > フォントサイズを選択できます。<br> <SELECT onChange="sizeTxt(this)" name="sizeSelect"> <OPTION value="8">8px</OPTION> <OPTION value="10">10px</OPTION> <OPTION value="12" selected>12px</OPTION> <OPTION value="16">16px</OPTION> <OPTION value="20">20px</OPTION> <OPTION value="24">24px</OPTION> <OPTION value="30">30px</OPTION> </SELECT><br><br> フォント種類を選択できます。<br> <SELECT onChange="fontTxt(this)" name="fontSelect"> <OPTION value="MS ゴシック">ゴシック</OPTION> <OPTION value="MS 明朝" selected>明朝</OPTION> </SELECT><BR><BR> <INPUT type="text" size="45" name="textN"><BR> <input type="button" value=" 確認 " onClick="check()"> </FORM> <DIV id="test" id="test2" id=text style="position:absolute;font-size:24px;font-family: Verdana, sans-serif;"> </DIV> <SCRIPT language="JavaScript"> </SCRIPT> </BODY> </HTML>

  • フォントサイズを変えるには?

    print "<table width=600 border=0 align=center> <tr> <td align=center>\n"; print "<br><br><font size='2' color=$t_color><small>*** 編集・削除用 ***</small></font><br>\n"; print "<select name=mode>\n"; print "<option value=usr_edt>編集\n"; print "<option value=usr_del>削除</select>\n"; print "パスワード <input type=password name=pwd size=4 maxlength=8>\n"; print "<input type=submit value=\"送信\"> </form> </td> </tr> </table>\n"; 上の、「編集」と「削除」という文字のサイズを変えたいのですが、 どうすればいいのですか? <font size='2'>とか入れたけど、変わりませんでした。 (入れた場所が悪かったのかな??) お願いします。

    • ベストアンサー
    • CGI