行の高さ

説明

line-height: height; C1- ie3- N4-

値:	normal \| <実数値> \| <長さ> \| <%値> \| inherit

初期値：normal、適用要素：すべて、継承：する、%値：フォントサイズを参照、メディア：ビジュアル

このプロパティは、インライン要素のテキストの行の高さを指定します。ただし、置換要素(img、input、textarea、select、object要素)の高さを指定するには、heightプロパティを用います。このプロパティをインライン要素を含むブロック要素に指定した場合、そこに含まれるインライン要素の最小の高さを指定することになります。負の値は指定できません。

使用例


次例の3つの規則はいずれも同じ結果になります。



div {line-height:1.2; font-size:10pt}     /* number */

div {line-height:1.2em; font-size:10pt}   /* length */

div {line-height:120%; font-size:10pt}    /* percentage */

行の高さの値 <'line-height'>

normal	C1- ie3- N4- ブラウザによる適切な高さ。初期値。
実数値	C1- ie4- N4- 高さを文字の何倍にするか単位を付けずに指定します。たとえば、「1.5」というふうに。負の値は指定できません。
長さ	C1- ie3- N4- 行の高さを指定。負の値は指定できません。
%値	C1- ie3- N4- この要素のフォントサイズに対する割合を指定。負の値は指定できません。

一般的なline-heightの値

主な検索エンジンなどの検索結果に利用されるline-heightの値は、1.2em、1.33em、1.35em、1.5emなどで、大手ポータルサイトの最大行高は1.7emです。いろいろと調べてみると、一般的なline-heightの値は、1.2emから1.8emといわれ、最も読みやすいline-heightの値は、1.5emという意見が多いようです。

<div style="line-height:1.1em; width:33.33%; border:solid 1px #c0c0c0;">...</div>

山路を登りながら、こう考えた。
智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。

やはり窮屈な感が否めません。

<div style="line-height:1.2em; width:33.33%; border:solid 1px #c0c0c0;">...</div>

住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

<div style="line-height:1.5em; width:33.33%; border:solid 1px #c0c0c0;">...</div>

人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

ちょうど良い感じです。

<div style="line-height:1.8em; width:33.33%; border:solid 1px #c0c0c0;">...</div>

越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。

読み物には良い感じです。

*1 ソースコードなどの記述ならば、1emから1.2emでも良いでしょう。ちなみに私のページの文章のline-heightが1.5emで、ソースコードが1emあるいは1.2emです。

行の高さ (Line height calculations)

説明

使用例

行の高さの値 <'line-height'>

一般的なline-heightの値