• ベストアンサー

CSS font-sizeのパーセンテージ指定「管理がややこしくないですか?」

MAN_MA_RUIの回答

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.3

単位を%にした状態でスタイルをネストさせるとIEとそれ以外で解釈に違いの出るケースがあるようです。 IEが100%のときのサイズを基準にフォントサイズを決めて、それ以外は親要素のフォントサイズを基準に決めるのかな。 ゆえにIEでちょうど良いと思ったサイズが非IEで極小フォントになることもあります。

hrykyk
質問者

補足

>単位を%にした状態でスタイルをネストさせると >IEとそれ以外で解釈に違いの出るケースがあるようです。 そうなんですか!?それは厄介ですね。。。 ブラウザ、ひとつになって欲しい・・・。 勉強になりました。ありがとうございます。

関連するQ&A

  • CSSでfont-size、pxの絶対値、相対値に

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

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

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

  • インラインで設定したフォントサイズを相対的に

    今既にあるPCサイトのスマホ用テンプレートを作っています。 例えば <span class="hage" style="font-size:20px">hoge</span><br /> <span class="hage" style="font-size:18px">hogege</span> こういうHTMLが既にあったとして スマホで見ると20pxや18pxがでかい!と思ったときに 相対的に全体のサイズを下げることは不可能でしょうか? hogeはhogegeより大きくしたいのですが CSSで.hage{font-size:14px;}などとしてしまうと 当たり前ですが全部14pxになってしまいます。 PCで見たときは上記の通りで スマホで見たら <span class="hage" style="font-size:14px">hoge</span><br /> <span class="hage" style="font-size:12px">hogege</span> こう表示される、なんてことは出来るんでしょうか? JSなどによる動的な操作は重くなりそうなのでそれ以外にありましたら お知恵をお貸し下さい。

    • ベストアンサー
    • CSS
  • フォントサイズの指定

    ドコモ向けサイトをXHTMLで記述しようと思っているのですが、フォントサイズの指定についてアドバイス宜 しくお願い致します。 行ないたいのはtable内に記述した文字サイズの一括変更になります。 私の勉強不足でなければフォントサイズは一括指定出来ないということになるのですが、<div style="font-size:○○;"></div>で囲ってしまえば全体に文字サイズの変更は可能でした。 ただ、この間の<table>には反映されません。 全部のセルに<span style>で指定すれば文字サイズは変更できますが、要領が大きくなってしまいます… セル内のフォントサイズを一括指定する方法などはないのでしょうか?

  • CSSでのフォントサイズ指定におけるジレンマ

    以下の例文では、   * {font-size: 10pt;} があるゆえに、赤太字で示された   .ddd {color: #ff0000;font-weight: bold;} のフォントサイズがばらばらになってしまいます。 各所の指定フォントサイズを遵守させ、かつ赤太字を有効化するにはどのようにればよいでしょうか。   * {font-size: 10pt;}は事情あってやめられません。 「.ddd」に、font-size: middleを入れたりしてもだめでした。 !importantとか、何か簡単な「おまじない」の追記で解決できるといいのですが。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- * { font-size: 10pt; } dd { font-size: x-small; } dt { margin-left: 30px; } .eee { border: 1px solid #000; font-size: small; } .ccc { font-size: xx-large; } .aaa { font-size: medium; } .bbb { font-size: small; } .ddd { color: #ff0000; font-weight: bold; } --> </style> </head> <body> <h2>&nbsp;&nbsp;<a href="./a.htm" style="font-size: large;">2014年の<span class="ddd">雪</span>景色</a></h2> <a href="./index.php" class="eee"><span class="ddd">雪</span>下くんの感想</a> &nbsp;&nbsp;1月には何度も降雪、周りは<span class="ddd">雪</span>、<span class="ddd">雪</span>、<span class="ddd">雪</span>… <dl> <dt class="Tab"><span class="ccc">首都圏では不慣れな<span class="ddd">雪</span>かきなどに追われた</span></dt> <dt><span class="aaa"><span class="ddd">雪</span>下大介</span>&nbsp;&nbsp;<span class="bbb">大阪府立降<span class="ddd">雪</span>下小学校3年</span></dt> <dd>大阪ではひさしぶりに<span class="ddd">雪</span>が降りました。この時期での降<span class="ddd">雪</span>は珍しい。</dd> </dl> </body> </html>

    • ベストアンサー
    • CSS
  • スタイルシートのフォント指定について

    お世話になっております。 CSSのフォント指定について、お伺いしたい事があります。 font-size:95%; などの "%"指定なんですけど、100%は何が基準になっているのでしょうか? font size="3" くらいですかね。具体的に何ピクセルか知りたいです。 あと、フォント指定をする時は相対的な単位で指定するのがベストと聞きましたが、"pt"や"px" は、やめた方がいいのでしょうか。 どなたか知っている方いましたら、よろしくお願いします!

    • ベストアンサー
    • HTML
  • 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
  • fontタグとスタイルシートの相対値

    CSSでこういう使い方はありえないかもしれませんが、 1は60ptですが、2,3は何ptですか? このようにfontタグは一つ上のdivのスタイルシートに影響せずにfont sizeで完結していますが 値を相対的に変化させる(例えばdivの値の20%とか)ことはスタイルシートのしくみでありますか? <style type="text/css"> <!-- .a { font-size:60pt; } --> </style> <!-- 1 --> <div class="a">60pt</div> <!-- 2 --> <div class="a"><font size="-1">?px</font></div> <!-- 3 --> <div class="a"><font size="1">?px</font></div>

    • ベストアンサー
    • HTML
  • IE用CSSが適用されない

    通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。 <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]--> <style> body { background-color:#FFFFFF; color:#333333; font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif; } #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } </style> </head> <body> <div id="figure_main"> <div class="box1"> <span>取締役会</span> </div> <div class="box1"> <span>取締役社長</span> </div> <div class="box2"> <span>常勤役員会</span> </div> <div> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> </div> </body> </html> HTMLには<!--[if IE]>を記述し、 ie.cssには @charset "utf-8"; /* CSS Document */ #figure_main { font-size:11px; } と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか? 宜しくお願いします。

    • ベストアンサー
    • HTML
  • jQueryで特定のcssプロパティの値を書き換えたい

    jQueryで特定のcssプロパティの値を書き換えたい html上にインラインで記述しているスタイルのうち、特定のプロパティの値のみをjQueryで書き換えることはできますでしょうか。 具体的には↓ <span style="font-size: 16px;font-weight: bold;">テキスト1</span> <span style="color: #f00; font-size: 16px;">テキスト2</span>を <span style="font-size: 18px;font-weight: bold;">テキスト1</span> <span style=""color: #f00; font-size: 18px;">テキスト2</span>に style属性のfont-size: 16px;をfont-size: 18px;にしたい。 他は変えずそのままにしたい。 $(function() { $('span').filter(function() { return ($(this).css("font-size","16px")); }).css("font-size","18px") }); http://okwave.jp/qa/q5310183.html 似たような質問が上記でされていて、真似て書いてみたのですが、これだとfont-sizeが16pxでないものも全て18pxに書き換わってしまいました。 不勉強でお恥ずかしい限りですが、詳しい方いらっしゃいましたらどうかご教授ください。 よろしくお願いいたします。