From ce4c4c52ab46ed108664ebc833eeab8d80bbe2f2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 5 Nov 2021 00:08:59 +0900 Subject: CSS Font 系のプロパティ文書の更新準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/line-height/index.html | 179 -------------------------------- files/ja/web/css/line-height/index.md | 179 ++++++++++++++++++++++++++++++++ 2 files changed, 179 insertions(+), 179 deletions(-) delete mode 100644 files/ja/web/css/line-height/index.html create mode 100644 files/ja/web/css/line-height/index.md (limited to 'files/ja/web/css/line-height') diff --git a/files/ja/web/css/line-height/index.html b/files/ja/web/css/line-height/index.html deleted file mode 100644 index c47467e018..0000000000 --- a/files/ja/web/css/line-height/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -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 ---- -
{{CSSRef}}
- -

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

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

構文

- -
/* キーワード値 */
-line-height: normal;
-
-/* 単位のない値: この値を要素のフォントサイズに
-掛けたものを使用する */
-line-height: 3.5;
-
-/* <length> 値 */
-line-height: 3em;
-
-/* <percentage> 値 */
-line-height: 34%;
-
-/* グローバル値 */
-line-height: inherit;
-line-height: initial;
-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}}
-
行の高さを現在のブロックのコンテンツの高さにします。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

基本的な例

- -
/* 以下のルールの結果はすべて、同じ 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; } /* 一括指定 */
- -

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

- -

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

- -

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

- -

CSS

- -
.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;
-}
-
- -

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)}}

- -

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

- -

主要な段落コンテンツでは、 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")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/line-height/index.md b/files/ja/web/css/line-height/index.md new file mode 100644 index 0000000000..c47467e018 --- /dev/null +++ b/files/ja/web/css/line-height/index.md @@ -0,0 +1,179 @@ +--- +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 +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/line-height.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+line-height: normal;
+
+/* 単位のない値: この値を要素のフォントサイズに
+掛けたものを使用する */
+line-height: 3.5;
+
+/* <length> 値 */
+line-height: 3em;
+
+/* <percentage> 値 */
+line-height: 34%;
+
+/* グローバル値 */
+line-height: inherit;
+line-height: initial;
+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}}
+
行の高さを現在のブロックのコンテンツの高さにします。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

基本的な例

+ +
/* 以下のルールの結果はすべて、同じ 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; } /* 一括指定 */
+ +

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

+ +

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

+ +

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

+ +

CSS

+ +
.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;
+}
+
+ +

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)}}

+ +

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

+ +

主要な段落コンテンツでは、 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")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf