CSSライブラリYUIのフォントサイズ設定について

前へ 次へ
このQ&Aのポイント
  • CSSライブラリYUIのfont-size:13pxからfont-size:100%へのセットについて説明します。
  • IE6用のfont-size: smallとfont-size: x-smallのハックについて、font-size: 85%を使用すればハック不要です。
  • XHTMLでxml宣言がある場合、IE6用の*font-size: small; *font: x-small;は効果がないので、ハックは不要です。
回答を見る
  • ベストアンサー

body font-size:13px; IE6

CSSライブラリ　YUIの font-size:13px;　からの　font-size:100%;　のセットで、 /* YUIのCSS */ body{ font-size: 13px; *font-size: small; *font: x-small; } div{font-size: 100%;} この場合の以下は、 ------------------- *font-size: small; *font: x-small; ------------------- IE6用の font-size: small と font-size: x-small の為にあるのでしょうか？ それなら、CSSでfont-size: small; と font-size: x-small;を使わないで、font-size: 85%;とか使えば上記のハック不要って事でしょうか？ <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 上記の様なXHTML,１行目xml宣言付きの場合、 IE6用の *font-size: small; *font: x-small; を書いても font-size: small と font-size: x-small が小さくならないので、 xml宣言ありでIE6では標準にならないのでハック不要って事ですか？ IE6で見てもハックを付けても消しても同じなんですが・・・ なんか間違っているのでしょうか？

  • HTML
  • 回答数1
  • ありがとう数1

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

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

そのハックの仕方は細かくチェックを取っていないので完全に把握はしていませんが、IE4～IE7、Mac IE5では動作するようです。 *font-size: small; でIE6～7の標準準拠モード時にフォントサイズが13px相当になり *font: x-small; でIE5～5.5と6～7の互換モード時のフォントサイズが13px相当になるものだと思います。 (ここはちょっと記憶が曖昧なのであまりあてにしないで下さい・・・) IEでのpxでの絶対指定はフォントサイズを変更してもブラウザ上に反映されなくなってしまいユーザーにとって不便になってしまいます。 なのでsmallなどの相対指定で13px相当に合わせるように上書きされているということでしょう。 ただしIE8の標準準拠ではプロパティの前に*を付けるハックは上手く動作しないようなので、現在ではそのままの指定では問題が出てくるのではないかと思います。 ハックをあまり使われたくないようなのでできるだけソフトなものに置き換えるとすれば、現在ほとんどのブラウザがデフォルトのフォントサイズを16px(標準準拠時)に揃えてきているようなので、 標準準拠モード前提で13pxにする場合以下のように指定をすればいいと思います。 body{ font-size:small !important; font-size:x-small; }

takumana20
質問者

お礼

