行の間を開けたい、line-heightについて【初心者向け】 | ウェブデザイン・ウェブマーケティングならonWEB

line-heightとは？

line-heightプロパティは、行間の幅を指定する際に使用します。
行の高さには負の値(-など)を指定することはできません。

【値としては以下があります】
⇒数字と単位で指定する場合
例：line-height:50px;

数値にpxやemやexなどの単位をつけて指定します。
pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。

⇒数値のみで指定する場合
例：line-height：1.5;

例えば｢1.5｣と指定すると｢150%｣や｢1.5em｣と指定した場合と同じになります。
フォントのサイズにその数値を掛けた値が適用されます。

⇒%で指定する場合
例：line-height:１５０%;

フォントのサイズを100%とした場合のパーセンテージで設定します。

【補足】

px(ピクセル)
ピクセル単位の指定。
環境によって変化しない絶対単位。

em（エム）
文字の高さを基準にした単位。1emは1文字分。
MacintoshやWindowsなどの使用している環境によって大きさが変化する相対単位。
bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100％なら「1em=16px」が基準になります。

line-heightの指定方法

【例1:line-height:2;で指定】

【HTML】


<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="text1">
　―――――― 体は剣で出来ている。
Steel is my body, and fire is my blood.
　血潮は鉄で　心は硝子。
　I have created over a thousand blades.
　幾たびの戦場を越えて不敗。
　　　　　　Unknown to Death.
　ただの一度も敗走はなく、
　　　　　　Nor known to Life.
　ただの一度も理解されない。
　　　　　Have withstood pain to create many weapons.
　彼の者は常に独り　剣の丘で勝利に酔う。
Yet, those hands will never hold anything.
　故に、生涯に意味はなく。
　　　　So as I pray, unlimited blade works.
　その体は、きっと剣で出来ていた。
</p>
</body>
</html>

【CSS】


p.text1 {line-height: 2;}

【例1：表示例】


―――――― 体は剣で出来ている。
Steel is my body, and fire is my blood.
　血潮は鉄で　心は硝子。
　I have created over a thousand blades.
　幾たびの戦場を越えて不敗。
　　　　　　Unknown to Death.
　ただの一度も敗走はなく、
　　　　　　Nor known to Life.
　ただの一度も理解されない。
　　　　　Have withstood pain to create many weapons.
　彼の者は常に独り　剣の丘で勝利に酔う。
Yet, those hands will never hold anything.
　故に、生涯に意味はなく。
　　　　So as I pray, unlimited blade works.
　その体は、きっと剣で出来ていた。

⬆︎画面では以下のように表示されます。
値を2と指定しているので200%と同じ値になります。

line-heightについてでした

以上がline-heightの説明になります、このようにline-heightを使うことで行間を任意のサイズで指定するこが可能になります。
値が数種類あるので試してみてしっくりくる値を使うとよいです。
他にもHTML、CSSには多くの要素があります。これからもHTML、CSSについて記事を掲載していきます。