2024/10/09 時点の英語版に基づき更新

files/ja/web/css/height/index.md

@@ -1,36 +1,49 @@
 ---
 title: height
 slug: Web/CSS/height
+l10n:
+  sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43
 ---
 
 {{CSSRef}}
 
-**`height`** は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティは[コンテンツ領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#content-area)の高さを定義します。{{cssxref("box-sizing")}} が `border-box` に設定されていた場合は、 [境界領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#border-area)の高さを定義します。
+**`height`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の高さを指定します。既定では、このプロパティは[コンテンツ領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#コンテンツ領域)の高さを定義します。{{cssxref("box-sizing")}} が `border-box` に設定されていた場合は、 [境界領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#境界領域)の高さを定義します。
 
 {{EmbedInteractiveExample("pages/css/height.html")}}
 
 {{cssxref("min-height")}} および {{cssxref("max-height")}} プロパティは `height` を上書きします。
 
+> [!NOTE]
+> 幾何プロパティとして、 `height` プロパティは、{{SVGElement("svg")}}、{{SVGElement("rect")}}、{{SVGElement("image")}}、{{SVGElement("foreignObject")}} の各 SVG 要素にも適用されます。 `auto` は `0` に、パーセント値は `<rect>` の場合は SVG ビューポートの高さに対する相対値に解決します。 CSS の `height` プロパティ値は、 SVG 要素に設定された {{SVGAttr("height")}} 属性値を上書きします。
+
 ## 構文
 
 ```css
 /* <length> 値 */
 height: 120px;
 height: 10em;
+height: 100vh;
+height: anchor-size(height);
+height: anchor-size(--myAnchor self-block, 250px);
+height: clamp(200px, anchor-size(width));
 
 /* <percentage> 値 */
 height: 75%;
 
 /* キーワード値 */
 height: max-content;
 height: min-content;
+height: fit-content;
 height: fit-content(20em);
 height: auto;
+height: minmax(min-content, anchor-size(width));
+height: stretch;
 
 /* グローバル値 */
 height: inherit;
 height: initial;
 height: revert;
+height: revert-layer;
 height: unset;
 ```
 
@@ -39,17 +52,25 @@ height: unset;
 - {{cssxref("&lt;length&gt;")}}
   - : 絶対値で高さを定義します。
 - {{cssxref("&lt;percentage&gt;")}}
-  - : 包含ブロックの高さのパーセントで高さを定義します。
+  - : [包含ブロック](/ja/docs/Web/CSS/Containing_block)の高さのパーセント値で高さを定義します。
 - `auto`
   - : 指定された要素の高さをブラウザーが計算して決めます。
 - `max-content`
   - : 本来の望ましい高さです。
 - `min-content`
   - : 本来の最小の高さです。
+- `fit-content`
+  - : 利用できる空間を使用しますが、 [max-content](/ja/docs/Web/CSS/max-content) を超えないようにします。すなわち、 `min(max-content, max(min-content, stretch))` です。
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
   - : 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, <length-percentage>))` です。
+- `stretch`
+
+  - : 要素の[マージンボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)の高さを、[包含ブロック](/ja/docs/Web/CSS/Containing_block#包含ブロックの識別)の高さに設定します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 100% と似たような動作をしますが、結果として得られるサイズは [box-sizing](/ja/docs/Web/CSS/box-sizing) で決定されるボックスではなく、マージンボックスに適用されます。
 
-## アクセシビリティの考慮
+    > [!NOTE]
+    > ブラウザーが `stretch` 値のために使用する別名と実装状況については、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。
+
+## アクセシビリティ
 
 要素の `height` は、テキストを大きくするためにページを拡大したとき、切り捨てたられたり他のコンテンツを邪魔したりしないように設定するよう確認してください。
 
@@ -66,21 +87,21 @@ height: unset;
 
 ## 例
 
-<h3 id="Setting_height_using_pixels_and_percentages">ピクセル数とパーセント値を使用して高さを設定</h3>
+### ピクセル数とパーセント値を使用して高さを設定
 
 #### HTML
 
-```html
-<div id="taller">I'm 50 pixels tall.</div>
-<div id="shorter">I'm 25 pixels tall.</div>
+```html-nolint live-sample___setting_height_using_pixels_and_percentages
+<div id="taller">これは 50 ピクセルの高さです。</div>
+<div id="shorter">これは 25 ピクセルの高さです。</div>
 <div id="parent">
-  <div id="child">I'm half the height of my parent.</div>
+  <div id="child">これは親の半分の高さです。</div>
 </div>
 ```
 
 #### CSS
 
