Javascriptフォントサイズ変更 - Firefoxでの表示について

前へ 次へ
このQ&Aのポイント
  • Twitterのつぶやきを外部表示する際に、フォントサイズやフォントの色が思った通りに表示されない現象が発生しました。IEやSafariでは適切に表示されていますが、Firefoxでは正しく表示されません。
  • IEやSafariではフォントサイズ変更が適用されてくれるのですが、Firefoxでは囲んだフォントタグが効果を持ちません。
  • Firefoxでも適切にフォントサイズ変更を行うためには、別の方法を用いる必要があります。具体的な方法については他の解答者に質問してみましょう。
回答を見る
  • ベストアンサー

Javascript　フォントサイズ変更

Twitterのつぶやきを外部表示したらフォントサイズが大きくフォントの色も黒いままだったので、 <FONT size="1" color="#ff0000"> <div id="twitter_div"><ul id="twitter_update_list"></ul></div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/○○（ID）.json?callback=twitterCallback2&amp;count=2"></script> </FONT> とフォントタグで囲んだところ、IEとSafariでは小さくなったのですが、 Firefoxでは表示がそのままでした。 Firefoxでもちゃんと表示できるようにするにはどうしたらいいでしょうか。

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

  • ベストアンサー
  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.1

FONT タグの下には、インライン要素しか置けないので、FireFox での動作が正しい動作とおもわれます。（DIV, UL ブロックレベル要素なので FONT の下には置けません。） それから、FONT は非推奨とされているので、なるべく使わないほうが良いとおもいます。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/graphics.html#h-15.2.2 表示の指定をする場合は、スタイルシートで、 #twitter_div{ /* 又は #twitter_update_list */ font-size : 10px; color : #FF0000; } としてみてください。

iganaa
質問者

お礼

丁寧な解説ありがとうございます。解決致しました。 これを機会にいろいろ勉強してみたいと思います。

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

