最近、CSS の line-height プロパティに指定する値は単位なし （<number>） が良いという話が話題になっているようです。別に今に始まった話題ではないんですけども、最近この話題に触れている記事の中に、ちょっと気になる書き方をされる方がいるので書いてみます。
で、そもそもなんで line-height の値は <number> で指定しておいた方がいの？ってところですが、その理由をわかりやすくまとめている Lucky bag::blog さんの記事をまずは紹介しておきます。
line-height の値には、
- normal
- inherit
- <length>
- <number>
- <percentage>
が指定できますが、ユーザーエージェントのデフォルト値を使用する normal と親要素からの継承である inherit は置いておいて、<length>、<percentage> のように単位付きの値を指定した時と、単位なしの <number> を指定した時では、その継承の仕方に差が出ます。この時、<number> のみ継承の仕方が違い、このことは仕様書にも書かれています。
<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.
指定された数値を要素の文字サイズと掛け合わせて「計算値」から行間を決定します。負の値は不正。ただし、継承には 「計算値」 ではなく 「指定値」 を使用します。つまり、子孫要素で文字サイズが異なる場合は、再度、指定値から計算し直すということです。
なので、ある要素内で、異なる文字サイズが指定されたテキストが混在する場合は、<number> で指定しておいた方が無難ですねという話になります。
ここまでは、まったく問題ないんです。その通りですから。
しかし、例えば今日目にしたこの記事、
この 1ページ目に下記のような記述があります。
ここでは、「1.4」という数値に単位を付けていません。行間を調節する際には、この「単位を付けない」という点が重要です。
以下のように、単位を付ける指定も文法的に可能ですが、こうすると少々問題が起こります。
ご本人がどういう意図で書かれているのかはわかりませんので間違っていたらゴメンナサイなんですけど、「問題が起こります」 という書き方からすると、何か意図しないことが起こるというか、単位ありの指定は駄目です的なニュアンスに聞こえてしまうのですが、line-height に <length>、<percentage> での指定は 「しないほうが良い」 という方向性には違和感があります。
さらに下記の内容も気になります。
「1.4em」と書いた場合でも倍率を継承してくれれば良さそうなものですが、そうはなっていません。これは、スタイルシートの「仕様」ですから、そういうものだと覚えるしかありません。
<length>、<percentage> で指定した時と、<number> で指定した時の継承の仕方に違いがあるのは、別に仕様がイケてないからではないです。逆に意図的に継承の仕方に差をつけたい時にそれを可能にするため ※です。
例えば、ある要素内で一部だけ他より大きな文字サイズを指定されたテキストが存在する場合でも、レイアウト的にそのテキストに引っ張られて行間が開いてしまうのは困るという場合もあります。その場合は意図的に単位付きの値を指定することでそれを回避するといったことも考えられます。
つまり、わかって使っている人にとっては、大きい文字のところで行間が詰まっていたとしても、それは意図した表示なわけです。
ということで、line-height には <number> じゃなきゃ駄目っていうことはないので用途に合わせて柔軟にいきましょう。
あ、でも <length> に絶対単位や px を指定するのはやめた方がいいですよ。
※ ここの部分、仕様を策定する立場ではないのであくまで個人的な見解で根拠なく書いてます。間違っていたら指摘していただければ幸いです。
