• ベストアンサー
  • すぐに回答を!

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での表示は目をつぶりますか? 又、商業的なサイトを制作されている方は、文字サイズを固定させたくない場合にどんな指定をしますか?

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数124
  • ありがとう数1

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

  • ベストアンサー
  • 回答No.1
noname#199778
noname#199778

直接的な解決方法ではありませんが… IEで表示サイズ「中」をデフォルトとみなして、文字サイズの縮小をさせる形でデザイン側の程よいサイズにしているとのことですが、できれば文字を縮小させない範囲でデザインをした方が良いと思います。 ブラウザ側での文字サイズの指定は、ユーザーが任意に自分で見やすい大きさにしていると考えるほうが無難かと思いますし、そうであるとすれば、いつもの文字サイズよりも小さい文字で表示されるのは、読む側からすればあまり好ましく思われないのではないかと思うのです。 たとえ文字の表示サイズをブラウザの設定で可変できるようにしていあるからといって、その手間を閲覧者にかけさせてしまうのはいかがなものでしょうか。 例えば、IEでも普段表示サイズを最小にしているユーザーがそのページを開けば、異様に細かすぎる文字になってしまいますし、「中」の表示サイズが丁度良いと考えてサイズを中に設定しているユーザーから見れば、サイズをx-smallに指定された文字でも、デザイン側が丁度良いと考えていたとしても、ユーザーから見れば小さくて読みにくいと感じる可能性もあります。 人によっては不快感すら覚えるかも知れません。 いつものフォントサイズより大きく表示される分には不恰好に思われる程度で済みますが、小さくなった場合読みにくくなってしまう度合いが文字が大きくなるよりも著しいと思います。 これは、状況によるかも知れませんが、見てもらうという上では非常に不利になるのではないでしょうか。 もし、どうしてもブラウザによって適用するスタイルシートを振り分けたいというのであれば、JavaScriptでブラウザやユーザーエージェントを取得して、その値によって適用するスタイルシートを切り替えるような仕組みを入れる方法などが考えられると思います。 head内にJavaScriptでスタイルシートを書き出させても良いでしょうし、DOMとDHTML的手法を利用すれば動的にスタイルシートを変更することも可能です。 素人の発想ですが、参考になれば… 失礼しました。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

誤って補足のほうに御礼を書き込んでしまいました! 大変申し訳ありません。 ありがとうございました!

質問者からの補足

ご回答大変ありがとうございます。 そうですよね。私も一ユーザーの視点から考えると、小さくしたフォントでCSSをかけてあるページは読みづらいと考えます。 デザイン的な見栄えと、可読性の妥協点を考慮した上で質問のような指定にしました。 lead1976さんのご意見で、少し考えさせられました。 今回は実際のHPの制作ではなく、作品的なものになるので、やはり「見栄え」の部分に偏ったものになりそうです。 Javascriptを使用した振り分けでやってみようと思います。 大変ありがとうございました。

