CSS｜行間を変える「line-heightプロパティ」

行の高さ（行間）を指定するときは「line-heightプロパティ」を使います。主な値はキーワードと数値（単位あり、または単位なし）があります。数値で指定するのが一般的で、文字を見やすくするために1.5～1.9がお勧めです。

主な値による指定方法

主な値はキーワード”normal”と、数値による指定方法、単位（px、em、％）の有るものと無いものがあります。

＜CSS構文＞

/*キーワード値*/
line-height: normal;
/*単位のない値*/
line-height: 3.5;
/***単位のある値***/
/*<px>値*/
line-height: 30px;
/*<em>値*/
line-height: 3em;
/*<%>値*/
line-height: 34%;

行間は単位のない数値で指定するのが望ましい

単位のある数値は相対値の影響を受ける場合があり、行間が狭くなりすぎて文字が重なる場合など予期しない結果になる場合があります。従って、単位なしの行間指定の方が問題は少ないといえます。

CSS｜文字の大きさを変える「font-sizeプロパティ」

文字の大きさを変えるのはCSSの基本。 文字の大きさを変えるには「font-sizeプロパティ」で指定します。 値は数値で指定する方法とキーワードで指定する方法があります。

fudousin.com

2021.09.30

行間は狭すぎると詰まっているように感じ、広すぎると視線が移しづらくなります。一般的いわれている1.5～1.9が見やすいサイズになります。

例）単位の無い数値で指定

＜HTML＞

 <p>
吾輩は猫である。名前はまだ無い。
どこで生れたか頓（とん）と見當がつかぬ。
何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
吾輩はこゝで始めて人間といふものを見た。
然（しか）もあとで聞くとそれは書生といふ人間中で一番獰悪（だうあく）な種族であつたさうだ。
此書生といふのは時々我々を捕（つかま）へて煮て食ふといふ話である。
然し其當時は何といふ考（かんがへ）もなかつたから別段恐しいとも思はなかつた。
</p>

＜CSS＞

/*数値を1、1.7、2に変えて表示してみる*/
p {
line-height : 1.7;
}

＜表示＞