Skip to content

Commit

Permalink
2022/04/06 時点の英語版に同期
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 committed Aug 20, 2022
1 parent d495646 commit e727154
Showing 1 changed file with 27 additions and 13 deletions.
40 changes: 27 additions & 13 deletions files/ja/web/css/line-height-step/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,57 @@ title: line-height-step
slug: Web/CSS/line-height-step
tags:
- CSS
- CSS フォント
- CSS プロパティ
- CSS Fonts
- CSS Property
- Reference
- recipe:css-property
browser-compat: css.properties.line-height-step
translation_of: Web/CSS/line-height-step
l10n:
sourceCommit: 293c903f50ef81458e5e1df61887abaf8b4d7bb9
---
{{CSSRef}}

{{SeeCompatTable}}

**`line-height-step`** は CSS のプロパティで、行ボックスの高さにおける刻みの単位を設定します。このプロパティが設定された場合、行ボックスの高さは単位の倍数のうち最も近いものに切り上げられます。

```css
/* ポイント値 */
line-height-step: 18pt;
```

{{cssinfo}}
/* グローバル値 */
line-height-step: inherit;
line-height-step: initial;
line-height-step: revert;
line-height-step: revert-layer;
line-height-step: unset;
```

## 構文

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

- [`<length>`](#<length>)
- `<length>` です。

### 値

- `<length>`
- : 指定された {{cssxref("&lt;length&gt;")}} が、行ボックスの高さの刻みの計算に使用されます。

### 形式文法
## 公式定義

{{cssinfo}}

## 形式文法

{{csssyntax}}

## 例

以下の例では、それぞれの段落の行ボックスの高さは、刻みの単位に切り上げられます。 `<h1>` の行ボックスの高さは1つの刻みに収まらないので2つ分を占有しますが、その中の中央に配置されます。
### 行ボックスの高さに刻みの単位を設定

以下の例では、それぞれの段落の行ボックスの高さは、刻みの単位に切り上げられます。 `<h1>` の行ボックスの高さは 1 つの刻みに収まらないので 2 つ分を占有しますが、その中の中央に配置されます。

```css
:root {
Expand All @@ -51,19 +67,17 @@ h1 {
}
```

これらの規則の結果は、次のスクリーンショットのようになります。
これらのルールの結果は、次のスクリーンショットのようになります。

![どのように line-height-step プロパティがテキストの表示に影響するか](https://mdn.mozillademos.org/files/15257/line-grid-center.png)
![どのように line-height-step プロパティがテキストの表示に影響するか](line-grid-center.png)

## 仕様書

| 仕様書 | 状態 | 備考 |
| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- |
| {{SpecName('CSS Rhythmic Sizing', '#line-height-step', 'line-height-step')}} | {{Spec2('CSS Rhythmic Sizing')}} | 初回定義 |
{{Specifications}}

## ブラウザーの互換性

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

## 関連情報

Expand Down

0 comments on commit e727154

Please sign in to comment.