関連するQ&A

  • IE(5.5)とNN(4.7)のフォントサイズについて。

    フォントサイズがデフォルトのままだと、IE(5.5)とNN(4.7)とではフォントサイズが違うのです。 IEの方でフォントサイズを「小」にするとNNと丁度良いサイズになるので、 IEでアクセスしたときには強制的にフォントサイズを「小」に変更することなど出来ませんでしょうか? CSSで「12px」とかにしたんですけど、やはりIEでサイズが「中」になっていると 微妙にサイズが違ってしまうのです。 また、テーブル内のフォントのサイズも同じように変更したいのでNNに対しては融通が利かないのです。 なにとぞお知恵をお貸しくださいませm(_ _)m

  • NNでスタイルシート(フォント指定)使用

    今まではIEでしかページチェックをしていませんでしたが、やはりNNでもチェックしないと…と思ってチェックしてみたところ ひどいありさまでした…。 そんなにひどいレイアウトの崩れなどはなかったのですが、文字が画像の下(画像はCSSで位置指定)とかに隠れてしまったりとか。 フォントの指定は FONT{COLOR:GRAY; FONT-SIZE:12px;} のようにしているのですが、 NNの[表示]-[テキストの拡大]で大きさが変更できてしまいますよね? これを回避するにはどうしたらいいのでしょうか? IEは5.5 NNは7.0 です。(本当はNNは4.0が欲しかったのですが…) よろしくお願いします。

    • ベストアンサー
    • CSS
  • ブラウザによりフォントサイズが異なってしまう問題をCSSで解決する原理

    ブラウザによりフォントサイズが異なってしまう問題をCSSで解決する原理と方法は? 例えばIEではちょうどよいサイズ(作成者が10ptを指定してその通りのサイズ)で表示されているのが、FireFoxでは小さく表示されてしまうという問題は、CSSを使えば解決できるそうですが、それはどのような原理で解決できるのでしょうか。また、どのような設定をすればよいのでしょうか。 私はCSSファイルの役目は指定箇所(クラス)を指定フォント/サイズで表示するよう指示するもの、という程度のことは分かっていますが、HTMLファイル上で直接10ptと指定するのと、CSSで10ptと指定するのではどう違うのか。または、数値ではなくて相対的なサイズを指定する必要があるのでしょうか? その辺の原理が分かっていませんので、ごく簡潔に教えていただけるとありがたいです。 また、分かりやすいサイトも教えていただければありがたいです。

  • cssにおけるフォントの大きさの制御と外部ファイルについて

    現在多くの方々に見ていただけるようなホームページをと思って自分のページを制作しているのですが、フォントの大きさのことで困っています。 通常のIEではデフォルトでフォントを表示すると非常に大きな文字になるので-1のフォントを使用しています。しかしNNだと(特にお年寄りには)見づらいページになってしまうような感があります。 そこでスタイルシートでIEでもNNでもMacでもWinでも10ptの文字にして、文字にふれたときに下線がつくなどの処理をしました。 <style type="text/css"> <!-- a:link {font-size: 10pt; text-decoration:none; color:#000000; } a:visited {font-size: 10pt; text-decoration:none; color:#000000; } a:active {font-size: 10pt; text-decoration:none; color:#000000; } a:hover {font-size: 10pt; text-decoration:none; color:#FF0000; } --> </style> しかし、全く見られないなど(おそらくブラウザのバージョンにも依存するのだと思いますが)の意見もあり、困っています。 個人的には一番いい形で見てほしいし、多くの人にも見てもらいたいのでどうすればいいだろうと悩んでいます。 そこでご存じの方に教えていただきたいのですが (1)あまり負担にならない程度にそれぞれのマシンごとの識別させたい、もしくは、対応できないブラウザの場合は、通常のデフォルトサイズのフォントで見てもらうようにする方法はないでしょうか? (2)cssやjavascriptなどは外部ファイルとしてhtmlファイルからリンクさせることが可能かと思いますが、実際の場合、htmlに埋め込む場合とリンクする場合で何か変わってくることはあるのでしょうか?(ひょっとして、複数のファイルにスタイルやスクリプトを適応させることができるというぐらいのメリットなのでしょうか?) お手数おかけしますがよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSでフォントサイズを可変にした場合、下限を指定できますか?

    CSSでフォントサイズを可変にした場合、 ここまでは小さくできるがそれ以下には小さくできないように指定できるものでしょうか? 文字サイズを『最小』(WINDOWSのIE)にしても10px以下にはできないというような。 YOMIURI ONLINE(読売新聞)のようにページ内にボタンを設けるとかではなく、 あくまでもブラウザの指定を制限するというかたちが理想なのですが。

    • 締切済み
    • CSS
  • Web文字サイズの指定

    スタイルシートにて、 下記の様にWebの文字サイズを指定しているのですが、 <STYLE TYPE="text/css"> <!-- BODY,TD,TR,CAPTION{ font-size: 10pt ;} <!-- Win:NN6.2、Mac:IE5.x 等の 文字表示を%指定するブラウザの場合、 指定した文字サイズで表示しないのですが、 指定方法が間違っているのでしょうか。 また、上記の方法にて文字サイズが指定できない場合、 他の手段はあるのでしょうか? ご回答よろしくお願いします。

    • 締切済み
    • CSS
  • CSS-フォントサイズと行間を設定するとフォント指定が無効になっちゃう-

    CSSでフォントサイズとpxで指定し、行間をhigh-lineで指定すると行間は生きるんですが、フォント指定が無効になります。どのように設定したら、両者行きますか。IEでもFirefoxでもためしてみました。

  • フォントサイズ

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

    • ベストアンサー
    • HTML
  • CSSでフォントサイズを指定したのですがFirefoxでは反映されないのでしょうか?

    ある文章にfont-size:9pt;というCSSを外部スタイルシートで適用しています。 IEではきちんと9ptで表示されるのですが、 いつも使っているFirefoxの方が いっこうに変化がなく文字がとても大きいままです。 どうすればFirefoxでもIEでも同じように表示できるようになるのでしょうか? お詳しい方教えていただけますと幸いです。

    • ベストアンサー
    • HTML
  • フォントサイズの変更(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します。 親フレームにフォントサイズを一度格納するのは、 他の子フレームすべてにフォントサイズを対応させるためです。