Merge branch 'main' into fix/SubtleCrypto_typo

files/ja/_redirects.txt

@@ -4164,6 +4164,7 @@
 /ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types	/ja/docs/Web/HTTP/MIME_types/Common_types
 /ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types	/ja/docs/Web/HTTP/MIME_types/Common_types
 /ja/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs	/ja/docs/Web/URI/Schemes/resource
+/ja/docs/Web/HTTP/Configuring_servers_for_Ogg_media	/ja/docs/Web/Media/Formats/Configuring_servers_for_Ogg_media
 /ja/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)	/ja/docs/Web/HTTP/Cross-Origin_Resource_Policy
 /ja/docs/Web/HTTP/Feature_Policy	/ja/docs/Web/HTTP/Permissions_Policy
 /ja/docs/Web/HTTP/Gecko_user_agent_string_reference	/ja/docs/Web/HTTP/Headers/User-Agent/Firefox

files/ja/_wikihistory.json

@@ -21490,10 +21490,6 @@
     "modified": "2019-03-23T22:24:48.101Z",
     "contributors": ["mfuji09", "kachick", "SphinxKnight", "yyss"]
   },
-  "Web/HTTP/Configuring_servers_for_Ogg_media": {
-    "modified": "2019-03-18T21:25:34.436Z",
-    "contributors": ["silverskyvicto"]
-  },
   "Web/HTTP/Connection_management_in_HTTP_1.x": {
     "modified": "2020-09-27T09:47:29.485Z",
     "contributors": [
@@ -28807,6 +28803,10 @@
     "modified": "2020-09-03T13:27:24.598Z",
     "contributors": ["mfuji09"]
   },
+  "Web/Media/Formats/Configuring_servers_for_Ogg_media": {
+    "modified": "2019-03-18T21:25:34.436Z",
+    "contributors": ["silverskyvicto"]
+  },
   "Web/Media/Formats/Image_types": {
     "modified": "2020-11-09T23:53:41.374Z",
     "contributors": ["taiyaki32lp64", "mfuji09", "silverskyvicto"]

files/ja/web/css/aspect-ratio/index.md

@@ -101,7 +101,7 @@ div:nth-child(5) {
 }
 ```
 
-{{EmbedLiveSample('固定の幅に対する aspect-ratio の効果の実験', '100%', '300px')}}
+{{EmbedLiveSample('Exploring aspect-ratio effects with fixed width', '100%', '300px')}}
 
 ### 自然なアスペクト比への代替
 
@@ -127,7 +127,7 @@ img {
 
 置換コンテンツではない最初の画像は、縦横比が `3/2` のままですが、コンテンツが読み込まれた後の 2 番目の画像は、画像の自然な縦横比を使用していることに注目してください。
 
-{{EmbedLiveSample('自然なアスペクト比への代替', '100%', '300px')}}
+{{EmbedLiveSample('Fallback to natural aspect ratio', '100%', '300px')}}
 
 ## 仕様書
 

files/ja/web/css/box-sizing/index.md

@@ -1,6 +1,8 @@
 ---
 title: box-sizing
 slug: Web/CSS/box-sizing
+l10n:
+  sourceCommit: 4e508e2f543c0d77c9c04f406ebc8e9db7e965be
 ---
 
 {{CSSRef}}
@@ -31,6 +33,7 @@ box-sizing: content-box;
 box-sizing: inherit;
 box-sizing: initial;
 box-sizing: revert;
+box-sizing: revert-layer;
 box-sizing: unset;
 ```
 

files/ja/web/css/css_box_sizing/understanding_aspect-ratio/index.md

@@ -2,7 +2,7 @@
 title: アスペクト比の理解と設定
 slug: Web/CSS/CSS_box_sizing/Understanding_aspect-ratio
 l10n:
-  sourceCommit: 5d670c42df8ede57e3d6341cb15d8251eb188dc4
+  sourceCommit: 50c8e290f11b061bbf2267e1a3279f28180a5fcb
 ---
 
 {{CSSRef}}
@@ -89,21 +89,29 @@ div + div {
 <!-- temporarily ignore these images. Testing preview -->
 
 ```html hidden live-sample___original
-<img src="flag.jpg?image=good" alt="220 pixel square pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg?image=good"
+  alt="220 pixel square pride flag" />
 ```
 
 {{EmbedLiveSample("original", "100", "230")}}
 
 これは CSS が適用されていない `220px` の正方形の画像で、内在サイズまたは既定のサイズで表示されます。
 
-置換コンテンツが auto でサイズ指定されている場合、または width に値を設定するなどして 1 つの寸法だけにサイズを指定した場合、ブラウザーはメディアの元の縦横比を維持したまま、もう 1 つの寸法（この場合は高さ）のサイズを自動的に変更します。
+置換コンテンツが auto でサイズ指定されている場合、または `width` に値を設定するなどして 1 つの寸法だけにサイズを指定した場合、ブラウザーはメディアの元の縦横比を維持したまま、もう 1 つの寸法（この場合は高さ）のサイズを自動的に変更します。
 
 この例では、{{cssxref("width")}} だけが画像に設定されているので、ユーザーエージェントはその縦横比を保持します。`55px`、`110px`、そして [`width: auto`](/ja/docs/Web/CSS/width) 値による自然なサイズである `220px` で表示されます。
 
 ```html hidden live-sample___image
-<img src="flag.jpg" alt="Pride flag" />
-<img src="flag.jpg" alt="Pride flag" />
-<img src="flag.jpg" alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
 ```
 
 ```css hidden live-sample___image
@@ -127,13 +135,19 @@ img + img + img {
 
 この例では、同じ画像が 3 回繰り返され、{{cssxref("height")}} の値は同じ (`110px`) ですが、{{cssxref("width")}} の値は異なるサイズ (`55px`、`110px`、`220px`) に明示されています。
 
-```html hidden live-sample___imagebad
-<img src="flag.jpg" alt="Pride flag" />
-<img src="flag.jpg" alt="Pride flag" />
-<img src="flag.jpg" alt="Pride flag" />
+```html hidden live-sample___image-bad
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
 ```
 
-```css hidden live-sample___imagebad
+```css hidden live-sample___image-bad
 img {
   width: 55px;
   height: 110px;
@@ -148,14 +162,16 @@ img + img + img {
 }
 ```
 
-{{EmbedLiveSample("imagebad", "100", "120")}}
+{{EmbedLiveSample("image-bad", "100", "120")}}
 
 `height` と `width` の両方を設定することで、画像を意図的に歪ませています。最初の画像はつぶれ、3 番目の画像は引き伸ばされています。
 
 CSS の {{cssxref("aspect-ratio")}} プロパティを使用して、1 つの寸法を設定し（両方でもどちらでもない）、`1` （または `1 / 1`）以外の値を指定することで、これと同じ歪んだ効果を作成することができました。おそらくこのようなことはしたくないでしょうが、可能であることを知っておくのは良いことです。
 
 ```html hidden live-sample___stretch
-<img src="flag.jpg" alt="Pride flag" />
+<img
+  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+  alt="Pride flag" />
 ```
 
 ```css live-sample___stretch
@@ -177,23 +193,31 @@ img {
 
 まず始めに、3 つのアイテムを持つコンテナーを作成し、それぞれに画像を 1 つずつ入れます。
 
-```html live-sample___imagegrid
+```html live-sample___image-grid
 <div class="grid">
   <div>
-    <img src="flag.jpg" alt="Pride flag" />
+    <img
+      src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      alt="Pride flag" />
   </div>
   <div>
-    <img class="cover" src="flag.jpg" alt="Pride flag" />
+    <img
+      class="cover"
+      src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      alt="Pride flag" />
   </div>
   <div>
-    <img class="contain" src="flag.jpg" alt="Pride flag" />
+    <img
+      class="contain"
+      src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      alt="Pride flag" />
   </div>
 </div>
 ```
 
 次に、コンテナーをグリッドに設定し、各アイテムの縦横比を `2.5` (`5/2`) とし、最小幅を `150px` とします。したがって、最小の高さは `60px` となります。しかし、最終的な幅と高さは、例の iframe の幅、つまりビューポートのサイズに基づいて決定されます。
 
-```css live-sample___imagegrid
+```css live-sample___image-grid
 .grid {
   display: grid;
   gap: 20px;
@@ -209,7 +233,7 @@ div div {
 
 次に画像のサイズを決め、最後の 2 つの画像に `object-fit` プロパティを設定します。
 
-```css live-sample___imagegrid
+```css live-sample___image-grid
 img {
   height: 100%;
   width: 100%;
@@ -224,7 +248,7 @@ img {
 }
 ```
 
-{{EmbedLiveSample("imagegrid", "100", "100")}}
+{{EmbedLiveSample("image-grid", "100", "100")}}
 
 最初の画像だけが歪んで（引き伸ばされて）います。`object-fit` の `fill` 値を使っても同じ効果が得られます。`cover` 画像はコンテナーの幅いっぱいに広がり、垂直方向にセンタリングされ、コンテナーに収まるように切り取られます。`contain` 値は、画像をコンテナー内に確実に収め、水平方向の中央に配置し、収まるように縮小します。
 
@@ -487,7 +511,7 @@ iframe.tiktok {
 
 ### 正方形のグリッドセルを作成
 
-正方形のセルのグリッドは、{{cssxref("grid-template-columns", "列トラックサイズ")}}を固定で定義し、各行が列トラックのサイズと確実に一致するようにすることで作成することができます。しかし、コンテナー内に可能な限り多くの列トラックを収めるために `auto-fill` を使用してレスポンシブグリッドを作成する場合、各項目の幅が不確かになります。そのため、正方形のアイテムを作成するための適切な高さを決定することが難しくなります。
+正方形のセルのグリッドは、[列トラックサイズ](/ja/docs/Web/CSS/grid-template-columns)を固定で定義し、各行が列トラックのサイズと確実に一致するようにすることで作成することができます。しかし、コンテナー内に可能な限り多くの列トラックを収めるために `auto-fill` を使用してレスポンシブグリッドを作成する場合、各項目の幅が不確かになります。そのため、正方形のアイテムを作成するための適切な高さを決定することが難しくなります。
 
 アイテムにアスペクト比を設定することで、グリッドアイテムがレイアウトされたときに、各グリッドアイテムが幅と同じ高さになるように保証し、コンテナーの寸法に関係なく正方形のグリッドアイテムを作成します。
 
@@ -538,7 +562,11 @@ div div::after {
   <div></div>
   <div></div>
   <div></div>
-  <div class="item"><img src="flag.jpg" alt="Pride flag" /></div>
+  <div class="item">
+    <img
+      src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+      alt="Pride flag" />
+  </div>
   <div></div>
   <div></div>
   <div></div>

files/ja/web/css/fit-content/index.md

@@ -2,17 +2,19 @@
 title: fit-content
 slug: Web/CSS/fit-content
 l10n:
-  sourceCommit: 1e2b9ed58707ed56026e8a159b6aeb06e96bd104
+  sourceCommit: c0daf1f038fdbdb62d71bfdeaf3a0a083660792c
 ---
 
 {{CSSRef}}
 
-**`fit-content`** は `fit-content(stretch)` として動作します。実際には、ボックスは利用可能な空間を使用しますが、　{{cssxref("max-content")}} 以上にはならないことを意味します。
+**`fit-content`** キーワードは {{cssxref("fit-content_function", "fit-content(stretch)")}} と同等です。実際には、ボックスは利用可能な空間を使用しますが、　{{cssxref("max-content")}} 以上にはならないことを意味します。
 
 {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトされたボックスの大きさとして使用される場合、最大寸法と最小寸法は、コンテンツの寸法を参照します。
 
+{{cssxref("interpolate-size")}} プロパティと {{cssxref("calc-size()")}} 関数を使用して、 `fit-content` との間でアニメーションをすることができます。
+
 > [!NOTE]
-> CSS Sizing の仕様書では、 {{cssxref("fit-content_function", "fit-content()")}} という関数も定義されています。このページではキーワード版について詳しく説明します。
+> CSS ボックスサイズ指定の仕様書では、 {{cssxref("fit-content_function", "fit-content()")}} という関数も定義されています。このページではキーワード版について詳しく説明します。
 
 ## 構文
 
@@ -27,20 +29,19 @@ block-size: fit-content;
 
 #### HTML
 
-```html
+```html-nolint live-sample___using_fit-content_for_box_sizing
 <div class="container">
-  <div class="item">Item</div>
-  <div class="item">Item with more text in it.</div>
+  <div class="item">アイテム</div>
+  <div class="item">もっとテキストの多いアイテム。</div>
   <div class="item">
-    Item with more text in it, hopefully we have added enough text so the text
-    will start to wrap.
+    テキストを多く持つアイテム。できるだけ多くのテキストを追加したので、テキストが折り返し始めることを期待しています。
   </div>
 </div>
 ```
 
 #### CSS
 
-```css
+```css live-sample___using_fit-content_for_box_sizing
 .container {
   border: 2px solid #ccc;
   padding: 10px;
@@ -57,7 +58,7 @@ block-size: fit-content;
 
 #### 結果
 
-{{EmbedLiveSample("fit-content を使用してボックスの大きさを指定", "100%", 200)}}
+{{EmbedLiveSample("Using_fit-content_for_box_sizing", "100%", 200)}}
 
 ## 仕様書
 
@@ -70,3 +71,4 @@ block-size: fit-content;
 ## 関連情報
 
 - 関連する大きさのキーワード: {{cssxref("min-content")}}, {{cssxref("max-content")}}
+- [CSS ボックスサイズ指定](/ja/docs/Web/CSS/CSS_box_sizing)モジュール

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

@@ -2,12 +2,12 @@
 title: <ratio>
 slug: Web/CSS/ratio
 l10n:
-  sourceCommit: 5d19ba908628a2713c4ea9f30422dbd9563e1cf4
+  sourceCommit: 2ef2c905a7322f5a533cf7c96ec5a337fc614359
 ---
 
 {{CSSRef}}
 
-**`<ratio>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、幅と高さの比例関係を記述します。これは、メディアクエリー {{cssxref("@media")}} における `aspect-ratio` メディア特性の値として、コンテナクエリー {{cssxref("@container")}} における `aspect-ratio` サイズ特性の値として、 CSS {{cssxref("aspect-ratio")}} プロパティの値として使用します。
+**`<ratio>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、幅と高さの比例関係を記述します。これは、メディアクエリー {{cssxref("@media")}} における `aspect-ratio` メディア特性の値として、コンテナークエリー {{cssxref("@container")}} における `aspect-ratio` サイズ特性の値として、 CSS {{cssxref("aspect-ratio")}} プロパティの値として使用します。
 
 ## 構文
 
@@ -70,6 +70,7 @@ l10n:
 ## 関連情報
 
 - [`aspect-ratio`](/ja/docs/Web/CSS/@media/aspect-ratio) メディア記述子
+- [アスペクト比の理解](/ja/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio)
 - [CSS コンテナークエリー](/ja/docs/Web/CSS/CSS_containment/Container_queries)ガイド
 - [コンテナーのサイズおよびスタイルクエリーの使用](/ja/docs/Web/CSS/CSS_containment/Container_size_and_style_queries)ガイド
 - [CSS メディアクエリー](/ja/docs/Web/CSS/CSS_media_queries)モジュール

files/ja/web/http/configuring_servers_for_ogg_media/index.md → files/ja/web/media/formats/configuring_servers_for_ogg_media/index.md

@@ -1,6 +1,7 @@
 ---
 title: Ogg メディア用のサーバーの設定
-slug: Web/HTTP/Configuring_servers_for_Ogg_media
+slug: Web/Media/Formats/Configuring_servers_for_Ogg_media
+original_slug: Web/HTTP/Configuring_servers_for_Ogg_media
 ---
 
 {{HTTPSidebar}}