YUI Fonts CSSのline-height: 1.22em;の謎を解く!
先日から、ずっと頭に引っ掛かっていたYUIのFonts CSSのbody * { line-height: 1.22em;}という指定。はてなの人力検索でも質問してみたのですが、結局分からずじまいで、仕方がなく、自分でマークアップしてテストしてみました。どうやら、id:b-windさんがおっしゃるように、この「*」全称セレクタがキーになるようです。
まず、おさらい。
そもそも、なぜこのline-heightに疑問を感じたのかは、このエントリー。Lucky bag::blog: line-height の値には単位なしが良いとされる理由。はてブの数からしても読んだ人多いんじゃないでしょうか。まず、このコードについて、こちらでもテスト用に作ってみました。Lucky bagさんとほとんど同じコードです。
YUI Fonts CSSのline-hight: 1.22em;は何なのか?その1。
line-heightにおける、em指定と値なしの指定では継承のされ方が違うから、こんな表示になってしまうということです。
YUI Fonts CSSの場合。
これもサンプルを見たほうが手っ取り早いので、サンプルを作ってみました。まずは、「body *」にline-heightが指定されているということで、各ボックスにはline-heightを指定していません。その上で、font-sizeをとりあえずパーセント、ピクセル、emの順に同じサイズになるように指定してみました。
YUI Fonts CSSのline-hight: 1.22em;は何なのか?その2。
該当コードは、
body * {line-height:1.22em;}
に加えて、
div.section01 p { font-size: 100%; } div.section01 p em { font-size: 197%; color: #FF0000; }
こんな感じで指定。どうやら、行ボックスはem要素のところだけ、ちゃんとfont-sizeが生きているようです。
YUI Fonts CSSで各ボックスにline-heightを指定する。
条件を同じものに合わせるためには、各ボックスにline-heightを指定してみないと分かりません。というわけで、指定したもの。
YUI Fonts CSSのline-hight: 1.22em;は何なのか?その3。
コードは、body *は一緒ながら、
div.section01 p { line-height: 1em; font-size: 100%; } div.section01 p em { font-size: 197%; color: #FF0000; } div.section02 p { line-height: 1; font-size: 100%; } div.section02 p em { font-size: 197%; color: #FF0000; }
と、各p要素に対して、line-heightをem指定と値なしで設定してみました。こちらも、em要素のfont-sizeが行ボックスに継承されているようです。
Fonts CSSのキーは全称セレクタにあるみたい。
冒頭でも書きましたが、どうやらFonts CSSのキーは、body *と指定されている、「*」全称セレクタがポイントのようです。そこで、body *の全称セレクタを外してみました。
YUI Fonts CSSのline-hight: 1.22em;は何なのか?その4。
YUI Fonts CSSのline-hight: 1.22em;は何なのか?その5。
4のサンプルは、
body {line-height:1.22em;}
と全称セレクタを取り外し、emで指定。また、サンプルの5は、
body {line-height:1.22;}
と値なしで指定しましたが、結果はどちらも同じ。em要素に指定されたfont-sizeが継承されていません。
で、結局どういうこと?
結果は分かったのですが、どうもその継承の仕方が分からない。というわけで、海外で似たような事例はなかったのかなとグルグル周っていると、こんな掲示板を発見。
- http://archivist.incutio.com/viewlist/css-discuss/77902
- http://archivist.incutio.com/viewlist/css-discuss/77903
どうやら、僕と全く同じことを疑問に思った人がいるようで、それに対する回答もあります。この回答を参考にすると、
- em指定のline-heightはfont-sizeを継承し、計算される。個々の要素自体ののfont-sizeではない。
- 単位なしのline-heightは個々の要素自体のfont-sizeで計算され、
継承はされない。継承に影響されない。
がある、と。(このことは、Lucky bagさんの上記エントリーでも書かれています。)
つまり、line-heightに対して値なしで指定した場合は、em要素のfont-sizeで計算されるので、自動的に行ボックスが拡大される。けれど、line-heightに対してem指定をした場合は、個々の要素のfont-sizeで計算されるわけではなく、その親ボックスなどのline-heightで計算されてしまうので、em要素の行ボックスがそのままだということです。
では、YUIの場合はどうかというと、ややこしいことにbody要素に対してline-heightを指定しているわけではなく、全称セレクタを用いて、body以下の全ての要素に対してline-heightをかけている。つまり、em指定をしながらも、単位なしのline-heightのように、個々の要素自体に指定しているので、line-heightが個々の要素自体のfont-sizeで計算されているのではないかな、と思うのです(ここの説明はすごく怪しいですが。エライ人、適切な表現をください。)
ただ、上記掲示板には、それでも場合によっては、em指定の場合はfont-sizeが継承されないこともあるので、やっぱり指定なしのほうがよろしかろうとのことです。
またもや、中途半端なエントリーですが、参考程度にしておいてください。
追記(2007年3月24日)
このline-heightの全称セレクタ指定は、ちょっとハマリやすいことが発覚。さっきまで作っていたサイトで、検索窓をHTMLの真ん中あたりからposition: abosolute;でヘッダー上部に持ってこようとすると、IEでバグリました。たぶん、全体にline-heightが指定されたページの最上部が消える(IE6)というもの。もし、position関係でIEあたりで表示が狂うとなると、このline-heightは疑ってよさそうです。