From c2d1b8b56c5a9f45f5ea9f5471c87d1b904f9087 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Oct 2021 00:25:17 +0900 Subject: CSS Table 関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/28 時点の英語版に同期 --- files/ja/web/css/vertical-align/index.md | 350 +++++++++++++++---------------- files/ja/web/css/vertical-align/star.png | Bin 0 -> 753 bytes 2 files changed, 167 insertions(+), 183 deletions(-) create mode 100644 files/ja/web/css/vertical-align/star.png (limited to 'files/ja/web/css/vertical-align') diff --git a/files/ja/web/css/vertical-align/index.md b/files/ja/web/css/vertical-align/index.md index 7302c8c57b..97000a1c58 100644 --- a/files/ja/web/css/vertical-align/index.md +++ b/files/ja/web/css/vertical-align/index.md @@ -4,108 +4,26 @@ slug: Web/CSS/vertical-align tags: - CSS - CSS プロパティ - - Reference + - リファレンス translation_of: Web/CSS/vertical-align --- -
{{CSSRef}}
+{{CSSRef}} -

vertical-align は CSS のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。

+**`vertical-align`** は [CSS](/ja/docs/Web/CSS) のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。 -
{{EmbedInteractiveExample("pages/css/vertical-align.html")}}
+{{EmbedInteractiveExample("pages/css/vertical-align.html")}} - +vertical-align は、2 つの場面で使用することができます。 -

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

