2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] line-heightプロパティで行の高さを指定しよう!

line-heightの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.line-heightとは?

line-heightプロパティは行の高さを指定します。

値の指定方法は以下の通りです。

{ line-height: 値; }

値の指定方法

  • normal
  • 任意の数値+単位
  • 任意の数値
  • %値
ポイント

line-heightの値はアクセシビリティを考慮して1.5以上の数値を単位なしで指定しましょう。

pxなどで指定すると文字サイズの変更に対して行間が崩れたりする場合があるので注意が必要です。




2.line-heightの使い方

それではline-heightの使い方をみていきましょう。

p {
 line-height: 2;
}

上記の例では行の高さが通常の2倍になります。

他にも値を設定できるのでいろいろと試してみることをお勧めします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です