hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

文字の高さ指定

ブラウザによっては、

文字のサイズが同じでも、文字の高さが異なり、

行間が詰まって見えることがある。

 

これを解消するのが

「 line-height 」で、

上下にどれくらいの余裕を持たせるのかを指定できるプロパティ。

上下の余白も含めたサイズである。

 

image

 

◉ line-height の使い方

    line-height {  数値 ; }

line-height の指定単位は、主に3つ。

  ● 数値のみ。フォントサイズ×数値が列の高さを指定する。

  ● em(フォントサイズの何倍か?)や、px、ptなどの単位を用いる。

  ● フォントサイズの何%かをパーセント指定する。

※何もマイナス値を指定することはできない。

 

サイズに対する割合で指定する方が一般的。

 ● 割合 = 文字の高さ/文字のサイズ

EX) font-size : 14px

        line-height : 20px  にしたいとする。

  しかし、この場合、割合で指定するので、

       { line-height : 1.429 ; }      ※( 20 / 14 = 1.429 ) 

  となる。

 

◉ なぜpxではなく割合で指定するのか??

例えば、文中で強調したい部分がある場合、<strong> 〜 </strong>

タグで囲む。

この際、line-height をpxで指定していると、

強調部分のみ行間が詰まってしまう。

 

これを避けるために、

「 line-height 」の値を「font-size」の割合で指定しておくことで、

同様の行間を保つことができる。

 

割合で指定した例:

line-heightプロパティのサンプルです。行間の指定は文書の読みやすさに非常に重要です

 

pxで指定した例:

line-heightプロパティのサンプルです。行間の指定は文書の読みやすさに非常に重要です。