+- 包含する行ボックスの中で、インライン要素のボックスの垂直方向の配置を決める場合。例えば、[テキストの行の中で画像の垂直位置を決める](#vertical_alignment_in_a_line_box)ために使用することができます。 +- [表のセルの内容](#vertical_alignment_in_a_table_cell)の垂直方向の配置を決める場合。 - +`vertical-align` はインライン要素、インラインブロック要素、表のセル要素だけに適用されることに注意してください。つまり、[ブロックレベル要素](/ja/docs/Web/HTML/Block-level_elements)の垂直方向の配置には使用できません。 -
- - - -
- -

{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}

- - - -
- - - -
- -

{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}

- -

vertical-align はインライン要素、インラインブロック要素、表セル要素だけに適用できることに注意してください。つまり、ブロックレベル要素の縦方向の整列には使えないのです。

- -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 vertical-align: baseline;
 vertical-align: sub;
 vertical-align: super;
@@ -115,138 +33,204 @@ vertical-align: middle;
 vertical-align: top;
 vertical-align: bottom;
 
-/* <length> 値 */
+/*  値 */
 vertical-align: 10em;
 vertical-align: 4px;
 
-/* <percentage> 値 */
+/*  値 */
 vertical-align: 20%;
 
 /* グローバル値 */
 vertical-align: inherit;
 vertical-align: initial;
+vertical-align: revert;
 vertical-align: unset;
-
+``` -

vertical-align プロパティは、以下の値のうち一つで指定します。

+`vertical-align` プロパティは、以下の値のうち一つで指定します。 -

インライン要素用の値

+### インライン要素用の値 -

親要素との相対値

+#### 親要素との相対値 -

以下の値は、親要素に対しての縦方向の整列方法を表します。

+以下の値は、親要素に対する垂直方向の配置方法を表します。 -
-
baseline
-
要素のベースラインを親要素のベースラインに揃えます。 {{HTMLElement("textarea")}} のような、一部の 置換要素 のベースラインは HTML 仕様で未定義であり、このため、このキーワードの挙動はブラウザにより異なるかもしれません。
-
sub
-
要素のベースラインを親要素の subscript-baseline に揃えます。
-
super
-
要素のベースラインを親要素の superscript-baseline に揃えます。
-
text-top
-
要素の上端を親要素のフォントの上端に揃えます。
-
text-bottom
-
要素の下端を親要素のフォントの下端に揃えます。
-
middle
-
要素の中央を親要素の baseline + x-height の半分 に揃えます。
-
{{cssxref("<length>")}}
-
要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。
-
{{cssxref("<percentage>")}}
-
<length> 値と似ていますが、{{Cssxref("line-height")}} プロパティに対するパーセンテージで指定します。負の値を使えます。
-
+- `baseline` + - : 要素のベースラインを親要素のベースラインに揃えます。一部の[置換要素](/ja/docs/Web/CSS/Replaced_element)、例えば {{HTMLElement("textarea")}} などのベースラインは HTML 仕様で未定義です。このため、このキーワードの挙動はブラウザーにより異なるかもしれません。 +- `sub` + - : 要素のベースラインを親要素の subscript-baseline に揃えます。 +- `super` + - : 要素のベースラインを親要素の superscript-baseline に揃えます。 +- `text-top` + - : 要素の上端を親要素のフォントの上端に揃えます。 +- `text-bottom` + - : 要素の下端を親要素のフォントの下端に揃えます。 +- `middle` + - : 要素の中央を親要素の `baseline + x-height の半分` に揃えます。 +- {{cssxref("<length>")}} + - : 要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。 +- {{cssxref("<percentage>")}} + - : <length> 値と似ていますが、{{Cssxref("line-height")}} プロパティに対するパーセント値で指定します。負の値を使えます。 -

行との相対値

+#### 行との相対値 -

以下の値は、親要素ではなく、行全体に対しての縦方向の整列方法を表します。

+以下の値は、親要素ではなく、行全体に対する垂直方向の配置方法を表します。 -
-
top
-
要素と子孫要素の上端を行全体の上端に揃えます。
-
bottom
-
要素と子孫要素の下端を行全体の下端に揃えます。
-
+- `top` + - : 要素と子孫要素の上端を行全体の上端に揃えます。 +- `bottom` + - : 要素と子孫要素の下端を行全体の下端に揃えます。 -

ベースラインを持たない要素では、代わりにマージン境界の下端が使われます。

+ベースラインを持たない要素では、代わりにマージン境界の下端が使われます。 -

表セル用の値

+### 表のセル用の値 -
-
baseline (および sub, super, text-top, text-bottom, <length>, <percentage>)
-
セルのベースラインを、行内でベースライン揃えにされた他のすべてのセルのベースラインに揃えます。
-
top
-
セルの上端のパディング境界を行の上端に揃えます。
-
middle
-
セルのパディングボックスが行の中央になるようにします。
-
bottom
-
セルの下端のパディング境界を行の下端に揃えます。
-
+- `baseline` (および `sub`, `super`, `text-top`, `text-bottom`, ``, ``) + - : セルのベースラインを、行内でベースライン揃えにされた他のすべてのセルのベースラインに揃えます。 +- `top` + - : セルの上端のパディング境界を行の上端に揃えます。 +- `middle` + - : セルのパディングボックスが行の中央になるようにします。 +- `bottom` + - : セルの下端のパディング境界を行の下端に揃えます。 -

負の値を使用することができます。

+負の値を使用することができます。 -

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

基本的な例

+

基本的な例

-

HTML

+#### HTML -
<div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>
-<div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div>
-<div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div>
-<div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
-
+```html +
An link image with a default alignment.
+
An link image with a text-top alignment.
+
An link image with a text-bottom alignment.
+
An link image with a middle alignment.
+``` -

CSS

+#### CSS -
img.top { vertical-align: text-top; }
+```css
+img.top { vertical-align: text-top; }
 img.bottom { vertical-align: text-bottom; }
 img.middle { vertical-align: middle; }
-
+``` -

Result

+#### 結果 -

{{EmbedLiveSample("Basic_example")}}

+{{EmbedLiveSample("Basic_example")}} -

仕様書

+

行ボックス内での垂直方向の配置

- - - - - - - - - - - - - - +#### HTML + +```html +

+top: +middle: +bottom: +super: +sub: +

+ +

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

+``` + +```css hidden +#* { + box-sizing: border-box; +} + +img { + margin-right: 0.5em; +} + +p { + height: 3em; + padding: 0 .5em; + font-family: monospace; + text-decoration: underline overline; + margin-left: auto; + margin-right: auto; + width: 80%; +} +``` + +#### 結果 + +{{EmbedLiveSample("Vertical_alignment_in_a_line_box", '100%', 160, "", "")}} + +

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

+ +#### HTML + +```html +
仕様書状態備考
{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}{{Spec2('CSS2.1')}}{{cssxref("<length>")}} 値を追加し、 {{cssxref("display")}} が table-cell である要素で使えるようにした。
- - - + + + + + -
{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}{{Spec2('CSS1')}}初回定義baselinetopmiddlebottom +

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.

+
+``` + +#### CSS + +```css +table { + margin-left: auto; + margin-right: auto; + width: 80%; +} + +table, th, td { + border: 1px solid black; +} + +td { + padding: 0.5em; + font-family: monospace; +} +``` + +#### 結果 + +{{EmbedLiveSample("Vertical_alignment_in_a_table_cell", '100%', 230, "", "")}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("css.properties.vertical-align")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節](/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) +- [Vertical-Align: All You Need To Know](https://christopheraue.net/design/vertical-align) diff --git a/files/ja/web/css/vertical-align/star.png b/files/ja/web/css/vertical-align/star.png new file mode 100644 index 0000000000..bee01b962b Binary files /dev/null and b/files/ja/web/css/vertical-align/star.png differ -- cgit v1.2.3-54-g00ecf