まだ半分ぐらいしか意味が理解できませが、 ありがとうございます。今の環境でも揃っています。 色々調べてYUIが良いと思ったのに この方法の方が最高素敵です。＼(^o^)／スゴイです。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSでブラウザ毎のフォントサイズを統一するには

    IEとFireFoxなど、ブラウザによりフォントの初期サイズが違います。 IEのMideumがFireFoxではSmallに該当するようです。 pxなどの絶対サイズを利用せず、相対サイズで初期サイズをMidiumに統一対応したいと考えています。 何か良いcssハック方法はありませんでしょうか。

    • ベストアンサー
    • HTML
  • Yahoo UI Libraryのfonts.cssについて

    Yahoo UI Libraryのfonts.cssについて質問です。 ​http://developer.yahoo.com/yui/fonts/ http://developer.yahoo.com/yui/build/fonts/fonts.css body { font: 13px/1.231 arial,helvetica,clean,sans-serif; *font-size: small; *font: x-small; } table { font-size: inherit; font: 100%; } 1.「*font: x-small;」と「font: 100%;」なんですが、この2つの処理の違いはなんでしょうか。 両方ともIEに対するハックだと思うのですが、なぜ別の方法をとっているのでしょうか？ 2.「font-size: inherit;」と「font: 100%;」は「font-size: 100%;」ですむ気がするのですが、 なぜこのようにしているのでしょうか？ ご存じの方、よろしくお願いします。

  • 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
  • XHTMLのIEでの表示

    PHPを使ってXHTMLを出力しています。 下記のようなソースを使った場合、IE系ブラウザでXMLツリーが表示されてしまいます。IE8beta2、IE7、IE5で確認しています。 Google Chrome、Opera、FireFox 3ではこのような問題は起きていません。 どのようにすれば解決できるでしょうか。XML宣言を除けば一応表示はされたのですが。後方互換モードのことなどもIE7で改善されたとのことなので、混乱しています。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <body> </body> </html>

  • （携帯XHTMLで書いた）フォントのサイズが小さくならない

    携帯でホームページを作っています。 　スタイルシート（i-CSS）を使って文字のサイズを小さくしたいのですが、 思い通りのサイズになりません。 （font-size:xx-small;）で指定しても（font-size:small;）で指定してもサイズが変わらない。 問題のソースです。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN" "i-xhtml_4ja_10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" dir="ltr"> <head> <meta content="text/html; charset=shift_jis" http-equiv="content-type" /> <style type="text/css"> <!--[CDATA[ a:link{color:#3c5fcc;} a:hover{color:#996600;background-color:#FFF4E0;text-decoration:none;} a:visited{color:#990099;} ]]--> </style> <title>トップページ</title> </head> <body> <div style="text-align:center;"> <span style="font-size:xx-small;">タグテスト</span> </div><br /> <span style="font-size:xx-small;"> <a href="tabletest.html">1.テーブル</a> </span> </body> </html> 　原因がわからないので、いろいろとサイトを調べてみて試したのですが、原因がつかめず途方に暮れています。 　どなたかわかる方いましたら、ご教授お願いします。 あと参考になるサイトなどがありましたら教えてください。

    • 締切済み
    • XML
  • XHTMLについての疑問

    XHTMLとCSSを利用してサイトを制作しています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 最終段階になり下記のコードをHTMLファイルの先頭に追加しました。 宜しくお願いします。 <?xml version="1.0" encoding="shift_jis"?> IE6で確認すると文字サイズが上記コードを追加する前と比べると大きくなっています。 これは正常でしょうかそれともバグでしょうか。 また回避する方法はあるんでしょうか。 お教えください。 ちなみにCSSファイルには下記のように文字サイズを指定しています。 font-size: small;

  • IE8ブラウザ側で文字サイズ変更できない

    Yahoo!開発チームが検証したフォントサイズ統一のCSSとして下記を記述しています。 body { font: 13px 'ＭＳ Ｐゴシック', 'MS-PGothic'; *font-size: small; *font: x-small; } 何故かIE8ブラウザ側の機能で文字サイズを変更しようとすると反応しません。 何かIE8用に記述が必要でしょうか？

    • ベストアンサー
    • HTML
  • ブラウザによって異なるフォントサイズについて

    ホームページを制作していますが、ブラウザによって文字のサイズが見かけ上違ってしまいます。 具体的には、フォントのサイズが ＩＥ８＜Ｓａｆａｒｉ＜Ｆｉｒｅｆｏｘ３ になっています。 価格．ｃｏｍなどの有名サイトを見ていると、どのブラウザでも同じサイズに見えます。 スタイルシートに body { font:13px; *font-size:small; *font:x-small; } を書き加えてみましたがあまり変化はありませんでした。 どのようにすればいいのでしょうか？

    • ベストアンサー
    • HTML
  • 宣言とcssの関係

    こんばんは。 ご存知の方いらっしゃいましたら教えてください。 サイトを <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head>・・・・・・・・・・・・ こういった書き出しで書き始め、フルＣＳＳサイトを作ってみました。出来上がりしばらくしてから、文法上では <?xml version="1.0" encoding="Shift_JIS"?> こういった宣言も入れたほうがいいことを知り、一行目に追記したところ表示がずれてしまいました。ちなみにhtml4.01の宣言に変えてもずれてしまいます。 これはどうしてでしょうか。 お分かりでしたら教えてください！よろしくおねがいします。

    • ベストアンサー
    • HTML
  • IE（5.5）とNN（4.7）のフォントサイズについて。

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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する