- ベストアンサー
ブラウザの表示サイズに合わせてフォントサイズを自動で変更する方法
- ブラウザの表示サイズに合わせてフォントサイズを自動で変更する方法について質問です。
- 特定の要素のフォントサイズをブラウザのサイズに合わせて自動的に変更する方法を教えてください。
- 具体的なコード例として、JavaScriptとCSSを使用してフォントサイズを自動で変更する方法を説明してください。
- みんなの回答 （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カラムのブログだと思いますが、そういうのは各ブロック自体の表示のされ方で調整しないといけません（例：ある程度の幅までは本文のブロックの幅が小さくなり、それ以下は全体が画面外へははみ出る）。
補足
ご意見ありがとうございます。 アクセシビリティについては、私自身が重度の身体障がい者であるため、人一倍気を使っているつもりです。 今回の件は、サイトのトップページに画像で表示していた表題をテキストにしたいと考え、可能な限り見た目を変えないように（画像との違い。サイズによる変化）したいと思って、質問させて頂きました。 勿論、フォントサイズの自動変更はここだけにするつもりです。
お礼
ありがとうございました。出来ました。