CSSデザインノートでタグ「line-height」が付けられているもの

テキストが含まれる要素、例えばp要素やli要素、td要素には「line-height」を指定しておくことで、IE6でたまに起こる「文字の上部が切れて表示されてしまう」ことや「フォントを一部変更したことで文字が重なってしまう」といったことを解決できます。

その際、line-heightの値の単位は何も指定しないほうが、ブラウザが自動に補正をかけてくれます。

CSSコード

p {
   line-height:1.4;
}

文章を読みやすくする1つの方法に「行間を空ける」があります。だいたい、行間を文字の0.4個分から0.8個くらい空けると見やすいです。1文字以上空けてしまうと逆に段落がわかりにくくなってしまうので注意です。

行間の指定には「line-height」プロパティを使います。

例えば、1文字分というのは「1em」(大文字のMの高さを基準)で表したり、pxでフォントサイズを指定している場合は「12px」などとフォントサイズと同じ数値を指定すればよいのですが、段落の中でフォントサイズを変更している場合は、文字が重なって表示されてしまう可能性があります。

よって、単位はあえて指定しないほうが無難です。そうすれば、フォントサイズの異なるテキストが段落内で混在していてもテキストが重なることなく、最も大きなフォントサイズを基準に、指定した行間の高さで表示されます。

CSSコード

p {line-height:1.8;}

最近は、ユーザビリティの観点から、文字サイズを固定せずに「%」表記や「em」表記をするのが望ましいと考えられています。

その際、ユーザがブラウザによって文字サイズを変更してする場合に、文字が重なってしまうことがあります。これは、CSSの設定で、文字の行間(line-height)に単位をつけて指定しているためです。

例えば、以下のように、行間の大きさよりも文字サイズが大きい場合、文字は重なって表示されてしまいます。

CSSコード

p {
   line-height:1.0em;
}

p span{
   font-size:2.0em;
}

(X)HTMLコード

<p>
   あいうえおかきくけこさしすせそたちつてと<br />
   なにぬねの<span>はひふへほ</span>まみむめも
</p>

このような場合には、行間の指定に単位をつけないようにします。

CSSコード

p {
   line-height:1.0;
}

p span{
   font-size:2.0em;
}

最近のブログ記事