行の高さ(line-height)

行の高さ・行間の指定方法

行の高さ・行間を指定する際のCSSは「line-height:（行の高さ・行間を指定する値）」と記述します。 行の高さ・行間の指定方法はいくつかありますが、当マニュアルでは文字の大きさに応じて行の高さ・行間が調整される、emを用いた設定方法を解説しています。

---

参考：行の高さ・行間の指定方法は単位を記載しない数値での設定方法以外に単位を記載しない方法やpx、%などがあり、単位を記載しない方法は対象のテキストの文字の大きさに応じて反映、pxは指定した値がそのまま大きさに反映、%は指定した値と親となる要素で指定されている値の掛け合わせで大きさが反映します。

記述例

サイト全体の基本となる行の高さ・行間を指定する際のコードです。

p {
 line-height : 2em ; /*サイト全体の基本となる行の高さ・行間を文字の大きさの2倍に設定*/
}

行の高さ・行間を指定する値

各値による見え方の違いは下記の通りです。

ファンメイカーのデフォルトの設定

各要素の文字は下記の行の高さ・行間で設定されています。

タイトルの行の高さ・行間

1.6em CSSの設定方法はこちら

大見出しの行の高さ・行間

1.6em CSSの設定方法はこちら

中見出しの行の高さ・行間

1.6em CSSの設定方法はこちら

小見出しの行の高さ・行間

1.6em CSSの設定方法はこちら

本文テキストの行の高さ・行間

2em CSSの設定方法はこちら

画像タイトルの行の高さ・行間

1em CSSの設定方法はこちら

画像の説明の行の高さ・行間

1.6em CSSの設定方法はこちら

記事一覧の各記事タイトルの行の高さ・行間

1em CSSの設定方法はこちら

各要素について

---

行の高さ・行間の解説は以上となります。

---

CSSでの設定はコードの記述をご自身の判断で行えるユーザー様向けの機能です。 ご留意ご利用にあたってはCSSマニュアルの使い方でご案内している注意事項をご理解の上で、ご自身の判断でお使いください。 コードに関して個別のご案内が必要な場合は、お見積りの上、当社で設定を代行することになりますので、ご入用でしたらお問い合わせフォームよりご連絡ください。