line-heightについてもう少し

一昨日のline-heightでの単位指定について、書いた後に誤解を招きそうな気がしたので、もう少し書いてみます。

書きたかったことを要約すると、次のような感じです。

行送りを文字サイズの1.5倍にしたいとき、次の2つの指定方法があります。

  1. line-height: 1.5;
  2. line-height: 1.5em;

これだけ見ると、後者から「em」を省略する記法が前者であるかのように思われるのですが、実際にはそうではなくこの2つは意味が異なります。

前者では、内側で文字サイズが変更されたときに((文字サイズが変更されるのは、font要素のsize属性が指定されたとき、big要素が指定されたとき、子要素でfont-sizeプロパティが設定されたときなどがあります。))その変化と連動して行間も変化します。それに対し、後者では内側で文字サイズが変更されても行送りは変化しません。

文字サイズに連動して行間が変化する方が私にとっては自然な気がするので前者を選択していますが、場合によっては後者の方が自然な状況もあり得るので、どちらが正しくどちらが誤りであるということはありません。ただ、2つが同じではないというはっきりとした認識が以前の私になく、その違いについて記した文章も見つけることができなかったので書いてみました。

「行間をあけるにはどうすればよいか」と尋ねられたとき、どちらを勧めるのがよいかはケースバイケースです。質問した人のページを見て適切な方を選ぶのが可能なら、そうするのが良いと思います。

話は変わりますが、教えてはてなダイアリーで少し質問して、一昨日のような分量のエントリーが返ってきたら質問した人は引くでしょうね(笑)。今回の場合は私が考えたことを勝手に書いただけで、教えてはてなダイアリーに参加したわけではないのですが、今後気分によっては答えてみることもあるかもしれません。どんなときに答える気分になるかというと、質問を契機に新たな知識を得たときです。教える人は教わる人とでもいいますか。

追記:と、書いていたら教えてはてなダイアリーの例文が、emなしに書き換えられていました。(http://d.hatena.ne.jp/manpukuya/20040225#1077634801参照)

もう一つ追記:はてなダイアリーTipsスタイルシートでデザイン編でも、「行の間隔(line-heightプロパティ)は実数で指定する(単位をつけない)のがよい。」という記述ができました。私の書き方がいけなかったのですが、それはちょっと言い過ぎと思います。

例えば、文字の大きさを少ししか変えないというポリシーがあるなら、行送りを1.5emに固定しておく方が全体のスタイルとの関係で見やすくなる場合もあると思います。その方が好都合な場合があるからそのような書き方も許されているわけで、十把一絡げにどちらが良いと言えるものではありません。重要なのは双方の違いを認識しておくことであって、それをわかった上で選択するのならどちらでも構わないと私は考えます。

一昨日私が書いたのは、私が単位なしを選んだ理由にすぎないので、他の場合に他の選択をすることは当然あり得ることです。