aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css/line-height/index.html
blob: 3df521e2cc718b5311d2babfaab717bb161c5acd (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
---
title: line-height
slug: Web/CSS/line-height
tags:
  - CSS
  - CSS Fonts
  - CSS Property
  - CSS フォント
  - CSS プロパティ
  - Layout
  - Reference
  - Text
  - Vertical
  - height
  - 'recipe:css-property'
  - size
translation_of: Web/CSS/line-height
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong><code>line-height</code></strong><a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。</span>ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非<a href="/ja/docs/Web/CSS/Replaced_element">置換</a>インライン要素では、行ボックスの高さの計算に使われる高さを指定します。</p>

<div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
line-height: normal;

/* 単位のない値: この値を要素のフォントサイズに
掛けたものを使用する */
line-height: 3.5;

/* &lt;length&gt; 値 */
line-height: 3em;

/* &lt;percentage&gt; 値 */
line-height: 34%;

/* グローバル値 */
line-height: inherit;
line-height: initial;
line-height: unset;
</pre>

<p><code>line-height</code> プロパティは以下のうちの一つで指定します。</p>

<ul>
 <li>一つの <code><a href="#&lt;number>">&lt;number&gt;</a></code></li>
 <li>一つの <code><a href="#&lt;length>">&lt;length&gt;</a></code></li>
 <li>一つの <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code></li>
 <li>キーワード <code><a href="#normal">normal</a></code></li>
</ul>

<h3 id="Values" name="Values"></h3>

<dl>
 <dt><code id="normal">normal</code></dt>
 <dd>ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の <code>font-family</code> によって決まる、おおよそ <strong><code>1.2</code></strong> という既定値を使います。</dd>
 <dt><code id="&lt;number>">&lt;number&gt;</code> (単位なし)</dt>
 <dd>使用値は、この単位のない {{cssxref("&lt;number&gt;")}} に要素のフォントサイズを掛けたものになります。計算値は、指定された <code>&lt;number&gt;</code> と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが <code>line-height</code> を設定する<strong>好ましい方法です</strong></dd>
 <dt><code id="&lt;length>">&lt;length&gt;</code></dt>
 <dd>行ボックスの高さの計算に、指定した {{cssxref("&lt;length&gt;")}} が使われます。利用可能な単位については、 {{cssxref("&lt;length&gt;")}} をご覧ください。</dd>
 <dt><code id="&lt;percentage>">&lt;percentage&gt;</code></dt>
 <dd>要素自身のフォントサイズに対する相対値です。計算値はこの {{cssxref("&lt;percentage&gt;")}} に要素のフォントサイズの計算値を掛けたものです。<strong>パーセント</strong>値は予期しない結果を生む可能性があります (下記の2つの例を参照してください)。</dd>
 <dt><code id="-moz-block-height">-moz-block-height</code> {{non-standard_inline}}</dt>
 <dd>行の高さを現在のブロックのコンテンツの高さにします。</dd>
</dl>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Examples" name="Examples"></h2>

<h3 id="Basic_example" name="Basic_example">基本的な例</h3>

<pre class="brush: css notranslate">/* 以下のルールの結果はすべて、同じ line height です */

div { line-height: 1.2;   font-size: 10pt; }   /* 数値/単位なし */
div { line-height: 1.2em; font-size: 10pt; }   /* 長さ */
div { line-height: 120%;  font-size: 10pt; }   /* パーセント値 */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* 一括指定 */</pre>

<p><code>line-height</code> を設定するには、上記の {{cssxref("font")}} 一括指定プロパティがより便利なことが多いのですが、同時に <code>font-family</code> プロパティも指定しなければなりません。</p>

<h3 id="Prefer_unitless_numbers_for_line-height_values" name="Prefer_unitless_numbers_for_line-height_values">line-height の値は単位なしの数値が好ましい</h3>

<p>以下の例は、line-height の値として {{cssxref("&lt;length&gt;")}} より {{cssxref("&lt;number&gt;")}} のほうが好ましい理由を示しています。 2 つの {{HTMLElement("div")}} 要素を使用しています。最初のものは緑色の境界を持っており、単位なしの <code>line-height</code> の値を使用しています。二番目は赤色の境界を持っており、 <code>line-height</code> の値を <code>em</code> で定義して使用しています。</p>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">.green {
  line-height: 1.1;
  border: solid limegreen;
}

.red {
  line-height: 1.1em;
  border: solid red;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}
</pre>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="box green"&gt;
 &lt;h1&gt;予期しない結果を避けるために、単位なしの line-height を使いましょう。&lt;/h1&gt;
  length と percentage で line-height を指定すると、継承動作がうまくいきません。 ...
&lt;/div&gt;

&lt;div class="box red"&gt;
 &lt;h1&gt;予期しない結果を避けるために、単位なしの line-height を使いましょう。&lt;/h1&gt;
  length と percentage で line-height を指定すると、継承動作がうまくいきません。 ...
&lt;/div&gt;

&lt;!-- 1 つ目の &lt;h1&gt; の line-height はそれ自身のフォントサイズから計算されます   (30px × 1.1) = 33px  --&gt;
&lt;!-- 2 つ目の &lt;h1&gt; の line-height は red div のフォントサイズから計算されます  (15px × 1.1) = 16.5px  おそらく、望む結果ではないでしょう --&gt;
</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}</p>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>

<p>主要な段落コンテンツでは、 <code>line-height</code> の値の最小値が <code>1.5</code> になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。</p>

<p><a href="https://www.w3.org/TR/WCAG21/#visual-presentation" rel="noopener">W3C Understanding WCAG 2.1</a></p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.line-height")}}</p>
</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{Cssxref("font")}}, {{Cssxref("font-size")}}</li>
</ul>