記事本文
Shochu quartet in Hatena::Bookmark
はてなブックマークのトップページに焼酎カルテットのうち 3 人が並んでいるのはなかなか珍しいので記念にスクリーンショット。 「ちょっとホッテントリに上がったからって浮かれてんな馬鹿」と思うなら思えばいいさ。 ……とか思っていたら、 Bazooka のうーたんも被ブックマ。という記事で同じようなスクリーンショットを掲載していますね。 私が書いた CSS を書く前に読んでもらいたいことは デフォルトスタイルの差異をなるべく無くすCSS の後追いなので、そんなにブックマークされるとは思っていなかったのですが。
さてたった今名付けた焼酎カルテットですが、焼酎カルテットと言うよりは釈云麦カルテットと言った方がより正確かも。 構成メンバーは「近所の店で簡単に釈云麦が手に入るボタモチ環境野郎」なわたくし真琴と、私に釈云麦の存在を教えてくれ、その縁で時々釈云麦を送らせてもらっている Lucky bag::blog の e-luck さん、もんじゃオフの時に手土産として釈云麦を手渡したうーたんと LIPPiN の lego さん。
line-height プロパティに <number> 形式の値を指定すること
さて、そんなつながりで Lucky bag::blog: line-height の値には単位なしが良いとされる理由という記事についてこれも後追いで触れますが、これも CSS を書く前に読んでもらいたいことで述べたことと同じように、以前から言われていたことではあるんですよね。 例えば Re: はじめてのCSSでblog自分流デザイン @ securecatのMT ( Google キャッシュ ) のように。 ( もっと遡ると、そもそも仕様に明示されていることでもあります。 )
もちろん、その記事の yuu さんの
行ボックスの高さの算出値に違いが出てくるからです。絶対値の長さ（length）ではその指定したとおりの数値で行ボックスの高さとして適用されますが、単位なしの数値（number）では要素のフォントサイズにそれを掛け合わせた算出値を行ボックスの高さとします
という説明でも、充分に line-height プロパティには <number> 形式の値を指定した方が良いというのは分かりますが、 yuu さんの説明は現在では Google キャッシュ等でしか見られません。
サンプルを交えて改めて分かりやすく解説してくれた e-luck さんには感謝感謝。
ちなみに、 Lucky bag::blog: line-height の値には単位なしが良いとされる理由のコメント欄でも話題に上がっていますが、古いブラウザでは line-height プロパティに関する解釈にバグを含んでいることがあります。
- IE3.0
-
<number> 形式の値の指定を px 指定として解釈してしまいます。 ( 詳解 HTML & XHTML & CSS辞典 378 ページ )
たとえば
line-height : 1.5 ;と指定すると、line-height : 1.5px ;として指定したように解釈されます。 - NN4.x
-
<length> 形式にて絶対単位を指定すると、印刷時に大きな空白が生じます。 ( 詳解 HTML & XHTML & CSS辞典 378 ページ )
また、画像が含まれる要素にline-heightを指定すると画像のレイアウトが狂うというバグも報告されています。
line-height プロパティの値に指定できる形式と UA の解釈
また、 line-height プロパティの値においてたまにある勘違いが、
単位指定なしはInvalidだ
というもの。
CSS2 の Visual formatting model details ( 邦訳 ) にて line-height プロパティの仕様が示されていますが、その値には <number> ( 実数値、いわゆる単位指定無しの値 ) 、 <length> ( 長さ、いわゆる単位付きの値 ) 、 <percentage> ( パーセント ) 、 <inherit> ( 親要素の計算値の継承 ) および normal ( フォントサイズに応じた適切な計算値を UA に設定してもらう、 number 形式で 1.0 ～ 1.2 くらいの値が推奨される ) の 5 つが指定できると示されていますので、単位指定が無くても ( 負の値でなければ ) Valid な記述になります。
で、一見同じように見える <number> と <length> ですが、 <number> は
The computed value of the property is this number multiplied by the element's font size.
Negative values are illegal.
However, the number, not the computed value, is inherited.
(
この数値を要素のフォントサイズと掛け合わせて計算値とする。
負の値は不正とする。
しかし，継承には計算値ではなく指定値を使用する。
)
と、継承の場合にも親要素から継承したフォントサイズに指定値を掛け合わせて line-height の計算値とすることが示されています。
これを逆に考えると、 <length> の方は継承の場合には親要素で算出された line-height の計算値をそのまま継承するということになります。
( これをサンプルを使って分かりやすく解説したのが Lucky bag::blog: line-height の値には単位なしが良いとされる理由なのです。 )
よって、この点を正しく理解していれば
なんか気持ちわるい
といった感想や、
単位ありでは表示が崩れる
という認識は出てこないことになります。
( <length> 形式の値を指定した上で、その計算値が子孫要素に継承された状態は ( 見た目的には崩れていても ) CSS の指定が正しく解釈されているということですから。 )
また、
今後もずっとそれで大丈夫なんだろうか
というコメントも出ていますが、現時点での CSS3 Working Draft ( 20020515 ) の line-height プロパティでも
The computed value of the property is this number multiplied by the element's font size.
Negative values are illegal.
However, the number, not the computed value, is inherited.
と示されていますので、当分は大丈夫でしょう……と言おうと思ったら、 CSS2.1 Working Draft ( 20050613 ) の line-height プロパティでは
The used value of the property is this number multiplied by the element's font size.
Negative values are illegal.
The computed value is the same as the specified value.
と、継承の場合について特に触れられていないですね。
CSS2.1 Working Draft の他の部分も合わせて読まないといけないのかな。
トラックバック送信先
- Lucky bag::blog: line-height の値には単位なしが良いとされる理由
-
line-height プロパティ関連の話を CSS の仕様の面から補足しました。 それと焼酎カルテットを勝手に結成。
- 被ブックマ。
-
同じように珍しい光景だと思ってスクリーンショットを取りました。 そこまでシンクロしなくても。
