CSS line-heightの書き方3つを初心者向けに図で解説!

web開発

2016/11/02

web開発

CSSプロパティの一つである、line-heightプロパティについて解説します。

line-heightプロパティを使えば、行間を調節することができます。

この記事では、line-heightの3通りの書き方や、line-heightでできることについて、図で詳しく解説しています。

CSS初心者でも理解できる内容なので、ぜひご覧ください。

※CSSがまだ理解できていない人は、CSSについて解説した記事をご覧ください。

 

line-heightとは?

line-heightプロパティを使えば、文字の行間を調節することができます。

行間とは、下の図のように、文字の大きさ(font-size)とその文字の上下の余白のことです。

行間とは何かの解説画像

line-height:値;

のようにCSSを記述します。

 

line-heightの書き方3通り

line-heightの書き方には以下の3通りがあります。

1:px、emなど(30px、20em)で数値を指定

2:数値のみ(5、20など)で指定

3:%(50%など)で指定

では、1〜3を順番に解説していきます。

 

px、emなどで数値を指定

例えば、以下のようなHTMLがあるとします。

※HTMLがあまり理解できていない人は、HTMLについて解説した記事をご覧ください。

このHTMLに対して、以下のCSSを適用します。

すると、以下のような結果になります。

line-heightで数値を使用した結果

先ほどの解説の通り、line-heightは行間(文字の大きさ+上下の余白)です。

今回は、文字の大きさ(font-size)が20pxline-heightが30pxです。

したがって、上下の余白はそれぞれ、(30px20px)÷2 = 5pxになります。

 

数値のみで指定

pxやemで指定せずに、数値のみでline-heightを指定するとどうなるのでしょうか?

以下のHTMLを例に解説します。

そして、以下のCSSを適用します。

この場合は、line-heightが20px×2=40pxになります。よって、以下のような結果となります。

line-heightで数値のみを使用した結果

上下の余白はそれぞれ(40px20px)÷2=10pxになります。

以上がline-heightで数値のみを指定する方法です。

 

%で指定

最後はline-heightで%を指定する場合です。

以下のHTMLを例に挙げます。

そして、以下のCSSを適用します。

line-heightで%指定した場合は、line-heightがfont-size:20pxの200%で40pxになります。

したがって、以下のようになります。

line-heightで%を使用した結果

上下の余白はそれぞれ(40px20px)÷2=10pxになります。

 

いかがでしたか?line-heightのプロパティに関する解説は以上です。

line-heightプロパティは、数あるCSSのプロパティの中でもよく使うプロパティの一つなので、ぜひ覚えておきましょう!

 

目的別!最先端ITスキル講座

海外の人気講師によるWeb制作のベストセラ―講座

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)

ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどを網羅的にマスターできる

最新!iOS11アプリ開発講座

【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC
【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC

地図検索、ARなど20個以上のアプリを作って学べる実践講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

【世界で5万人が受講】実践 Python データサイエンス
【世界で5万人が受講】実践 Python データサイエンス

データ解析の基本、可視化、統計、機械学習などデータサイエンスに関するあらゆる実践的なスキルがPythonで身に付く!

初級者から学べる人工知能講座の決定版

みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習
みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習

初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事