ブラウザの表示サイズに合わせてフォントサイズを自動で変更する方法
- ブラウザの表示サイズに合わせてフォントサイズを自動で変更する方法について質問です。
- 特定の要素のフォントサイズをブラウザのサイズに合わせて自動的に変更する方法を教えてください。
- 具体的なコード例として、JavaScriptとCSSを使用してフォントサイズを自動で変更する方法を説明してください。
- ベストアンサー
ブラウザの表示サイズに合わせてフォントサイズを自動
お世話になっています。 以前、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> 引用ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
- kichi4182
- お礼率38% (52/136)
- CSS
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 「分かっていてあえてやる」ということで理解しました。 まあ、 ＞画像で表示していた表題 「表題」ってことはロゴか見出しなんだからやっぱり大きさ変わっちゃダメだろ、と思いますが、わざとやっているということでこれ以上のケチ付けはやめておきます。 さて。 いまさらですが、フォントサイズはちゃんと自動で変化していますね。 じゃあ何がダメかというと 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+"%"); これですね。 お気づきじゃないようですが、変数wpxで各ブロックの幅を取得していますが、それを連続して書いているために、結局wpxにはdiv#content2の幅が入っています。だから予定通りの文字サイズにならないんですね。 ということで、 var wpx = $("div#content").width(); var fpar = (Math.floor((wpx)/(400/100))); $("div#content").css("font-size",fpar+"%"); var wpx = $("div#content1").width(); var fpar = (Math.floor((wpx)/(400/100)))； $("div#content1").css("font-size",fpar+"%"); var wpx = $("div#content2").width(); var fpar = (Math.floor((wpx)/(400/100))); $("div#content2").css("font-size",fpar+"%"); とちゃんと毎回取得直後に計算するか、 function resize(block){ wpx = block.width(); fpar = (Math.floor((wpx)/(400/100))); block.css("font-size",fpar+"%"); } のように関数を用意して、 resize($("div#content")); resize($("div#content1")); resize($("div#content2")); のように呼ぶという方法があります。
その他の回答 (1)
- play_with_you
- ベストアンサー率37% (112/301)
質問に答える前に逆に訊ねなければいけない点があります。 ・「ブラウザのサイズに合わせてフォントのサイズを自動で変更」は、文字サイズの完全固定と同じくらい非常に迷惑なのは分からないんですか？（もしくはあえてやるんですか？） たとえばウィンドウサイズをモニタの縦横半分にしたい人は、望みもしないのに勝手に文字が小さくなって困るんですよ。 「望みもしないのに」というのが重要です。「アクセシビリティ」というのがあるんです。閲覧者に対し明確に不親切である表示や挙動はするべきではないんです。 恐らく3カラムのブログだと思いますが、そういうのは各ブロック自体の表示のされ方で調整しないといけません（例：ある程度の幅までは本文のブロックの幅が小さくなり、それ以下は全体が画面外へははみ出る）。
補足
ご意見ありがとうございます。 アクセシビリティについては、私自身が重度の身体障がい者であるため、人一倍気を使っているつもりです。 今回の件は、サイトのトップページに画像で表示していた表題をテキストにしたいと考え、可能な限り見た目を変えないように（画像との違い。サイズによる変化）したいと思って、質問させて頂きました。 勿論、フォントサイズの自動変更はここだけにするつもりです。
関連するQ&A
- フォントと文字サイズの指定方法
HTML初心者です。 どなたか助言ください。 以下のソースのようなテンプレHTMLを変更しないといけなくなりました。 以下のソース部分のフォントと文字サイズを指定するにはどのようにすればよろしいでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title><?=$item_title?></title> </head> <body> <div style="width:100%;text-align:center"> <div id="wrapper" style="margin:0px auto;font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#000;text-align:left;"> %IMAGES% <div class="sub_tit" style="padding-left:5px;height:25px;line-height:25px;border-left:solid 20px;color:#2214ff;font-size:25px;font-weight:bold;"> PRODUCT DETAILS </div> ＊＊＊＊以下で出力される文字のフォントと文字サイズを指定したい。 <p class="sub_text" style="padding-left:10px;padding-right:20px;"> %DESCRIPTION% </p> ＊＊＊＊ ......同じような内容が続く </body> </html> よろしくお願いいたします。
- ベストアンサー
- HTML
- ブラウザごとにCSS?
こんにちは。 HTMLとCSSを使ったホームページを作っています。 確認用のブラウザにSleipnirを使っています。 下のように記述し、ブラウザエンジンを切り替えて見たところ、それぞれ幅が違うことに気づきました。 幅が異なると、デザインもグチャグチャになってくるので、大変困っています。 これを回避、対処する方法を教えて欲しいです。 補足もなるべく早くさせてもらいます。 どうかよろしくお願いします。 <style type="text/css"> div{ border:solid #cccccc 1px; width:750px; margin:5px; } #all{ width:800px; height:auto; text-align:center; } #header{ height:200px; } #main{ height:auto !important; height:15em; min-height:15em; } #footer{ font-size:10px; height:2em; } </style> <div id="all"> <div id="header"> </div> <div id="main"> </div> <div id="footer"> </div> </div>
- ベストアンサー
- HTML
- Flashの表示について
FlashをSWFオブジェクトで表示しています。 回線が遅い場合、Flashが読み込まれる前に一瞬、Flashの表示領域の高さ(CSS)が反映されていない?のか、Flashの下に表示すべき領域がFlashの部分に表示されレイアウトが崩れます。 下記にFlashを表示させる部分に関係のあるHTMLとCSSを記載いたします。 ---------- HTML ---------- ・・・・・・・・・・・・・ <head> <script type='text/javascript' src='js/jquery-1.2.6.min.js'></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="js/swfobject.js"></script> </head> <body> ・・・・・・・・・・・・・ ・・・・・・・・・・・・・ <div id="top">・・・・・</div> <div id="flash"></div> <script type="text/javascript"> var flashvars = null; var params = { bgcolor: "#●●●"}; swfobject.embedSWF("movie.swf", "movie", "840", "250", "9.0.0","expressInstall.swf", flashvars, params); </script> <div id="buttom">・・・・</div> ---------- CSS ---------- #flash { width: 840px; height: 250px; } CSSの250pxが効いていないのかFlash領域の高さがない状態で、上のコンテンツ(div id="top">・・・・</div>)のすぐ下にコンテンツ(<div id="buttom">・・・・</div>)が表示されてしまいます。 解決策に関してどのようなことでも良いので教えてください。 よろしくお願いいたします。
- ベストアンサー
- その他([技術者向] コンピューター)
- ワードプレスのテーマParabolaの文字サイズ
記事タイトルのフォントサイズの変更方法をご存知の方はいませんか？ CSSで #content .entry-title { font-size: 36px;→font-size: 16px; font-weight: normal; line-height: 1.3em; padding:0px; margin: 0px; word-wrap:break-word; } とか #content .entry-content h1 { font-size: 36px;→font-size: 16px; } などと変更してもダメでした。 HTML的には <div id="main"> <div id="forbottom" > <div style="clear:both;"> </div> <section id="container" class="two-columns-right"> <div id="content" role="main"> <h1 class="entry-title">タイトル（ここの文字サイズを変更したい）</h1> という感じです。
- ベストアンサー
- CSS
- 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
- CSS font-size について
cssでfont-sizeを指定したのに反映されなくて困っています。（スクリーンショットをとって確認したところ） 12pxと13pxは11px 14pxと15pxは13px 16pxは15pxになってしまいます。 プログラムは次のように打ちました。お願いします。 <HTML> <HEAD> <TITLE>無題ドキュメント</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- h1 { font-size: 12px; font-weight: normal} h2 { font-size: 13px; font-weight: normal} h3 { font-size: 14px; font-weight: normal} h4 { font-size: 15px; font-weight: normal} h5 { font-size: 16px; font-weight: normal} --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <h1>春夏秋冬 12px</h1> <h2>春夏秋冬 13px</h2> <h3>春夏秋冬 14px</h3> <h4>春夏秋冬 15px</h4> <h5>春夏秋冬 16px</h5> </BODY> </HTML>
- ベストアンサー
- 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のプロは閲覧者にサイズは決めてもらったほうが良いのでもう今後は使わない方向に行っているのでしょうか？
- ベストアンサー
- JavaScript
- Thickboxを自動で閉じることは不可能でしょうか？
お世話になります Thickbox.jsを使用してloading graphのようなものを作っているのですが100%になったら自動で閉じるようにはできないでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>Thickbox</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/thickbox.js"></script> <link rel="stylesheet" href="./css/thickbox.css" type="text/css" media="screen" /> </head> <body><div id="wrapper"> <a href="search.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=90&width=300" title="charasearch" class="thickbox"> <input type="button" value="character search" class="search"> </a> </div> </body> </html> <<search.html>> 実際にはhtmlファイルではなくcgiファイル(search.cgi)で処理を行っています Thickbox.cssをいじって本文のみ表示させてます（上側のTitleやcloseボタンはdisplay:none;しています 必要なとこだけになりますが・・・ <script type="text/javascript"><!-- window.onload = function() { Timer = setInterval('counts()',1); } w=0; function counts() { w += 1; document.getElementById("graph").style.width = w + "px"; if(w >= 300) { clearInterval(Timer); } } //--></script> <style type="text/css"><!-- #graph { width:0px; height:20px; background-color:red; margin-top:5px; float:left; } --></style> <div id="graph"><div> ページを移動させていけば簡単なのですが大まかな流れとして id,passなどを入力 character searchボタンを押す Thickboxでseach.cgiを呼び出しchara.cgiの中から同じものがないか調べる あればエラー表示、なければ続けて入力といった感じにしています
- ベストアンサー
- JavaScript
- 画像メインの１カラムのリキッドデザインができません
画像をメインにした１カラムのリキッドデザインを作成したいのですが、画像の縦横比が崩れて縦長になりながら可変してしまいます。どのようにcssを設定したらよろしいでしょうか？いろいろ検索したりしましたが、うまくできません。 また、こちらの質問機能じたい初めてさせていただいています。至らないことがあるかもしれませんが、ぜひともよろしくお願い致します。急ぎで解決したいです。＾＾； ---------------- <html> <head> <meta charset="UTF-8" > <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=0.5,user-scalable=yes,initial-scale=1.0"/> <link rel="stylesheet" href="css/a3.css" type="text/css" > <title></title> </head> <body> <div id="wall" > <div id="box"> <img src="css/images/main.jpg"> </div> </div> <div id="footer"><img src="css/images/foot.jpg"></div> </body> --------------------------- body{ width:100%; height:100px; max-height:720px; } #wall{ display:block; width:100%; height:100%; margin:0 auto; min-width:720px; min-height:325px; max-width:1440px; max-height:650px; background-image:url(images/G1.jpg); background-size: 100% 100%; } #box{ width:100%; height:100%; min-width:720px; min-height:325px; max-width:1440px; max-height:650px; } #footer { width:100%; margin:0 auto; min-width:720px; min-height:35px; max-width:1440px; max-height:70px; }
- ベストアンサー
- CSS
- IEとその他のブラウザの表示
よろしくお願いします 現在、2段落の段組をCSSで行っています 但し、1段落目と2段落目にはマージンを指定しています そこで質問なのですが どこかのサイトでfloatとmarginは一緒に指定しないほうが良いというのを見たので --------------------------------- style.css --------------------------------- div.box_left_outer{ width: 300px; background-color: #FFF9E5; float: left; } div.box_left{ width: 260px; margin: 20px 20px 20px 20px; } div.box_right_outer{ width: 310px; float: left; } div.box_right_outer2{ width: 300px; margin-left: 10px; background-color: #FFF9E5; } div.box_right{ width: 260px; margin: 20px 20px 20px 20px; } --------------------------------- test.html --------------------------------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div class="box_left_outer"> <div class="box_left"> テキスト </div> </div> <div class="box_right_outer"> <div class="box_right_outer2"> <div class="box_right"> テキスト </div> </div> <body> </html> という風に書いているのですが IEだと意図した表示になるのですが Firefoxやその他のブラウザだと右側の段組のマージンの箇所が 1つ上のdivについている感じになります Firefoxなどでも同じ表示にするにはどうしたらいいでしょうか？ よろしくお願いします
- ベストアンサー
- HTML
お礼
ありがとうございました。出来ました。