From 39429ef78076da6194c50f8e0536c32378a706a2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 4 Oct 2024 23:30:35 +0900 Subject: [PATCH] =?UTF-8?q?2024/09/10=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/vertical-align/index.md | 81 +++++++++++++++--------- 1 file changed, 51 insertions(+), 30 deletions(-) diff --git a/files/ja/web/css/vertical-align/index.md b/files/ja/web/css/vertical-align/index.md index 16fd436d35e997..57f1fc171f1d6b 100644 --- a/files/ja/web/css/vertical-align/index.md +++ b/files/ja/web/css/vertical-align/index.md @@ -1,6 +1,8 @@ --- title: vertical-align slug: Web/CSS/vertical-align +l10n: + sourceCommit: 583d48191a7a8605d831aff357bef6cc63aef2e3 --- {{CSSRef}} @@ -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)の垂直方向の配置には使用できません。 ## 構文 @@ -40,6 +42,7 @@ vertical-align: 20%; vertical-align: inherit; vertical-align: initial; vertical-align: revert; +vertical-align: revert-layer; vertical-align: unset; ``` @@ -66,7 +69,7 @@ vertical-align: unset; - {{cssxref("<length>")}} - : 要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。 - {{cssxref("<percentage>")}} - - : `` 値と似ていますが、{{Cssxref("line-height")}} プロパティに対するパーセント値で指定します。負の値を使えます。 + - : 要素のベースラインを、親要素のベースラインから指定されたパーセント値分上に配置します。値は、{{Cssxref("line-height")}} プロパティのパーセント値です。負の値も指定できます。 #### 行との相対値 @@ -150,22 +153,22 @@ img.middle { #### HTML -```html +```html-nolint

- top: middle: - bottom: - super: - sub: - +top: star +middle: star +bottom: star +super: star +sub: star

- text-top: text-bottom: - 0.2em: - -1em: - 20%: - -100%: - +text-top: star +text-bottom: star +0.2em: star +-1em: star +20%: star +-100%: star

``` @@ -195,24 +198,26 @@ p { ### 表のセル内での垂直方向の配置 +例えば、6 つのセルがある単一の行のある表があるとします。 この行は、既定値として `vertical-align` を `bottom` に設定します。 + +- 最初の 4 つのセルはそれぞれ自分自身で `vertical-align` の値を設定し、これらの値は行の値を上書きします。 +- 5 番目のセルは `vertical-align` の値を設定しないので、行の値を継承します。 + +6 番目のセルは、効果を確認するためにセルの高さを十分に確保することを保証するためにのみ使用します。 + #### HTML ```html - - - - - + + + + + +
baselinetopmiddlebottom
baselinetopmiddlebottomRow's style -

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

-

- There is another theory which states that this has already happened. -

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse + pretium felis eu sem mattis vulputate.
@@ -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; +} ``` #### 結果 @@ -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)