Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web/CSS/vertical-align を更新 #23906

Merged
merged 1 commit into from
Oct 8, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 51 additions & 30 deletions files/ja/web/css/vertical-align/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: vertical-align
slug: Web/CSS/vertical-align
l10n:
sourceCommit: 583d48191a7a8605d831aff357bef6cc63aef2e3
---

{{CSSRef}}
Expand All @@ -11,10 +13,10 @@ slug: Web/CSS/vertical-align

vertical-align は、2 つの場面で使用することができます。

- 包含する行ボックスの中で、インライン要素のボックスの垂直方向の配置を決める場合。例えば、[テキストの行の中で画像の垂直位置を決める](#vertical_alignment_in_a_line_box)ために使用することができます。
- 包含する行ボックスの中で、インラインレベル要素のボックスの垂直方向の配置を決める場合。例えば、[テキストの行の中で画像の垂直位置を決める](#vertical_alignment_in_a_line_box)ために使用することができます。
- [表のセルの内容](#vertical_alignment_in_a_table_cell)の垂直方向の配置を決める場合。

`vertical-align` はインライン要素、インラインブロック要素、表のセル要素だけに適用されることに注意してください。つまり、[ブロックレベル要素](/ja/docs/Web/HTML/Block-level_elements)の垂直方向の配置には使用できません。
`vertical-align` はインライン要素、インラインブロック要素、表のセル要素だけに適用されることに注意してください。つまり、[ブロックレベル要素](/ja/docs/Glossary/Block-level_content)の垂直方向の配置には使用できません。

## 構文

Expand All @@ -40,6 +42,7 @@ vertical-align: 20%;
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;
```

Expand All @@ -66,7 +69,7 @@ vertical-align: unset;
- {{cssxref("<length>")}}
- : 要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。
- {{cssxref("<percentage>")}}
- : `<length>` 値と似ていますが、{{Cssxref("line-height")}} プロパティに対するパーセント値で指定します。負の値を使えます
- : 要素のベースラインを、親要素のベースラインから指定されたパーセント値分上に配置します。値は、{{Cssxref("line-height")}} プロパティのパーセント値です。負の値も指定できます

#### 行との相対値

Expand Down Expand Up @@ -150,22 +153,22 @@ img.middle {

#### HTML

```html
```html-nolint
<p>
top: <img style="vertical-align: top" src="star.png" /> middle:
<img style="vertical-align: middle" src="star.png" /> bottom:
<img style="vertical-align: bottom" src="star.png" /> super:
<img style="vertical-align: super" src="star.png" /> sub:
<img style="vertical-align: sub" src="star.png" />
top: <img style="vertical-align: top" src="star.png" alt="star"/>
middle: <img style="vertical-align: middle" src="star.png" alt="star"/>
bottom: <img style="vertical-align: bottom" src="star.png" alt="star"/>
super: <img style="vertical-align: super" src="star.png" alt="star"/>
sub: <img style="vertical-align: sub" src="star.png" alt="star"/>
</p>

<p>
text-top: <img style="vertical-align: text-top" src="star.png" /> text-bottom:
<img style="vertical-align: text-bottom" src="star.png" /> 0.2em:
<img style="vertical-align: 0.2em" src="star.png" /> -1em:
<img style="vertical-align: -1em" src="star.png" /> 20%:
<img style="vertical-align: 20%" src="star.png" /> -100%:
<img style="vertical-align: -100%" src="star.png" />
text-top: <img style="vertical-align: text-top" src="star.png" alt="star"/>
text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
0.2em: <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
-1em: <img style="vertical-align: -1em" src="star.png" alt="star"/>
20%: <img style="vertical-align: 20%" src="star.png" alt="star"/>
-100%: <img style="vertical-align: -100%" src="star.png" alt="star"/>
</p>
```

Expand Down Expand Up @@ -195,24 +198,26 @@ p {

### 表のセル内での垂直方向の配置

例えば、6 つのセルがある単一の行のある表があるとします。 この行は、既定値として `vertical-align` を `bottom` に設定します。

- 最初の 4 つのセルはそれぞれ自分自身で `vertical-align` の値を設定し、これらの値は行の値を上書きします。
- 5 番目のセルは `vertical-align` の値を設定しないので、行の値を継承します。

6 番目のセルは、効果を確認するためにセルの高さを十分に確保することを保証するためにのみ使用します。

#### HTML

```html
<table>
<tr>
<td style="vertical-align: baseline">baseline</td>
<td style="vertical-align: top">top</td>
<td style="vertical-align: middle">middle</td>
<td style="vertical-align: bottom">bottom</td>
<tr class="bottom">
<td class="baseline">baseline</td>
<td class="top">top</td>
<td class="middle">middle</td>
<td>bottom</td>
<td>Row's style</td>
<td>
<p>
There is a theory which states that if ever anyone discovers exactly
what the Universe is for and why it is here, it will instantly disappear
and be replaced by something even more bizarre and inexplicable.
</p>
<p>
There is another theory which states that this has already happened.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
pretium felis eu sem mattis vulputate.
</td>
</tr>
</table>
Expand All @@ -237,6 +242,22 @@ td {
padding: 0.5em;
font-family: monospace;
}

.bottom {
vertical-align: bottom;
}

.baseline {
vertical-align: baseline;
}

.top {
vertical-align: top;
}

.middle {
vertical-align: middle;
}
```

#### 結果
Expand All @@ -253,7 +274,7 @@ td {

## 関連情報

- [フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#center_item)
- [フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox#center_item)
- {{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}
- [Understanding `vertical-align`, or "How (Not) To Vertically Center Content"](http://phrogz.net/css/vertical-align/index.html)
- [Understanding `vertical-align`, or "How (Not) To Vertically Center Content"](https://phrogz.net/css/vertical-align/index.html)
- [Vertical-Align: All You Need To Know](https://christopheraue.net/design/vertical-align)