行間を調整する時に便利！CSSのline-heightの使い方【初心者向け】
初心者向けにCSSで書くline-heightの使い方について解説しています。line-heightは行間の調整を行う際に便利です。より良いデザインにするためには必要な知識なので、ぜひ使えるようにしておきましょう。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。
CSSで書くline-heightの使い方について解説していきます。
行間の広さを変える時に便利な知識なので、使い方を理解していきましょう。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回はline-heightを使ってみよう。
田島メンター！！line-heightは何をするものなんですか〜？
行の高さを設定するプロパティで、これによって文字列の行間の幅を調整することができるんだ。
文章などのレイアウトで必要になりそうですね。よろしくお願いします！
line-heightとは
line-heightプロパティを使用すると、文章の行間の広さを設定することができます。
行間調整の書き方
line-heightプロパティは以下のように記述します。
line-height: 値;
値はpxなどの単位で指定する方法、数値のみで指定する方法、%で指定する方法の3つがあります。
line-heightで指定される高さは、フォントの大きさ＋上下の余白になります。
そのため、文字と文字の間の余白はline-heightで設定した数値からフォントサイズを引いた数値が上下に均等に割り振って配置されます。例えばフォントサイズが16pxの文章にline-heightで20pxを指定した場合、2px分の行間が上下に配置されます。(4pxを均等に配置)
30px,2emなど数字と単位で指定する場合
他の2つの方法が相対値での設定であるのに対して、単位での指定は絶対値での設定となります。
数値のみで指定する場合
フォントのサイズにその数値を掛けた値が適用されます。
%で指定する場合
フォントのサイズを100%とした場合のパーセンテージで設定します。
line-heightの長さには、文字自体も含まれているってことですね。
値の種類によって、どのように適用されるかというのが少しずつ違うんだ。実際の例を見てみよう。
分かりました！
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
実際に書いてみよう
(※htmlとcssが同じディレクトリ内にあり、外部スタイルシートのファイル名が”sample.css”である場合の例です)
html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”content1″>
此書は趣向もなく、構造もなく、尾頭の心元なき海鼠なまこの様な文章であるから、
たとい此一巻で消えてなくなった所で一向差さし支つかえはない。又実際消えてなくなるかも知れん。
然し将来忙中に閑を偸ぬすんで硯すずりの塵ちりを吹く機会があれば再び稿を続ぐ積つもりである。
猫が生きて居る間は――猫が丈夫で居る間は――猫が気が向くときは――余も亦また筆を執とらねばらぬ。
</p>
</body>
</html>
数値と単位で指定した場合
css
p.content1 {line-height: 40px;}
画面では以下のように表示されます。
設定した40pxからフォントの大きさ(font-sizeを指定していないためここではブラウザの標準サイズ16px)を引き、残りの24pxを上下に12pxずつ割り振っています。
数値のみで指定した場合
css
p.content1 {line-height: 4;}
画面では以下のように表示されます。
設定した4をフォントサイズ16pxに掛けた64pxからフォントの大きさの16pxを引き、残りの48pxを上下に24pxずつ割り振っています。
%で指定した場合
css
p.content1 {line-height: 150%;}
画面では以下のように表示されます。
フォントサイズ16pxの150%である24pxから16pxを引き、残りの8pxを上下に4pxずつ割り振っています。
以上、CSSのline-heightについて解説しました。
行間が少し違うだけで、見え方も大きく変わります。良い見た目を作るためにも行間の調整方法を覚えておきましょう。
単位の場合、数値のみの場合、％の場合の例をそれぞれ見てみたよ。
例えばpxなどの単位で指定したとき、フォントよりも小さい数値を設定したらどうなるんですか？
その場合は行同士が重なって表示されることになるよ。単位と数値で指定するときには注意が必要だね。
なるほど、気をつけます。ありがとうございました！
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
