目次
「なんだかWebページが見にくい」や「文字の間が詰まっている」という悩みはありませんか？そんなときは、CSSの「line-height」で行間を設定しましょう。
行間を適切に設定することで、Webページが見やすくなります。デザイン性も高まりサイトのユーザビリティも高まります。この記事では、CSSで行間を指定する「line-height」の使い方について詳しく解説します。
CSSで使うline-heightとは
CSSで使用するline-heightとは一体どんなものなのか、概要と基本書式を解説します。
行の高さを調節するプロパティ
line-heightは、行の高さを調整するプロパティです。文字の大きさは変わらないため、行の高さを変えることで行間を調整できます。紙のノートの罫線が広がるイメージをしてもらうと、わかりやすいかもしれません。
行の高さが高ければ行間も広がります。逆に行の高さが低ければ行間は狭まります。つまりline-heightは行間を調整するプロパティではなく、厳密には行の高さを調整した結果、行間が広がったり狭まったりするものです。
line-heightの基本書式
line-heightの基本書式は、以下のとおりです。
-
- セレクタ{
-
- line-height : 値 ;（行の高さを指定する）
- }
値には行の高さを指定する記述をします。指定できる値は、のちほど詳しく解説します。
また、line-heightはfont-sizeと共に記述される場合も多いです。その場合、下記のように記述します。
-
- セレクタ{
-
- font-size : 値 ;（フォントの大きさを指定する）
-
- line-height : 値 ;（行の高さを指定する）
- }
見やすいWebページを作成するために、いろいろと値を変更して試してみましょう。
CSSでline-heightで指定できる値
CSSでline-heightに指定できる値は、以下の5つです。
- normal（ノーマル）
- 数値のみ
- px（ピクセル）
- em（エム）
- %（パーセント）
それぞれの値の設定方法と、特徴について解説します。
normal（ノーマル）
「normal」は、プロパティの初期値です。ブラウザが自動的に行の高さ（行間）を設定してくれます。
数値のみ
特に単位を記載せず、数値だけを指定する方法です。比率を指定すれば、フォントサイズに応じて適切に行の高さ（行間）を設定してくれます。
例えば「2」を値に設定してフォントサイズを10pxにすると、行間は
「（20px（行の高さ：フォントサイズの2倍）- 10px（フォントの大きさ））÷ 2 = 5px」
となります。つまりフォントの上下に5pxずつの余白が生まれる計算です。
line-heightの値設定には、この数値のみの指定方法が一般的に用いられます。理由については、後ほど解説します。
px（ピクセル）
「px」で行の高さ（行間）を指定する方法です。絶対値で指定するため、フォントサイズに関わらず行の高さ（行間）は一定になります。
例えば「20px」を値に設定してフォントサイズを10pxにすると、行間は
「（20px（行の高さ） – 10px（フォントの大きさ））÷2 = 5px」
となります。つまりフォントの上下に5pxずつの余白が生まれる計算です。
pxで指定すると、フォントサイズが変更されると行の高さも調整する必要があります。わざわざline-heightを指定しなおす必要があるため、あまり使用をおすすめしません。
em（エム）
「em」で行の高さ（行間）を指定する方法です。emはフォントサイズによって変動するため、pxとは異なり相対値となります。
例えば値を「2em」に設定してフォントサイズを10pxにすると、行間は
「（20px（行の高さ：フォントサイズの2倍）-10px（フォントの大きさ））÷2 = 5px」
となります。つまりフォントの上下に5pxずつの余白が生まれる計算です。
emで指定する際の注意点は、親要素のフォントサイズが子要素に引き継がれてしまうことです。もし親要素と子要素のフォントサイズが異なれば、行間が崩れてしまう可能性があります。
%（パーセント）
「%」で行の高さ（行間）を指定する方法です。%もフォントサイズによって変動する相対値です。
例えば値を「200%」に設定してフォントサイズを10pxにすると、行間は
「（20px（行の高さ：フォントサイズの200%）-10px（フォントの大きさ））÷2 = 5px」
となります。つまりフォントの上下に5pxずつの余白が生まれる計算です。
%で指定する場合、emでの指定と同じく親要素が子要素に引き継がれてしまいます。そのため、親要素と子要素のフォントサイズが異なる場合は要注意です。
line-heightでおすすめの行間の値
line-heightで行間の値を設定する際、ポイントは2つあります。
- line-height:1.5〜2.0がベスト
- 上下の文字の重なりに注意
それぞれのポイントについて、解説します。
line-height:1.5〜2.0がベスト
line-heightを数値なしで指定する場合、値は1.5〜2.0がおすすめです。これ以上小さい値であると、行間が窮屈に見えてしまいます。逆にこれ以上大きい値であると、行間がすかすかに見えてしまいます。
line-heightの値は個人の好みにもよります。いろいろと試してみて、自分の好きな値を見つけてみてください。
上下の文字の重なりに注意
Webサイトで上下の文字が重なっていると、ユーザーは表示された文字を読むことができません。ユーザビリティが著しく低下してしまうため、上下の文字の重なりがないか確認してからリリースしましょう。
pxやem、%でline-heightを指定すると、Webサイトを表示した際に上下の文字が重なってしまうことがあります。そのためフォントサイズや親要素に左右されずに、行間が適切に調整される数値なしでの値指定がおすすめです。
line-heightを活用して読みやすい行間を指定しよう
CSSで行間を指定する際「line-height」が用いられます。line-heightで適切に行間を設定することで、読みやすくユーザビリティの高いWebサイトを制作できます。
line-heightに設定する値は、normal（ノーマル）・数値のみ・px（ピクセル）・em（エム）・%（パーセント）の5つです。数値のみで設定すれば、フォントサイズや親要素に左右されずに行間が適切に設定されます。そのため、line-heightを使用する際は数値だけで値を設定しましょう。
CSSにはline-height以外にも様々なプロパティがあります。もっとCSSについて学びたい、そんな人はスクールに通うことでプロの講師の指導を受けられますよ。プログラミングスクールに興味がある人は、おすすめのプログラミングスクール比較ランキングTOP10！もチェックしてみてください。
■関連記事はこちら↓
CSSとは？簡単に解説！初心者でもわかる書き方と基本を紹介
HTMLとは？初心者向けに簡単に解説！基本知識やタグ一覧も紹介
