- Webデザイン
- 2016/11/02
CSS line-heightの書き方3つを初心者向けに図で解説!
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について解説した記事をご覧ください。
1 |
<p>udemy</p> |
このHTMLに対して、以下のCSSを適用します。
1 2 3 4 |
p{ font-size:20px; line-height:30px; } |
すると、以下のような結果になります。
先ほどの解説の通り、line-heightは行間(文字の大きさ+上下の余白)です。
今回は、文字の大きさ(font-size)が20px、line-heightが30pxです。
したがって、上下の余白はそれぞれ、(30px–20px)÷2 = 5pxになります。
数値のみで指定
pxやemで指定せずに、数値のみでline-heightを指定するとどうなるのでしょうか?
以下のHTMLを例に解説します。
1 |
<p>udemy</p> |
そして、以下のCSSを適用します。
1 2 3 4 |
p{ font-size:20px; line-height:2; } |
この場合は、line-heightが20px×2=40pxになります。よって、以下のような結果となります。
上下の余白はそれぞれ(40px–20px)÷2=10pxになります。
以上がline-heightで数値のみを指定する方法です。
%で指定
最後はline-heightで%を指定する場合です。
以下のHTMLを例に挙げます。
1 |
<p>udemy</p> |
そして、以下のCSSを適用します。
1 2 3 4 |
p{ font-size:20px; line-height:200%; } |
line-heightで%指定した場合は、line-heightがfont-size:20pxの200%で40pxになります。
したがって、以下のようになります。
上下の余白はそれぞれ(40px–20px)÷2=10pxになります。
いかがでしたか?line-heightのプロパティに関する解説は以上です。
line-heightプロパティは、数あるCSSのプロパティの中でもよく使うプロパティの一つなので、ぜひ覚えておきましょう!
WEBデザイン学習者が学ぶべきスキルセット
Webデザイナーを目指すなら
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

Webデザインに挑戦したい人が一気通貫して学べる総合学習コースです。
イラレの基本~実践的なテクニックを学ぶ
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材

グラフィックデザイン・印刷の基礎知識を手に入れて、仕事に役立ててみませんか?
最新のAdobe XDを最短でマスター
【2020年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ

機能の紹介や単なる操作方法の説明に終わらせず、実践的な作品制作をしながら機能の完全理解と応用力を育てることに重点を置いたXDマスター講座!
動画編集をマスターしよう!
業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版

動画制作をはじめたい方へ、短期間で仕事で応用できるほどのスキルアップ技をお届け。
関連記事

CSS paddingが初心者でもわかる!+αの知識も紹介
CSSのpaddingプロパティについて、HTML/CSS初心者向けに解説し…

【2015年Amazonランキング総合1位】「外資系投資銀行のエクセル仕事術」の著者が贈るエ…
──熊野整さん──ボストン大学卒業後、モルガン・スタンレー証券…

マーケティングで重要なペルソナとは?メリットから作り方まで解説!
マーケティング従事者が良く聞く言葉「ペルソナ」。 このペルソ…

HTMLとは?タグの概念やコードの書き方が簡単にわかる!
WEBプログラミングを学習するにあたって、ほとんどの人がまず最…
最新情報・キャンペーン情報発信中