行間を調整する時に便利！CSSのline-heightの使い方【初心者向け】現役エンジニアが解説

CSSで書くline-heightの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• line-heightとは
• line-heightの書き方
• 実際に書いてみよう
• CSSを学習中の方へ

そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

【動画の解説はこちら】

 

 

line-heightとは

line-heightは、文章の行の高さを設定できるプロパティです。

文章の行間をあけたり、せばめたいときに使用します。

 

line-heightの書き方

line-heightプロパティは以下のように記述します。

line-height: 値;

値は絶対値で指定する方法、文字サイズを基準に設定する方法、normalで指定する方法の3つがあります。

line-heightで指定される高さは、文字の高さ＋上下の余白です。

そのため、文字の上下の余白はline-heightで設定した数値からフォントサイズを引いた数値が均等に配置されます。

例えば文字サイズが16pxの文章にline-heightで20pxを指定した場合、20px – 16px = 4pxとなり、上下に各2pxずつ余白が配置されます。

 

絶対値で指定する場合

pxで設定すると1行の高さが、文字サイズに関係なく指定した高さになります。

HTML

<p class="font10">line-heightで行の高さを設定してみましょう。</p>
<p class="font20">line-heightで行の高さを設定してみましょう。</p>

CSS

p{
  line-height:50px;
  background:gold;
}

.font10{
  font-size:10px;
}
.font20{
  font-size:20px;
}

表示結果

行の高さがわかりやすいように背景色をつけています。

文字サイズに関わらず、行（<p>）の高さは一律で50pxになっています。

 

文字サイズを基準に指定する場合

文字のサイズに合わせて行間を指定する場合は、単位をつけずに数値を書きます。

文字のサイズを1として計算しますので、1だと文字の高さ=行の高さになります。

2文字分の行の高さにする場合は、line-heightの値を2にします。

HTMLは絶対値で指定する場合と同様です。

 

CSS

p{
  line-height:3;
  background:gold;
}
.font10{
  font-size:10px;
}
.font20{
  font-size:20px;
}

表示結果

同じline-height: 3; を適用していますが、文字サイズによって行（<p>）の高さが変わっているのがわかります。

上の行は、フォントサイズが10pxなので、 10 x 3 = 30px の高さに、下の行はフォントサイズが20pxなので、 20 x 3 = 60px の高さになっています。

％やem、remなどでも、文字のサイズに応じた行の高さを指定することが可能です。

一方で、font-sizeを指定している要素とline-heightを指定している要素が異なる場合などでは、意図した表示にならないことがあります。

文字のサイズに応じて行の高さを変えたい場合は、単位をつけずに指定するのが良いです。

 

また、line-heightの値として、normalというキーワードを設定した場合は、ブラウザで設定されているデフォルトの行の高さが適用されます。

 

 

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

文章で行の高さを設定する場合は、文字のサイズに合わせて行間が変わるようにしておくと良いです。

逆にボタンなど、デザイン的にどうしても行の高さを固定したいときには、絶対値で指定すると良いでしょう。

HTML

<div class="area line-height-1">
  <h1>line-height:1;</h1>
  <p class="font-size-15">此書は趣向もなく、構造もなく、尾頭の心元なき海鼠なまこの様な文章であるから、たとい此一巻で消えてなくなった所で一向差さし支つかえはない。又実際消えてなくなるかも知れん。</p>
  <p class="font-size-10">然し将来忙中に閑を偸ぬすんで硯すずりの塵ちりを吹く機会があれば再び稿を続ぐ積つもりである。猫が生きて居る間は――猫が丈夫で居る間は――猫が気が向くときは――余も亦また筆を執とらねばらぬ。</p>
  <a href="#">続きを読む</a>
</div>

<div class="area line-height-1-5">
  <h1>line-height:1.5;</h1>
  <p class="font-size-15">此書は趣向もなく、構造もなく、尾頭の心元なき海鼠なまこの様な文章であるから、たとい此一巻で消えてなくなった所で一向差さし支つかえはない。又実際消えてなくなるかも知れん。</p>
  <p class="font-size-10">然し将来忙中に閑を偸ぬすんで硯すずりの塵ちりを吹く機会があれば再び稿を続ぐ積つもりである。猫が生きて居る間は――猫が丈夫で居る間は――猫が気が向くときは――余も亦また筆を執とらねばらぬ。</p>
  <a href="#">続きを読む</a>
</div>

<div class="area line-height-2">
  <h1>line-height:2;</h1>
  <p class="font-size-15">此書は趣向もなく、構造もなく、尾頭の心元なき海鼠なまこの様な文章であるから、たとい此一巻で消えてなくなった所で一向差さし支つかえはない。又実際消えてなくなるかも知れん。</p>
  <p class="font-size-10">然し将来忙中に閑を偸ぬすんで硯すずりの塵ちりを吹く機会があれば再び稿を続ぐ積つもりである。猫が生きて居る間は――猫が丈夫で居る間は――猫が気が向くときは――余も亦また筆を執とらねばらぬ。</p>
  <a href="#">続きを読む</a>
</div>

CSS

.font-size-10{
  font-size:10px;
}
.font-size-15{
  font-size:15px;
}
.line-height-1{
  line-height:1;
}
.line-height-1-5{
  line-height:1.5;
}
.line-height-2{
  line-height:2;
}
a{
  display:inline-block;
  width:120px;
  height:50px;
  line-height:50px;
  background:gold;
  border-radius:25px;
  font-size:13px;
  color:black;
  text-decoration:none;
  text-align:center;
}

表示結果

ボックスごとに異なるline-heightを適用してみました。

文字サイズに応じて、行の高さが変わっていることが確認できます。

また、行の高さで文章の読みやすさや、雰囲気が変わります。

適した行の高さは、フォントの種類や、日本語なのか英語なのか、などによっても異なります。

line-heightを使って、その場面に応じた行間を設定していくと良いです。

また、「続きを読む」ボタンには、ボックスの高さと行の高さを同じ50pxに設定しています。

ボックスの高さと行の高さを同じ50pxに設定することで、ボタンの縦方向の中央にテキストを配置できます。

 

使い所に応じて、line-heightの指定の方法を使い分けてください。

 

以上、CSSのline-heightについて解説しました。

行間が少し違うだけで、見え方も大きく変わります。

良い見た目を作るためにも、行間の調整方法を覚えておきましょう。

 

 

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！