line-height インラインボックスの高さの指定
line-height プロパティを理解する
- line-height プロパティによる行間算出の仕組み
- line-height プロパティの値の指定方法
- スタイルシート マネージャで 文字の大きさや line-height を指定する
- font 関連プロパティの一括指定で line-height の値も指定できる
- line-height プロパティの応用
- 一行テキストの上下中央配置に line-height プロパティを使う
line-height プロパティによる行間算出の仕組み
Ｗｅｂブラウザが適用する行間のサイズは、文字サイズと line-height で指定された値に基づいて算出されます。
たとえばあるインラインボックス内の文字サイズが 1em で、line-height の値が 2em の場合は、文字サイズと line-height の値の差（ 2em-1em ）である 1em が行間となります。実際にはこれを２等分した半行間分のスペースが文字の上下にそれぞれ挿入されることになります。
これで見るように、line-height を行間と訳すのは間違いであることが分かります。
なお、一般的に読みやすいとされる line-height の値は 1.4～1.5 程度といわれています。当ページは 150% で作成されております。
インラインボックスあるいはインライン要素
ＨＴＭＬを構成する３つの要素を参照してください。
line-height プロパティの値の指定方法
インラインボックスの高さを指定する line-height プロパティには、以下に示す値が指定できます。
| 値 | 説明 | 例 |
|---|---|---|
| normal | ブラウザのデフォルト設定に依存 | p {line-height: normal; } |
| inherit | 親要素に指定された値を継承 | p {line-height: inherit; } |
| <length> | em、px など単位付きで指定 | p {line-height: 1.5em; } p {line-height: 20px; } |
| <number> | 単位を付けずに数値を指定 | p {line-height: 1.4; } |
| <percentage> | パーセンテージ指定 | p {line-height: 150%; } |
このなかで、<length> と <percentage> のように単位付きで指定するものと、単位なしの <number> では、子孫要素への継承のされ方が異なります。
単位無し指定では子孫要素ではインラインボックスの高さが再計算されます。一方、単位を指定した場合は子孫要素では再計算されないので、場合によっては文字が重なって表示されるなどの不具合が生じやすい。
従って、インラインボックスの値には単位を指定しない方が良いでしょう。
なお、単位付き指定がいけないわけではなく、意図してインラインボックスの高さを制御したいときなどは、単位あり指定を選択する場合もあります。
スタイルシート マネージャで 文字の大きさや line-height を指定する
① メニューバーから 「表示」 → 「スタイルシート マネージャ」 を選択します。
「スタイルシート マネージャ」 ダイアログが表示されます。
② ［追加］ ボタンをクリックします。
「スタイルの設定」 ダイアログを表示されます。
③ ［HTML タグの候補］ で ［段落 P］ を選択します。
④ ［フォント］ タブをクリックし、［サイズ］ の設定を ［予約語］ からピクセルなどの他の単位に切り替え、数値を設定します。
⑤ 続けて ［文字のレイアウト］ タブをクリックし、［行間］ の設定を ［予約語］ からピクセルなどの他の単位に切り替え、数値を設定します。
［行間］ スピン ボックス / リスト ボックス
- 文字列の行と行の間隔を指定します。
- 予約語
- 初期値のサイズが使用されます。
- ピクセル、ポイント、インチ、cm、mm、パイカ
- サイズを指定する単位です。
- 文字の高さ
- 現在のフォント サイズを 1 として、使用するサイズを指定します。
- "x" の高さ
- 現在のフォントでの文字 "x" のフォント サイズを 1 として、使用するサイズを指定します。
- パーセント
- 現在のフォント サイズを 100% として、使用するサイズを指定します。
- 倍
- 現在のフォント サイズを 1 として、使用するサイズを指定します。
⑥ ［OK］ ボタンをクリックします。
「スタイルシート マネージャ」 ダイアログに戻ります。
⑦ ［閉じる］ ボタンをクリックします。
編集中のページに、設定したスタイルが自動的に反映されます。
font 関連プロパティの一括指定で line-height の値も指定できる
font 関連プロパティの一括指定では、文字のイタリック指定、スモールキャピタル指定、太さ、サイズ、フォントだけでなく、line-height プロパティの値も指定できます。参照： font（一括指定）
font 関連プロパティの指定順序
- font-style、font-variant、font-weight （順不同で省略可能）
- font-size （省略不可）
- /line-height （値の前に必ず半角スラッシュ ［/］ が必要で省略可能）
- font-family （省略不可）
以下3つの例は、いずれも同じスタイルを表しています。
- CSSソース： 個別指定
- body {
- font-family: Osaka, verdana, sans-serif ;
- font-style: normal ;
- font-variant: normal ;
- font-weight: bold ;
- font-size: 100% ;
- line-height: 1.4;
- }
- CSSソース： 一括指定（省略なし）
- body {
- font: normal normal bold 100%/1.4 Osaka, verdana, sans-serif ;
- }
- CSSソース： 一括指定（省略あり）
- body {
- font: bold 100%/1.4 Osaka, verdana, sans-serif ;
- }
line-height プロパティの応用
一行テキストの上下中央配置に line-height プロパティを使う
テキストを背景画像に対して上下中央に配置したいとき、padding プロパティでテキストの表示位置を調整することができます。しかし、テキストの長さがある程度決まっていて一行で完結する場合は、 line-height プロパティを利用するのが良いでしょう。
line-height プロパティはインラインボックスの高さを指定するプロパティで、上下の余白が均等になる。この仕様を利用してテキストを上下中央に配置することができます。文字サイズが変わったりした場合の padding プロパティのような細かい調整が必要なく、簡単に上下中央配置を実現できます。
- CSSソース：
- h2 {
- background: url(../images/wallppr015.gif) repeat-x left top ;
- text-align: center ;
- line-height: 1.5;
- }
- XHTMLソース:
- <h2>一行のタイトルが入ります</h2>
- ブラウザでの見え方 ⇒ css12_sample01.html