Yahoo! UI Library: Fonts CSSについてお伺いしたいと思います。


このライブラリの中で、
/**
* Default line-height based on font-size rather than "computed-value"
* see: http://www.w3.org/TR/CSS21/visudet.html#line-height
*/
body * {line-height:1.22em;}
という記述があるのですが、これの意味がイマイチ分かりません。該当URLは単にW3Cのline-heightのプロパティについての説明文書ですし。

また、最近のブログでは、「line-heightは単位なしがよいだろう」という議論が一般的になりつつあるし、Yahooの中の人がそれを知らないとも思えないのです。

その上で、このYUIのライブラリを使っている人も、上記Fonts CSSを全て適用している人もいれば、このline-height部分だけを削っている人もいるようです。

YUIで、body * {line-height:1.22em;}と指定されている理由を教えてください。

回答の条件
  • 1人2回まで
  • 登録:2007/02/26 11:12:03
  • 終了:2007/03/05 11:15:03

回答(1件)

id:b-wind No.1

b-wind回答回数3344ベストアンサー獲得回数4402007/02/26 11:28:27

ポイント60pt

$B;k3P@07A%b%G%k>\:Y(B

次例の3つの規則はいずれも同じ結果になる:

DIV { line-height: 1.2; font-size: 10pt } /* number */

DIV { line-height: 1.2em; font-size: 10pt } /* length */

DIV { line-height: 120%; font-size: 10pt } /* percentage */

単位 em は文字の縦の長さですから、フォントによって実際の長さは増減します。

これは単位無しの指定と実質的に同義です。

id:aratako0

ありがとうございます。

これは何となく分かるのですが、

http://www.lucky-bag.com/archives/2006/04/unitless-line-heights....

のような問題は起こらないのかな、と。

特に、body以下の全称セレクタに対して、line-heightをかけているわけですから、font-sizeもいろいろと変わってしまうわけですよね。

その場合に、子孫セレクタのline-heightも1.2emが継承されてしまうわけで、同じ問題というのは起こりえないのでしょうか。

* Default line-height based on font-size rather than "computed-value"

これの意味もイマイチ分かりませんし。

2007/02/26 11:41:06
  • id:b-wind
    件の記事は初めて読みましたが、継承した場合の扱いが問題に思えます。
    BODY * {line-height:1.22em;}
    のようにユニバーサルセレクタで使用した場合、継承した値でなく全ての要素で指定した値が設定されるので大丈夫じゃないでしょうか。

    といいつつあんまり自信が無いのでコメントで。
  • id:b-wind
    > Default line-height based on font-size rather than "computed-value"
    ほぼ直訳ですが、

    デフォルトの line-height は計算された値(pxとか?)よりも font-size を基にしています

    と言う事で単に em の説明だと。
  • id:aratako0
    コメントありがとうございます。

    いや、僕もマークアップして試してみれば、それで解決なのかもしれないですけど。誰か知ってるかなーと思いまして。

    さっきの直訳ですが、どうやら、算出値と訳すみたいですね。
    http://hp.vector.co.jp/authors/VA022006/css/cascade.html#computed-values
    引用はここから。

    というわけで、もう少し回答を待ってみます。

この質問への反応(ブックマークコメント)

トラックバック

  • 先日から、ずっと頭に引っ掛かっていたYUIのFonts CSSのbody * { line-height: 1.22em;}という指定。はてなの人力検索でも質問してみたのですが、結局分からずじまいで、仕方がなく、自分でマーク
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません