line-heightとは?行間プロパティについての詳しい説明

こんにちは tanaka です。

cssプロパティ
line-height の話です。

line-heightは、
行間指定のプロパティです。

しかし、
行間そのもの指定をする
わけではなく

font-sizeと行間を含めた数値を
指定します。

画像blog-css-line-height16

そして、
cssでは
文字の高さ

font-sizeではなく
line-heightで設定した数値
になります。

画像blog-css-line-height17

display:inline の時
行間にバックグラウンドが入らない
所も、注意です。

画像blog-css-line-height13

それでは、
詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

line-heightの説明

line-heightは、font-sizeと行間を含めた数値

line-heightは、
行間指定のプロパティです。

しかし、
行間そのもの指定をする
わけではなく

font-sizeと行間を含めた数値を
指定します。

画像blog-css-line-height16

特殊な値(単位なし数値だけ)

line-heightの値は、
 normal(ブラウザのデフォルト数値になる)
 px、em、%
 1(単位なし数値だけ)

line-heightへ数値を入れ
設定するときは、

行間そのものではなく
font-size+行間
の数値を入れます。

画像blog-css-line-height16

例)
font-size = 10px
行間   = 5px

line-height = 15px

normal(ブラウザのデフォルト数値になる)

normalは、
ブラウザのデフォルト数値
になります。

どのような数値になるか分からないので
使わない方が良いでしょう。

px、em、%

px、em、%は、
通常の単位として設定できます。

1(単位なし数値だけ)

特殊な値、
単位なしの指定もできます。

1と指定すると
font-sizeと同じ高さになります。

line-height: 1;
画像blog-css-line-height18

1.5と指定すると
font-sizeの1.5倍の高さになります。

line-height: 1.5;
画像blog-css-line-height19

2と指定すると
font-sizeの2倍の高さになります。

line-height: 2;
画像blog-css-line-height20

行間として使う場合は、

line-height: 1.5;

がちょうど良いでしょう。

inlineは、行間にバックスクリーンが入らない

display:inline の時
行間にバックグラウンドは入らない
ので、注意してください。

inline

画像blog-css-line-height13

inline-block

画像blog-css-line-height14

block

画像blog-css-line-height15

まとめ

line-heightとは

line-heightは、
行間指定のプロパティ。

しかし、
行間そのもの指定をする
わけではなく

font-sizeと行間を含めた数値を
指定。

画像blog-css-line-height16
文字の高さはline-heightの数値

cssでは
line-heightで設定した数値
文字の高さ。

画像blog-css-line-height17
行間は1.5がちょうど良い

line-heightの値は、
 normal(ブラウザのデフォルト数値になる)
 px、em、%
 1(単位なし数値だけ)

1.5が行間としてちょうど良い。

画像blog-css-line-height19
line-height: 1.5;
inlineはバックグラウンドが入らない

display:inline の時
行間にバックグラウンドが入らない
ので注意。

画像blog-css-line-height13

以上、
line-height
の話でした。

ありがとうございました。

タイトルとURLをコピーしました