-```css
+```css live-sample___setting_height_using_pixels_and_percentages
 div {
   width: 250px;
   margin-bottom: 5px;
@@ -119,8 +140,12 @@ div {
 
 ## 関連情報
 
-- [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
 - {{cssxref("width")}}
 - {{cssxref("box-sizing")}}
 - {{cssxref("min-height")}}, {{cssxref("max-height")}}
-- 対応する論理的プロパティ: {{cssxref("block-size")}}, {{cssxref("inline-size")}}
+- {{cssxref("block-size")}}, {{cssxref("inline-size")}}
+- {{cssxref("anchor-size()")}}
+- {{cssxref("clamp", "clamp()")}}
+- {{cssxref("clamp", "minmax()")}}
+- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール

files/ja/web/css/max-height/index.md

@@ -1,6 +1,8 @@
 ---
 title: max-height
 slug: Web/CSS/max-height
+l10n:
+  sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43
 ---
 
 {{CSSRef}}
@@ -16,6 +18,8 @@ slug: Web/CSS/max-height
 ```css
 /* <length> 値 */
 max-height: 3.5em;
+max-height: anchor-size(height);
+max-height: calc(anchor-size(--myAnchor self-block, 250px) + 2em);
 
 /* <percentage> 値 */
 max-height: 75%;
@@ -24,12 +28,15 @@ max-height: 75%;
 max-height: none;
 max-height: max-content;
 max-height: min-content;
+max-height: fit-content;
 max-height: fit-content(20em);
+max-height: stretch;
 
 /* グローバル値 */
 max-height: inherit;
 max-height: initial;
 max-height: revert;
+max-height: revert-layer;
 max-height: unset;
 ```
 
@@ -45,10 +52,18 @@ max-height: unset;
   - : 内容物が推奨する `max-height` です。
 - `min-content`
   - : 内容物の最小の `max-height` です。
+- `fit-content`
+  - : 利用できる空間を使用しますが、 [max-content](/ja/docs/Web/CSS/max-content) を超えないようにします。すなわち、 `min(max-content, max(min-content, stretch))` です。
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
   - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。
+- `stretch`
 
-## アクセシビリティの考慮
+  - : 要素の[マージンボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)の最大の高さを、[包含ブロック](/ja/docs/Web/CSS/Containing_block#包含ブロックの識別)の高さに制限します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 `100%` と似たような動作をしますが、結果として得られるサイズは [box-sizing](/ja/docs/Web/CSS/box-sizing) で決定されるボックスではなく、マージンボックスに適用されます。
+
+    > [!NOTE]
+    > ブラウザーが `stretch` 値のために使用する別名と実装状況については、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。
+
+## アクセシビリティ
 
 テキストを大きくするためにページを拡大したときに、 `max-height` を設定した要素が切り取られたり、他のコンテンツを覆い隠したりしないことを確認してください。
 
@@ -87,6 +102,10 @@ form {
 
 ## 関連情報
 
-- [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)、 {{cssxref("box-sizing")}}
-- {{Cssxref("height")}}, {{Cssxref("min-height")}}
-- 対応する論理的プロパティ: {{cssxref("max-inline-size")}}, {{cssxref("max-block-size")}}
+- {{Cssxref("min-height")}}
+- {{Cssxref("height")}}
+- {{cssxref("max-inline-size")}}
+- {{cssxref("max-block-size")}}
+- {{cssxref("box-sizing")}}
+- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール

files/ja/web/css/max-width/index.md

@@ -1,6 +1,8 @@
 ---
 title: max-width
 slug: Web/CSS/max-width
+l10n:
+  sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43
 ---
 
 {{CSSRef}}
@@ -16,6 +18,8 @@ slug: Web/CSS/max-width
 ```css
 /* <length> 値 */
 max-width: 3.5em;
+max-width: anchor-size(--myAnchor inline, 245px);
+max-width: calc(anchor-size(width) + 4em);
 
 /* <percentage> 値 */
 max-width: 75%;
@@ -24,12 +28,15 @@ max-width: 75%;
 max-width: none;
 max-width: max-content;
 max-width: min-content;
+max-width: fit-content;
 max-width: fit-content(20em);
+max-width: stretch;
 
 /* グローバル値 */
 max-width: inherit;
 max-width: initial;
 max-width: revert;
+max-width: revert-layer;
 max-width: unset;
 ```
 
@@ -45,10 +52,18 @@ max-width: unset;
   - : 内容物が推奨する `max-width` です。
 - `min-content`
   - : 内容物の最小の `max-width` です。
+- `fit-content`
+  - : 利用できる空間を使用しますが、 [max-content](/ja/docs/Web/CSS/max-content) を超えないようにします。すなわち、 `min(max-content, max(min-content, stretch))` です。
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
   - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。
+- `stretch`
 
-## アクセシビリティの考慮
+  - : 要素の[マージンボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)の最大の幅を、[包含ブロック](/ja/docs/Web/CSS/Containing_block#包含ブロックの識別)の幅に設定します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 `100%` と似たような動作をしますが、結果として得られるサイズは [box-sizing](/ja/docs/Web/CSS/box-sizing) で決定されるボックスではなく、マージンボックスに適用されます。
+
+    > [!NOTE]
+    > ブラウザーが `stretch` 値のために使用する別名と実装状況については、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。
+
+## アクセシビリティ
 
 ページを拡大縮小して文字サイズを拡大した際に、 `max-width` を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。
 
@@ -108,6 +123,10 @@ max-width: unset;
 
 ## 関連情報
 
-- [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model), {{cssxref("box-sizing")}}
-- {{cssxref("width")}}, {{cssxref("min-width")}}
-- 対応する論理的プロパティ: {{cssxref("max-inline-size")}}, {{cssxref("max-block-size")}}
+- {{Cssxref("min-width")}}
+- {{Cssxref("width")}}
+- {{cssxref("max-inline-size")}}
+- {{cssxref("max-block-size")}}
+- {{cssxref("box-sizing")}}
+- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール

files/ja/web/css/min-height/index.md

@@ -1,6 +1,8 @@
 ---
 title: min-height
 slug: Web/CSS/min-height
+l10n:
+  sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43
 ---
 
 {{CSSRef}}
@@ -16,19 +18,24 @@ slug: Web/CSS/min-height
 ```css
 /* <length> 値 */
 min-height: 3.5em;
+min-height: anchor-size(height);
+min-height: anchor-size(--myAnchor block, 200px);
 
 /* <percentage> 値 */
 min-height: 10%;
 
 /* キーワード値 */
 min-height: max-content;
 min-height: min-content;
+min-height: fit-content;
 min-height: fit-content(20em);
+min-height: stretch;
 
 /* グローバル値 */
 min-height: inherit;
 min-height: initial;
 min-height: revert;
+min-height: revert-layer;
 min-height: unset;
 ```
 
@@ -44,8 +51,16 @@ min-height: unset;
   - : 内容物が推奨する `min-height` です。
 - `min-content`
   - : 内容物の最小の `min-height` です。
+- `fit-content`
+  - : 利用できる空間を使用しますが、 [max-content](/ja/docs/Web/CSS/max-content) を超えないようにします。すなわち、 `min(max-content, max(min-content, stretch))` です。
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
   - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。
+- `stretch`
+
+  - : 要素の[マージンボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)の最小の高さを、[包含ブロック](/ja/docs/Web/CSS/Containing_block#包含ブロックの識別)の高さに制限します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 `100%` と似たような動作をしますが、結果として得られるサイズは [box-sizing](/ja/docs/Web/CSS/box-sizing) で決定されるボックスではなく、マージンボックスに適用されます。
+
+    > [!NOTE]
+    > ブラウザーが `stretch` 値のために使用する別名と実装状況については、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。
 
 ## 公式定義
 
@@ -79,5 +94,10 @@ form {
 
 ## 関連情報
 
-- [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model), {{cssxref("box-sizing")}}
-- {{cssxref("height")}}, {{cssxref("max-height")}}
+- {{Cssxref("max-height")}}
+- {{Cssxref("height")}}
+- {{cssxref("min-inline-size")}}
+- {{cssxref("min-block-size")}}
+- {{cssxref("box-sizing")}}
+- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール

files/ja/web/css/min-width/index.md

@@ -1,6 +1,8 @@
 ---
 title: min-width
 slug: Web/CSS/min-width
+l10n:
+  sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43
 ---
 
 {{CSSRef}}
@@ -16,19 +18,24 @@ slug: Web/CSS/min-width
 ```css
 /* <length> 値 */
 min-width: 3.5em;
+min-width: anchor-size(width);
+min-width: anchor-size(--myAnchor self-inline, 200%);
 
 /* <percentage> 値 */
 min-width: 10%;
 
 /* キーワード値 */
 min-width: max-content;
 min-width: min-content;
+min-width: fit-content;
 min-width: fit-content(20em);
+min-width: stretch;
 
 /* グローバル値 */
 min-width: inherit;
 min-width: initial;
 min-width: revert;
+min-width: revert-layer;
 min-width: unset;
 ```
 
@@ -39,13 +46,25 @@ min-width: unset;
 - {{cssxref("&lt;percentage&gt;")}}
   - : `min-width` を包含ブロックの幅に対するパーセント値で定義します。
 - `auto`
-  - : ブラウザーが指定された要素の `min-width` を計算して選択します。
+
+  - : 既定値です。指定した要素の自動値のソースは、その表示値によって異なります。ブロックボックス、インラインボックス、インラインブロック、および表レイアウトボックスすべてでは、`auto` は `0` に解決されます。
+
+    [フレックスアイテム](/ja/docs/Glossary/Flex_Item)およびグリッドアイテムの場合、最小幅の値は、 `width` プロパティの値などの指定された推奨サイズ、または要素にアスペクト比が設定され、高さが確定しているサイズである場合は変換されたサイズ、それ以外は最小コンテンツサイズが使用されます。フレックスアイテムまたはグリッドアイテムが{{glossary("scroll container","スクロールコンテナー")}}である場合、またはグリッドアイテムが複数のフレックスカラムトラックにまたがる場合、自動最小サイズは `0` になります。
+
 - `max-content`
-  - : 内容物が推奨する `min-width` です。
+  - : 内容物の推奨する `min-width` です。
 - `min-content`
   - : 内容物の最小の `min-width` です。
+- `fit-content`
+  - : 利用できる空間を使用しますが、 [`max-content`](/ja/docs/Web/CSS/max-content) を超えないようにします。すなわち、 `min(max-content, max(min-content, stretch))` です。
 - `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
   - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。
+- `stretch`
+
+  - : 要素の[マージンボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)の最小の幅を、[包含ブロック](/ja/docs/Web/CSS/Containing_block#包含ブロックの識別)の幅に制限します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 `100%` と似たような動作をしますが、結果として得られるサイズは [box-sizing](/ja/docs/Web/CSS/box-sizing) で決定されるボックスではなく、マージンボックスに適用されます。
+
+    > [!NOTE]
+    > ブラウザーが `stretch` 値のために使用する別名と実装状況については、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。
 
 ## 公式定義
 
@@ -79,5 +98,10 @@ form {
 
 ## 関連情報
 
-- {{Cssxref("width")}}, {{Cssxref("max-width")}}
-- [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model), {{Cssxref("box-sizing")}}
+- {{Cssxref("max-width")}}
+- {{Cssxref("width")}}
+- {{cssxref("min-inline-size")}}
+- {{cssxref("min-block-size")}}
+- {{cssxref("box-sizing")}}
+- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール