Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

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が継承されていません。


で、結局どういうこと?


結果は分かったのですが、どうもその継承の仕方が分からない。というわけで、海外で似たような事例はなかったのかなとグルグル周っていると、こんな掲示板を発見。

どうやら、僕と全く同じことを疑問に思った人がいるようで、それに対する回答もあります。この回答を参考にすると、

  • 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は疑ってよさそうです。