CSSでline-hightを使って行間を指定する方法【初心者向け】

CSSの初心者向けに、【line-hight】を使って行間を指定する方法を解説した記事。px(ピクセル)、em(エム)、%(パーセント)で指定する方法をサンプルコードを用いて紹介。読めばすぐに使えるようになります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSS初心者向けに、line-hightを使って行間を指定する方法を解説する記事です。

CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。

 

line-hightとは

CSSのline-hightプロパティを使用することで、文字列の行の間隔を調整することができます。間隔が狭すぎても広すぎても見にくくなってしまいますので、サイトに合わせて調整しましょう。

 

事前準備

事前準備として、HTMLファイルとCSSファイルをそれぞれ用意しました。なお、CSSのファイルは「sample.css」にすることにします。また、ブラウザのデフォルトサイズを16pxとしています。

ぜひ自分のPCでもやってみましょう。

 

HTMLファイル:

 

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”sample1″>廣い門の下には、この男の破瓜に誰もゐない。 唯、所々丹塗の剥げた、大きた圓柱に、蟋蟀が一匹とまつてゐる。羅生門が、朱雀大路にある以上は、この男の破瓜にも、雨やみをする市女笠や揉烏帽子が、もう二三人はありさうなものである。それが、この男の外には誰もゐない。</p>
<p class=”sample2″>何故かと云ふと、この二三年、京都には、地震とか、辻風とか火事とか飢饉とか言ふ災がつヾいて起つた。そこで洛中のさびれ方は一通りではない。舊記によると、仏像や仏具を打砕いて、その丹がついたり、金銀の箔がついたりした木を、路ばたにつなみ重ねて、薪の料に売つてゐたと言ふ事である。洛中がその始末であるから、羅生門の修理などは、元より誰も捨てヽ顧る者がなかつた。するとその荒れ果てたのをよい事にして、狐狸が棲む。盗人が棲む。とうとうしまひには、引取り手のない死人を、この門へ持つて来て、棄てヽ行くと言ふ習慣さへ出来た。そこで、日の目が見えなくなると、誰でも気味を悪るがつて、この門の近所へは足ぶみをしない事になつてしまつたのである。</p>
</body>
</html>

 

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

line-hightを使ってみる

では具体的に使ってみましょう。

 

まずは値をnormalに設定してみます。

p.sample1 {line-height:normal; }
p.sample2 {line-height:normal; }

 

デフォルトではこの状態に設定されているので、当然なにも変わりません。

nomal

 

ここからは、下記の3つの指定方法を紹介します。

  • pxで指定
  • emで指定
  • %で指定

 

pxで指定

コンピューターで画像や文字を表すときの、色情報を持つ最小単位「px(ピクセル)」で設定します。

下記のように記述します。

p.sample1 {line-height:20px; }
p.sample2 {line-height:50px; }

 

ブラウザで確認してみましょう。line-heightで指定した数値から文字のサイズ(ここではデフォルトの16px)を引き、残った数値を上下に均等に振り分けます。そのため、数値が大きいほど行の間隔も広くなります。

ピクセルで指定

 

emで指定

続いて、単位「em(エム)」で指定した場合の例です。emはfont-sizeプロパティで指定された大きさを1とした単位で、親要素などで指定されていない場合は1em=16pxとなります。

下記のように記述します。

p.sample1 {line-height:2em; }
p.sample2 {line-height:4em; }

 

ブラウザで確認してみましょう。こちらも指定した値が大きいほど行間も広くなります。デフォルトが16pxでしたので、2em=32px、4em=64pxで指定したことと同じです。

emで指定

 

%で指定

最後に%で指定します。font-sizeプロパティで指定された大きさを100%とし、指定した%の数値で行間を指定します。親要素などで指定されていない場合は100%=16pxとなります。

下記のように記述します。

p.sample1 {line-height:150%; }
p.sample2 {line-height:200%; }

 

ブラウザではこのようになります。デフォルトが16pxでしたので、150%=24px、200%=32pxで指定したことと同じです。

%で指定

 

今回の記事は以上です。

CSSをさらに学びたい場合は、CSSでfont-styleを使って文字のスタイルを指定する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。