From 917858acd763bfb1f5d1e794c4f3bf45d00f3666 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 6 Nov 2021 01:12:30 +0900 Subject: CSS Fonts の各プロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/05 時点の英語版に同期 --- files/ja/web/css/line-height/index.md | 189 +++++++++++++++------------------- 1 file changed, 83 insertions(+), 106 deletions(-) (limited to 'files/ja/web/css/line-height') diff --git a/files/ja/web/css/line-height/index.md b/files/ja/web/css/line-height/index.md index c47467e018..cae023207f 100644 --- a/files/ja/web/css/line-height/index.md +++ b/files/ja/web/css/line-height/index.md @@ -3,30 +3,28 @@ title: line-height slug: Web/CSS/line-height tags: - CSS - - CSS Fonts - - CSS Property - CSS フォント - CSS プロパティ - - Layout - - Reference - - Text + - レイアウト + - リファレンス + - テキスト - Vertical - height - - 'recipe:css-property' + - recipe:css-property - size +browser-compat: css.properties.line-height translation_of: Web/CSS/line-height --- -
{{CSSRef}}
+{{CSSRef}} -

line-height は CSS のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非置換インライン要素では、行ボックスの高さの計算に使われる高さを指定します。

+**`line-height`** は [CSS](/ja/docs/Web/CSS) のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非[置換](/ja/docs/Web/CSS/Replaced_element)インライン要素では、行ボックスの高さの計算に使われる高さを指定します。 -
{{EmbedInteractiveExample("pages/css/line-height.html")}}
+{{EmbedInteractiveExample("pages/css/line-height.html")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 line-height: normal;
 
 /* 単位のない値: この値を要素のフォントサイズに
@@ -42,57 +40,84 @@ line-height: 34%;
 /* グローバル値 */
 line-height: inherit;
 line-height: initial;
+line-height: revert;
 line-height: unset;
-
- -

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

- - - -

値

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

形式文法

+``` + +`line-height` プロパティは以下のうちの一つで指定します。 + +- 一つの `` +- 一つの `` +- 一つの `` +- キーワード `normal` + +### 値 + +- `normal` + - : ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の `font-family` によって決まる、おおよそ **`1.2`** という既定値を使います。 +- `` (単位なし) + - : 使用値は、この単位のない {{cssxref("<number>")}} に要素のフォントサイズを掛けたものになります。計算値は、指定された `` と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが `line-height` を設定する**好ましい方法です**。 +- `` + - : 行ボックスの高さの計算に、指定した {{cssxref("<length>")}} が使われます。**em** の単位で値が与えられると予期しない結果をになることがあります (下記の例を参照してください)。 +- `` + - : 要素自身のフォントサイズに対する相対値です。計算値はこの {{cssxref("<percentage>")}} に要素のフォントサイズの計算値を掛けたものです。**パーセント値**は予期しない結果を生む可能性があります (下記の第 2 の例を参照してください)。 +- `-moz-block-height` {{non-standard_inline}} + - : 行の高さを現在のブロックのコンテンツの高さにします。 + +## アクセシビリティの考慮 + +主要な段落コンテンツでは、 `line-height` の値が `1.5` 以上になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。 + +[W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation) + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

基本的な例

+### 基本的な例 -
/* 以下のルールの結果はすべて、同じ line height です */
+```css
+/* 以下のルールの結果はすべて、同じ 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; } /* 一括指定 */
+div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif; } /* 一括指定 */ +``` + +`line-height` を設定するには、上記の {{cssxref("font")}} 一括指定プロパティがより便利なことが多いのですが、この場合は同時に `font-family` プロパティも指定しなければなりません。 + +

line-height の値は単位なしの数値が好ましい

+ +以下の例は、{{cssxref("<number>")}} を使用したほうが {{cssxref("<length>")}} よりも好ましい理由を示しています。 2 つの {{HTMLElement("div")}} 要素を使用しています。最初のものには緑色の境界があり、単位なしの `line-height` の値を使用しています。2 番目には赤色の境界があり、 `line-height` の値を `em` で定義して使用しています。 + +#### HTML -

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

+```html +
+

予期しない結果を避けるために、単位なしの line-height を使いましょう。

+ length と percentage で line-height を指定すると、継承動作がうまくいきません。 ... +
-

line-height の値は単位なしの数値が好ましい

+
+

予期しない結果を避けるために、単位なしの line-height を使いましょう。

+ length と percentage で line-height を指定すると、継承動作がうまくいきません。 ... +
-

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

+ + +``` -

CSS

+#### CSS -
.green {
+```css
+.green {
   line-height: 1.1;
   border: solid limegreen;
 }
@@ -112,68 +137,20 @@ h1 {
   vertical-align: top;
   font-size: 15px;
 }
-
+``` -

HTML

- -
<div class="box green">
- <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1>
-  length と percentage で line-height を指定すると、継承動作がうまくいきません。 ...
-</div>
-
-<div class="box red">
- <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1>
-  length と percentage で line-height を指定すると、継承動作がうまくいきません。 ...
-</div>
+#### 結果
 
-<!-- 1 つ目の <h1> の line-height はそれ自身のフォントサイズから計算されます   (30px × 1.1) = 33px  -->
-<!-- 2 つ目の <h1> の line-height は red div のフォントサイズから計算されます  (15px × 1.1) = 16.5px  おそらく、望む結果ではないでしょう -->
-
+{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}} -

結果

+## 仕様書 -

{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}

+{{Specifications}} -

アクセシビリティの考慮事項

+## ブラウザーの互換性 -

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

- -

W3C Understanding WCAG 2.1

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#line-height', 'line-height')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -
-

{{Compat("css.properties.line-height")}}

-
+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{Cssxref("font")}}, {{Cssxref("font-size")}}
    • -
+- {{Cssxref("font")}}, {{Cssxref("font-size")}} -- cgit v1.2.3-54-g00ecf