From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/line-height/index.html | 181 ++++++++++++++++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 files/ja/web/css/line-height/index.html (limited to 'files/ja/web/css/line-height/index.html') diff --git a/files/ja/web/css/line-height/index.html b/files/ja/web/css/line-height/index.html new file mode 100644 index 0000000000..3df521e2cc --- /dev/null +++ b/files/ja/web/css/line-height/index.html @@ -0,0 +1,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 +--- +
{{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