CSSで最適なfont-sizeの指定は?

このQ&Aのポイント
  • CSSでのfont-sizeの指定方法や単位について迷っている方へのアドバイス
  • 一般的にはpxでの指定が一般的ですが、IEで文字サイズを変えた時に変わらないという問題もあります
  • 例えば、font-sizeをsmallにすると、文字が小さくなり、line-heightを160%にすると行間が広くなります
回答を見る
  • ベストアンサー

cssで最適なfont-sizeの指定は?

(ブログのカスタマイズ初心者です。過去ログを探しても見つからなかったので、質問させて下さい) cssでのfont-sizeの記述は、どのような形が最適でしょうか? px, em, %, mediamやsmall、その他、単位が色々あって、迷ってしまいます。 pxで指定するのが一般的な気がしますが、IEで文字サイズを変えた時に、変わらないのが不便な気がします。 body {font-size: small;  line-height: 160%; } のような形が良いように思いますが、あまり見かけません。 皆様は、どのようにしていらっしゃるのか、教えて頂けたらと思います。 よろしくお願い致します。

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

標準準拠か過去互換かのモードによって、旧IEのバージョンで違ってくる。 smallの解釈が1周り違うからね。 YUIが有名ですよ。 http://developer.yahoo.com/yui/fonts/ (皆さん改造利用してますけどね) 13px を 100%と基本設定にするリセットCSS line-height: 160%; → line-height: 1.6; の方が良いでしょう。

shotaro---
質問者

お礼

御礼が大変遅くなってしまいましたが、どうも有り難うございました。こういうライブラリがあるのですね。英語でよくわからなかったのですが、以下のページを見つけて、そのままリンクを追加してみました。http://blog.ueshu.net/it/2012/03/29/1500.html

その他の回答 (1)

  • jun4956
  • ベストアンサー率25% (2/8)
回答No.1

%が最適です。 pxだと固定ではないでしょうか。ブラウザ側で変えられないと思います。

shotaro---
質問者

お礼

御礼が大変遅くなってしまいましたが、どうも有り難うございました。

関連するQ&A

  • cssで指定するfontサイズについて教えてくだい

    初歩的な質問で恐縮です。 cssの記述について質問いたします。 下記のようにcssを記述しているのですが、 一部だけ「font-size: small」を解除する方法はあるのでしょうか? (要は、一部分をfont-size: X-smallにしたいのです。) * { font-size: small; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #454545; letter-spacing: 0.05em; line-height: 180%; } a:link { color: #7B0215; text-decoration: none; } よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 【CSS】_font-size: 84%;ってどういう意味の記述?

    CSSの勉強のために、 http://cdn.oshiete.goo.ne.jp/css/oshiete-base.css をながめていたのですが、 font-size: 12px; line-height: 1.4em; /*\*/ _font-size: 84%; /**/ という記述がありました。 この、最後の3行はなんのための記述なのしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSS) emでのサイズ指定

    CSS初心者です。 何のサイズをem単位で指定できるのか調べたくて、適当に h1,h2,h3,h4,p { font-size: 2em; margin: 1em; padding: 1em; margin-border: 1px; border-color: #000000; ligh-height: 1em; border-width: 1px; } としました。 すると、すべてのフォントサイズが同じになりました。 それぞれのヘディングが倍のサイズになると思っていたのですが、なぜこうなってしまったのでしょうか? また、マージンのサイズ、パッデイングのサイズを視覚的に確認したいのですが、どうすればいいのでしょうか?

    • ベストアンサー
    • CSS
  • フォントサイズの設定変更 CSS

    ホームページテンプレート・CSSを個人サイトよりお借りして 作成しております。 CSSで、 * { margin : 0; padding : 0; color : #000; font : normal 10px Verdana; line-height : 200%; letter-spacing : 0.2em; } このような記述があり、ページ全体がここで設定されているフォントサイズ になっています。 ただしある一部分だけ個別にフォントサイズを変更したいのですが、 HTML側に記載してもこのCSSのほうが優先されてしまい 反映しません。 設定する方法は無いのでしょうか?ご回答お願いいたします。

    • ベストアンサー
    • HTML
  • <css>テーブルの中と外で同じフォントサイズにならない

    WinXPproSP2+IE6です。 HTMLで作ったページにテーブルがあります。 外部cssでbodyとtableのフォントサイズを別々の設定で20pxにしました。 このcssを前述のHTMLにリンクさせ、IEで表示すると、テーブルの中の文字とテーブルの外の文字の大きさが違います。 どうすれば同じになるのでしょうか? HTMLでのフォントサイズは行っておりません。 <cssの記述内容> body{ font-size:20px; } table{ font-size:20px; }

    • ベストアンサー
    • CSS
  • CSSで文字指定:あるセレクタで指定した値を他のセレクタへ継承させることは出来ますか?

    文字サイズをCSSで指定する方法についての質問です。 同一の文字サイズ指定でも、OS・ブラウザ間で表示にギャップがあります。 そのギャップを調整するために、JavaScriptを使用して OS・ブラウザごとにそれぞれ異なった外部CSSファイルを読み込むようにしています。 macintosh.css windows.css windowsIE.css ...このような振り分けCSSファイルでそれぞれ文字サイズ指定をしています。 CSSファイルの中身は、 macintosh.css .small { font-size: 10px; } /* 小さめ */ .middle { font-size: 12px; } /* 中くらい */ .large { font-size: 14px; } /* 大きめ */ windowsIE.css .small { font-size: 0.8em; } /* 小さめ */ .middle { font-size: 0.9em; } /* 中くらい */ .large { font-size: 1em; } /* 大きめ */ ...といった具合です。 このやり方では、h2の文字サイズを全て中くらいの大きさに指定したい場合、 全てのh2タグに <h2 class="middle"> と記述することになってしまいます。 これは煩雑なので一括指定したいと考えます。 すぐ思いつく方法は、振り分けCSSファイルにh2の文字指定も含めることです。 macintosh.css h2 { font-size: 12px; } windowsIE.css h2 { font-size: 0.9em; }  ...のようなことです。 そうではなく、h2に .middle(=中くらい)で指定した文字サイズをそのまま受け継がせる方法はないでしょうか? h2 { class="middle" } 変な書き方ですが、意図を汲み取っていただけるでしょうか。 このように指定出来れば、かなり省力化出来るように思います。方法があればぜひお教え下さい。

    • ベストアンサー
    • HTML
  • font-sizeについて

    ブログのレイアウトを私オリジナルのものに変えたくて、今のCSSの記述を読んでいたのですが、よくわからない記述がありました。 /*---------- CSS部分 ----------*/ body { background-color: 背景色; color: 文字色; text-align: center; font-family: フォントの種類; font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } わからない点は1点です。 1、上記でまず、「font-size: x-small;」と指定してあるのですが、最後に「font-size: small;」と指定しなおしています。これはどのような意味があるのですか? なぜ2回も指定しているのでしょうか? すいません、ご教授よろしくお願いします。

    • ベストアンサー
    • CSS
  • 【CSS】フォントサイズや幅や高さの指定値の範囲を教えてください。

    <STYLE TYPE="text/css"> <!-- .sample { font-size: 123px; height: 50px; color: red; } --> </STYLE> たとえばこんなような感じでコードを書いてみたのですが、 font-size: 等で指定するサイズや%値には範囲は存在するのでしょうか。たとえば%値なら0%~100%までなのでしょうか。

  • 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
  • CSSでfont-size、pxの絶対値、相対値に

    CSSでfont-sizeを指定するとき、font-sizeを継承する相対値と絶対値があり、%やemが相対値なのは分かりますが、pxはどちらになりますか?絶対値だと思っていたのですが、相対値と書かれているものをちらほら見たので気になりました。

    • ベストアンサー
    • HTML