line-heightの初歩。フォント・行の高さはポイント2つ【優先的に使うものがある】

こんにちは、いどはるです。

HTMLの文書の高さを決める、CSSのline-heightについて学んだので記事にしています。

始めは複雑に思えましたが、ポイントを2つに絞ると理解が深まりました

✔️line-heightのポイント

  • line-heightは、「行の高さ
  • 文字の大きさ(font-size)をもとにline-heightを作る方法もある

優先的に使うべき方法もあるので、詳しく書いていきます。

私はドットインストールでプログラミングを学び中(今回の記事はCSS基礎文法入門#09)。

なお、テキストエディタAtomを使用しています。

AtomというエディターとGoogle Chromeを使うことで、HTMLやCSSの文書を作成することができます(参考:【入門】プログラミング(HTML)の学習環境を作る。無料Google chromeなどでカンタンHTML/CSSの学習環境を整えよう [Windows編]HTML/CSSの学習環境を整えよう [macOS編])。

短い記事ですので、line-heightの初歩について簡単に確認できると思います。CSSを学びたての人に、参考にしていただければ幸いです。

line-heightは、「行の高さ」

行の高さが、line-height

こんな感じで、行の高さがline-heightによって設定されます。 ↑ は、32pxで設定。

高さは、「px(ピクセル)」で指定しています。「px(ピクセル)」は1つの単位。大きさを表す単位だと思ってもらうと分かりやすいです。

コードはこれで作りました。

p {
font-size: 16px;
line-height: 32px;
}

この場合、文字の高さ(font-size)は16px。

font-sizeは、文字の高さ

行高から文字の高さを引いた残りを、上下均等に割り当るので8ピクセルずつが上と下に割り当てられます。

上と下に均等に割り当てられる

以上、ピクセルという大きさを表す単位で、行の高さを解説しました。

ただし、こちらは理解のための基本です。よく使われるline-heightは以下に書きます。

文字の大きさ(font-size)をもとにline-heightを作る方法もある

ピクセル以外にも、「normal(初期値。設定しなくても、ブラウザが自動的に決めてくれる)」、「em(エム)」、「%(パーセント)」、「単位なし」で指定する方法もあります。

「em(エム)」と、「単位なし」を紹介します。

ちなみに、「単位なし」がよく使われます。子要素のフォントサイズに合わせて、行高を計算し直してくれるからです。単位があると、親要素で計算された高さが、子要素にも引き継がれてしまう。

よく分からなくても、「単位なし」がよく使われるline-heightと知っておくと良い。

line-heightを「em(エム)」にする。font-sizeの○文字分

「em(エム)」は、font-sizeの○文字分の高さという意味で使われます。

先ほど例に挙げたコードだと、「行高32pxに対して、文字の高さ16px」でした。

「文字の高さ16pxに対して、2emとすると、行高は32px分の高さになる」ということです。

p {
font-size: 16px;
line-height: 32px;
}

↑ のコードのline-heightと、

p {
font-size: 16px;
line-height: 2em;
}

↑ のコードのline-heightは、結局同じ高さ。16px × 2で、32pxですね。

line-heightを「単位なし」にする。font-sizeの○文字分(子要素に引き継がれず、再計算してくれる)

line-heightを「単位なし」とした場合も、「em(エム)」と同じです。数字の数だけ、font-sizeをもとに行高を決めます

ただし、「単位なし」は子要素ごとに再計算してくれるので、都合がいいので単位なしで設定されることが多いです。

font-sizeを16px、line-heightを32pxで表す。

p {
font-size: 16px;
line-height: 32px;
}

↑ のコードのline-heightと、font-sizeを16px、line-heightを2emで表した

p {
font-size: 16px;
line-height: 2em;
}

↑ は、同じ行の高さになる。16px × 2で、32px。

また、単位なしで表した「line-height: 2;」も同じ意味となります。

p {
font-size: 16px;
line-height: 2;
}

16px × 2で、32pxです。

ただし、「単位なし」は、子要素ごとに再計算してくれることになって使い勝手が良いので使われることが多い

結論として、line-heightは「単位なし」を優先的に使っていけばOKということですドットインストールCSS基礎文法入門#09も確認してみてください。

以上となります。参考にしていただければ幸いです。では!