関連するQ&A

  • javascriptでの表示について

    他のページの<div><ul></ul></div>の間の文字を拾ってくるjavascriptがあります。 【ベースページ】 <script type="text/javascript"> $(function(){ $("#test").load("https://hoge.ne.jp/read.php#test ul", function(data) { if(data == null){ $("#test").append("読込みに失敗しました"); } }); }); </script> 【読み込みページ】 read.php <div id="test"><ul> テストです </ul></div> 【ベースページ】に <div id="test"></div> と記載すると、読み込みページの<div><ul></ul></div>の間の文字「テストです」を拾ってきます。 これをjavascript内で表示したいと思います。 <script> document.write( document.getElementById('read77') ); </script> では表示されません。 どのように書けば表示されますでしょうか?

  • 表の文字サイズ変更ボタンについて教えてください。

    表の文字サイズ変更ボタンについて教えてください。 以前、以下の内容で質問したのですがサンプルを掲載しなかったので再度質問させてください。大きな表をひとつ作成してその中をメニューボタンやコラムの場所用に分割配置したページを作成しました。jqueryをアレンジして、文字サイズボタン作成して動かしてみるのですが、表の中にある文字サイズが変更されません。表を使用せずにネット上に出ているjsファイルを使用してテストページを作成するとうまく文字サイズが変わってくれるのですが・・・・？　以下がアレンジしたソースです。 <script type="text/javascript" src="/jquery.js"></script> <script type="text/javascript" src="/jquery.textresizer.js"></script> <script type="text/javascript" src="/jquery.cookie.js"></script> 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; } <script> $(function(){ $("ul.textresizer a").textresizer({ target: "#content", sizes: [ ".8em", "1em", "1.5em", "2em" ] }); }); </script> </head> <body> <BODY> <div id="content"> <DIV id="container"> <div id="main"> <DIV id="header" align="center"> <TBODY> <TR> <TD align="right" nowrap style="font-size : 10px;"> <ul class="textresizer"> <li><a href="javascript:void(0)" class="small-text" title="Small">A</a></li> <li><a href="javascript:void(0)" class="medium-text" title="Medium">A</a></li> <li><a href="javascript:void(0)" class="large-text" title="Large">A</a></li> <li><a href="javascript:void(0)" class="larger-text" title="Larger">A</a></li> </ul> </TD> ・ ・ ・ </div> </div> </div> </div> 自分の希望としては、ボタンを押すごとに大きくなったり、小さくなったりしてほしいのですが・・・？ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • フォントサイズを変更するボタンについて

    JQUERYでフォントサイズを変更するボタンを導入したのですが、CSSでフォントサイズを指定していると変更ボタンを押しても変更しません。 下記のようなソースなのですが、CSSのimportantのような事はJQUERYでは出来ないのでしょうか？ 優先順位はCSSより低いのでしょうか？ <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul+ul a").textresizer({ target: "#contentsleft,#contentsright,.copyright,address",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> また、最近あまり見なくなったのですが、WEBのプロは閲覧者にサイズは決めてもらったほうが良いのでもう今後は使わない方向に行っているのでしょうか？

  • spinelzのjavascript使用方法

    javascript初心者です。 spinelzのjavascript(外部ファイル）使用方法について質問があります。 今、”Grid”のデモ(http://script.spinelz.org/index.html)をコピーして、（データの変更が可能な）テーブルを作成しようと思っています。 以下のように作成すると、テーブルのデータは表示されるのですが、デモのようには動きません。 (外部ファイルのjavascriptが呼び出されていないようです。) どなたかご教授いただけませんでしょうか。 ↓HTML↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <!-- #BeginTemplate "../Templates/01.dwt" --> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <title>TEST</title> <link href="../css/01.css" rel="stylesheet" type="text/css"> </head> <body> <!-- - ここから JavaScript 記述です。 - --> <script src="../Public\javascripts/spinelz/grid.js" type="text/javascript"></script> <script src="../Public\javascripts/spinelz/grid_resizeEx.js" type="text/javascript"></script> <script src="../Public\javascripts/spinelz/grid_sortabletableEx.js"　type="text/javascript"></script> <!-- - ここまで JavaScript 記述です。 - --> <table> <tr> <td>Column</td> <td> <input type="button" class="button" value="add" onclick="grid.addColumn(grid.targetColIndex,'new Column');" /> <input type="button" class="button" value="remove" onclick="grid.deleteColumn(grid.targetColIndex);" /> </td> </tr> 　・ 　・ 　(ボタンの記述) 　・ 　・ </table> <div id="grid_container" > <table width="100%" border="0"> <thead> <tr> <td class="top" style="height: 22px">日付</td> </tr> </thead> 　・ 　・ 　(テーブルのデータを記述) 　・ 　・ </table> </div> ↓javascriptは下記パスに保管↓ ・「Public\javascripts/spinelz/grid.js」 ・「Public\javascripts/spinelz/grid_resizeEx.js」 ・「Public\javascripts/spinelz/grid_sortabletableEx.js」 以上です。よろしくお願い致します。

  • jQueryのタブにスクロールバーをつけたい

    jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？

  • javascriptで文字サイズの変更

    HP初心者です。 書籍通りに作ってみてのですが文字は変更されるのですが、 作った大中小の画像？までクリックするとズレてしまいます。 文字だけが変更されるのを希望してます。 ↓見てやって下さい http://www.d-judge.jp/d-judge/test.html ソースは HTML↓ <div id="header"> <div class="font_size"> <ul> <li><img src="images/txt_size.gif" alt="文字サイズ" width="68" height="14" /></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('l')" class="textL"><span>大</span></a></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('m')" class="textM"><span>中</span></a></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('s')" class="textS"><span>小</span></a></li> </ul> </div> <p>ああああああ テストです。</p> </div> css↓ /* 文字サイズ ----------------------------*/ #header .font_size { margin: 2.5em 0px 0px; position: absolute; left: 86px; top: -2px; width: 250px; text-align: right; height: 24px; } #header .font_size li { padding: 0px 0px 0px 1em; float: left; list-style: none; } #header .font_size li img { margin-top: 5px 0; } #header .font_size ul li a { height: 24px; width: 24px; display: block; } #header .font_size ul li a span { display: none; } #header .font_size ul li .textL:link, #header .font_size ul li .textL:visited, #header .font_size ul li .textL:active { background-image: url(images/text_L.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textL:hover { background-image: url(images/text_L_o.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textM:link, #header .font_size ul li .textM:visited, #header .font_size ul li .textM:active { background-image: url(images/text_M.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textM:hover { background-image: url(images/text_M_o.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textS:link, #header .font_size ul li .textS:visited, #header .font_size ul li .textS:active { background-image: url(images/text_S.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textS:hover { background-image: url(images/text_S_o.gif); background-repeat: no-repeat; background-position: left top; } javascript↓ /*フォントサイズ変更*/ function changeFsize(fontsize) { var change = document.getElementsByTagName("body")[0]; switch(fontsize) { case "s": var percent = "62.5%"; break; case "m": var percent = "75%"; break; case "l": var percent = "85%"; break; } change.style.fontSize = percent; } です。 どなたかお分かりになる方宜しくお願いしますm(＿ ＿ )m

  • ブラウザの表示サイズに合わせてフォントサイズを自動

    お世話になっています。 以前、http://okwave.jp/qa/q8296498.htmlで、質問をさせて頂いて、それなりのページは出来たのですが、新たな質問が．．．．． ブラウザの表示サイズに合わせてフォントサイズを自動で変更する方法（http://blog.4galaxy.net/77.html）を参考にtoppage.phpを作ったのですが、１ページの中で、サイズの違う文字列をブラウザのサイズに合わせてフォントのサイズを自動で変更するには、どうしたら良いですか？ 因みに以下が、私が参考のページを分からないなりに修正したものです。 引用ここからーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <!DOCTYPE HTML> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function AutoFsize(){ var wpx = $("div#content").width(); var wpx = $("div#content1").width(); var wpx = $("div#content2").width(); var fpar = (Math.floor((wpx)/(400/100)));// 横幅px ÷ (最少幅px/100) $("div#content").css("font-size",fpar+"%"); $("div#content1").css("font-size",fpar+"%"); $("div#content2").css("font-size",fpar+"%"); } setInterval(AutoFsize,1000);//ミリ秒ごとに横幅チェック //written by http://blog.4galaxy.net/ --> </script> <style type="text/css"> div#content { width:140%; min-width:400px; } div#content1 { width:40%; min-width:400px; } div#content2 { width:100%; min-width:400px; } </style> </head> <body> <div id="content">ここの文字サイズが変わります</div> <div id="content1">ここの文字サイズが変わります</div> <div id="content2">ここの文字サイズが変わります</div> </body> </html> 引用ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

    • ベストアンサー
    • CSS
  • JavaScriptのinnerHTMLの挙動について

    下で"JavaScript内からJavaScriptを書き出したいのですが"で質問したものですが，ソースコードを簡単にして再質問したいと思います． ソースは以下のようにし，divタグのところにinnerHTMLで文字"test"とJavaScriptでアラートを表示させるものです．表示してみたところ，"test"は表示されるのですが，アラートは出てきません． これはinnerHTMLではHTMLのタグは評価されるが，JavaScriptは評価されない，ということなんでしょうか．JavaScriptのこのような仕様は調べにくいので困っています．回答宜しくお願いします． <html><head><title></title> <SCRIPT type="text/javascript"> <!-- var str='<font color="blue">test</font><script type="text/javascript">alert(123);</script>'; function gogo(){ document.all("here").innerHTML = str; } //--> </SCRIPT> </head><body> <div id="here" style="position:absolute;width:600px;left:0px;top:0px;"></div> <SCRIPT type="text/javascript"> <!-- gogo(); //--> </SCRIPT></body></html>

  • javascriptで文字サイズ変更-cssが効かない

    こちらのサイトのスクリプトを使用してやってみています。 http://www.nrym.org/storeroom/neta/01_fontsize/ line-heightを各サイズで指定したいのと、このスクリプトでは縮小率拡大率％指定になっているのですが、これをピクセル指定にしたいのです。 そこで下記のように書き換えました。 fontchanger.js ------------------------------------------ show: function() { var id = this.id; document.writeln([ '<div id="' + id + '">', '<img src="moji.gif" width="50" height="20" alt="文字の大きさ" class="moji" />', '<a href="javascript: void(0);" id="' + id + '-small" title="文字を小さくする"><img src="moji_s.gif" width="20" height="20" alt="小" class="moji" /></a>', '<a href="javascript: void(0);" id="' + id + '-medium" title="文字を標準に戻す"><img src="moji_m.gif" width="20" height="20" alt="中" class="moji" /></a>', '<a href="javascript: void(0);" id="' + id + '-large" title="文字を大きくする"><img src="img/size_l.gif" width="20" height="20" alt="大" class="moji" /></a>', '</div>' ].join("\n")); Event.observe($(id + '-small' ), 'click', this.onClickSmall.bind(this)); Event.observe($(id + '-medium'), 'click', this.onClickMedium.bind(this)); Event.observe($(id + '-large' ), 'click', this.onClickLarge.bind(this)); }, onClickSmall: function(e) { this.change('10px' ); }, onClickMedium: function(e) { this.change('12px'); }, onClickLarge: function(e) { this.change('14px'); } }; css ------------------------------------------------- body{ font-size:12px; line-height:14px; } #fffsss{ width:100px; margin:0; padding:0; } #fontChanger{ } #fontChanger-small{ font-size:10px; line-height:12px; } #fontChanger-medium{ font-size:12px; line-height:14px; } #fontChanger-large{ font-size:14px; line-height:16px; } html ------------------------------- <div id="fffsss"> <script type="text/javascript"> <!-- FontChanger.start('js/fontChanger'); //--> </script> </div> ----------------------------------------------------- これがサイズは変更できるのですが、cssが効きません。 line-heightを指定できて、単位は全てピクセルにするにはどうしたらいいでしょうか？よろしくお願い致します。

  • JavaScript　メソッドの呼び出し方について

    単純な質問で恐縮なのですが html内で、数か所、JavaScriptのInnerHTMLを使って表示させたい箇所があります。 <body> <div id="1"></div> <div id="2"></div> <body> たとえば、こうなっていたとして、idが1のところは、 JavaScriptのメソッド、Start(1)、2のところは、 Start(2)として、引数にIDを入れ、結果のInnerHTMLを 出力させたいです。 こんな感じでいけるんでしょうか？ <body> <script type="text/javascript"> Start(1); Start(2); </script> <div id="1"></div> <div id=""2"></div> </body> うまく動かず困っています。 Onloadとかトリガがあって指定する方法ならわかるのですが。 動かし方を教えていただけないでしょうか。 宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する