mdn · mfuji09 · Jan 18, 2024 · Jan 13, 2024 · Jan 13, 2024 · Jan 13, 2024
@@ -1,6 +1,8 @@
 ---
 title: text-combine-upright
 slug: Web/CSS/text-combine-upright
+l10n:
+  sourceCommit: 997a0ec66e1514b7269076195b2419db334e876e
 ---
 
 {{CSSRef}}
@@ -9,6 +11,10 @@ slug: Web/CSS/text-combine-upright
 
 これは、日本語の縦中横、中国語の <i lang="zh-CN">直書橫向</i> として知られる効果をもたらすために使用されます。
 
+{{EmbedInteractiveExample("pages/css/text-combine-upright.html")}}
+
+## 構文
+
 ```css
 /* キーワード値 */
 text-combine-upright: none;
@@ -22,13 +28,10 @@ text-combine-upright: digits 4; /* 4 桁までの数字を垂直テキスト内
 text-combine-upright: inherit;
 text-combine-upright: initial;
 text-combine-upright: revert;
+text-combine-upright: revert-layer;
 text-combine-upright: unset;
 ```
 
-{{EmbedInteractiveExample("pages/css/text-combine-upright.html")}}
-
-## 構文
-
 ### 値
 
 - `none`
@@ -48,31 +51,7 @@ text-combine-upright: unset;
 
 ## 例
 
-### digits
-
-digits 値は、数字の桁を組み合わせる際に all の値よりもマークアップが少なくてすみますが、対応しているブラウザーはあまり多くありません。
-
-#### HTML
-
-```html
-<p lang="ja" class="exampleText">平成20年4月16日に</p>
-```
-
-#### CSS
-
-```css
-.exampleText {
-  writing-mode: vertical-lr;
-  text-combine-upright: digits 2;
-  font: 36px serif;
-}
-```
-
-#### 結果
-
-{{EmbedLiveSample("Digits", 100, 350, "tate-chu-yoko.png")}}
-
-### all
+### 横書きテキストでの 'all' の使用
 
 all の値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザーが対応しています。
 
@@ -101,7 +80,7 @@ html {
 
 #### 結果
 
-{{EmbedLiveSample("All", 250, 300, "text-combine-upright-all.png")}}
+{{EmbedLiveSample('横書きテキストでの "all" の使用', 250, 200)}}
 
 ## 仕様書
 

@@ -1,6 +1,8 @@
 ---
 title: text-transform
 slug: Web/CSS/text-transform
+l10n:
+  sourceCommit: abf155210d826c2584d23433eb2eac45a6669d23
 ---
 
 {{CSSRef}}
@@ -20,7 +22,7 @@ slug: Web/CSS/text-transform
 
 言語は HTML の [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性や XML の [`xml:lang`](/ja/docs/Web/SVG/Attribute/xml:lang) 属性で定義します。
 
-> **メモ:** これらの特定のケースはブラウザーにより異なりますので、[ブラウザーの互換性一覧表](#browser_compatibility)を確認してください。
+> **メモ:** これらの特定のケースはブラウザーにより異なりますので、[ブラウザーの互換性](#ブラウザーの互換性)を確認してください。
 
 ## 構文
 
@@ -37,6 +39,7 @@ text-transform: full-size-kana;
 text-transform: inherit;
 text-transform: initial;
 text-transform: revert;
+text-transform: revert-layer;
 text-transform: unset;
 ```
 
@@ -104,9 +107,9 @@ strong {
 
 文字を変換しない例です。
 
-{{ EmbedLiveSample('none', '100%', '100px') }}
+{{ EmbedLiveSample('Example using "none"', '100%', '100px') }}
 
-<h3 id="capitalize_General">capitalize (一般的)</h3>
+### capitalize (一般的)
 
 ```html
 <p>
@@ -134,9 +137,9 @@ strong {
 
 頭文字を大文字にする例です。
 
-{{ EmbedLiveSample('capitalize_General', '100%', '100px') }}
+{{ EmbedLiveSample('Example using "capitalize" (general)', '100%', '100px') }}
 
-<h3 id="capitalize_Punctuation">capitalize (句読点)</h3>
+### capitalize (句読点)
 
 ```html
 <p>
@@ -168,9 +171,9 @@ strong {
 
 単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。
 
-{{ EmbedLiveSample('capitalize_Punctuation', '100%', '100px') }}
+{{ EmbedLiveSample('Example using "capitalize" (punctuation)', '100%', '100px') }}
 
-<h3 id="capitalize_Symbols">capitalize (記号)</h3>
+### capitalize (記号)
 
 ```html
 <p>
@@ -194,9 +197,9 @@ strong {
 
 頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。
 
-{{ EmbedLiveSample('capitalize_Symbols', '100%', '100px') }}
+{{ EmbedLiveSample('Example using "capitalize" (symbols)', '100%', '100px') }}
 
-<h3 id="capitalize_Dutch_ij_digraph">capitalize (オランダ語の二重音字 ij)</h3>
+### capitalize (オランダ語の二重音字 ij)
 
 ```html
 <p>
@@ -224,9 +227,9 @@ strong {
 
 オランダ語の二重音字 _ij_ を 1 文字として扱わなければならないことを示す例です。
 
-{{ EmbedLiveSample('capitalize_Dutch_ij_digraph', '100%', '100px') }}
+{{ EmbedLiveSample('Example using "capitalize" (Dutch ij digraph)', '100%', '100px') }}
 
-<h3 id="uppercase_General">uppercase (一般的)</h3>
+### uppercase (一般的)
 
 ```html
 <p>
@@ -254,9 +257,9 @@ strong {
 
 テキストを大文字に変換する例です。
 
-{{ EmbedLiveSample('uppercase_General', '100%', '100px') }}
+{{ EmbedLiveSample('Example using "uppercase" (general)', '100%', '100px') }}
 
-<h3 id="uppercase_Greek_Vowels">uppercase (ギリシャ語の母音字)</h3>
+### uppercase (ギリシャ語の母音字)
 
 ```html
 <p>
@@ -282,9 +285,9 @@ strong {
 
 離接的接続の _eta_ を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。
 
-{{ EmbedLiveSample('uppercase_Greek_Vowels', '100%', '100px') }}
+{{ EmbedLiveSample('Example using "uppercase" (Greek vowels)', '100%', '100px') }}
 
-<h3 id="lowercase_General">lowercase (一般的)</h3>
+### lowercase (一般的)
 
 ```html
 <p>
@@ -312,9 +315,9 @@ strong {
 
 テキストを小文字に変換する例です。
 
-{{ EmbedLiveSample('lowercase_General', '100%', '100px') }}
+{{ EmbedLiveSample('Example using "lowercase" (general)', '100%', '100px') }}
 
-<h3 id="lowercase_Greek_Σ">lowercase (ギリシャ文字 Σ)</h3>
+### lowercase (ギリシャ文字 Σ)
 
 ```html
 <p>
@@ -342,9 +345,9 @@ strong {
 
 ギリシャ文字のシグマ (`Σ`) が、状況に応じて一般的な小文字のシグマ (`σ`) または単語の末尾での表記 (`ς`) に変換される例です。
 
-{{ EmbedLiveSample('lowercase_Greek_Σ', '100%', '100px') }}
+{{ EmbedLiveSample('Example using "lowercase" (Greek Σ)', '100%', '100px') }}
 
-<h3 id="lowercase_Lithuanian">lowercase (リヒテンシュタイン語)</h3>
+### lowercase (リヒテンシュタイン語)
 
 ```html
 <p>
@@ -368,9 +371,9 @@ strong {
 
 これはリヒテンシュタインの文字 `Ĩ` および `J́` が小文字に変換されるとドットを保持する様子を示します。
 
-{{ EmbedLiveSample('lowercase_Lithuanian', '100%', '100px') }}
+{{ EmbedLiveSample('Example using "lowercase" (Lithuanian)', '100%', '100px') }}
 
-<h3 id="full-width_General">full-width (一般)</h3>
+### full-width (一般)
 
 ```html
 <p>
@@ -401,9 +404,9 @@ strong {
 
 一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。
 
-{{ EmbedLiveSample('full-width_General', '100%', '175px') }}
+{{ EmbedLiveSample('Example using "full-width" (general)', '100%', '175px') }}
 
-<h3 id="full-width_Japanese_half-width_katakana">full-width (日本語の半角カタカナ)</h3>
+### full-width (日本語の半角カタカナ)
 
 ```html
 <p>
@@ -428,9 +431,9 @@ strong {
 
 日本語の半角カタカナは、8 ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の 2 つのコードポイントで表現されます。 `full-width` は、これらの文字を全角に変換する際に、1 つのコードポイントにまとめます。
 
-{{ EmbedLiveSample('full-width_Japanese_half-width_katakana', '100%', '175px') }}
+{{ EmbedLiveSample('Example using "full-width" (Japanese half-width katakana)', '100%', '175px') }}
 
-<h3 id="full-size-kana">full-size-kana</h3>
+### full-size-kana
 
 ```html
 <p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
@@ -444,7 +447,7 @@ p:nth-of-type(2) {
 }
 ```
 
-{{ EmbedLiveSample('full-size-kana', '100%', '175px') }}
+{{ EmbedLiveSample('Example using "full-size-kana"', '100%', '175px') }}
 
 ## 仕様書
 

@@ -1,6 +1,8 @@
 ---
 title: width
 slug: Web/CSS/width
+l10n:
+  sourceCommit: 925b2bd8beeae6ce8237863637bcd28ccbb8d47f
 ---
 
 {{CSSRef}}
@@ -9,7 +11,10 @@ slug: Web/CSS/width
 
 {{EmbedInteractiveExample("pages/css/width.html")}}
 
-{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは `width` を上書きします。
+`width` に指定された値は、その値が {{cssxref("min-width")}} および {{cssxref("max-width")}} で定義された値内にある限り、コンテンツ領域に適用されます。
+
+- `width` の値が `min-width` の値より小さい場合、`min-width` は `width` をオーバーライドします。
+- `width` の値が `max-width` の値より大きい場合、`max-width` は `width` をオーバーライドします。
 
 ## 構文
 
@@ -24,13 +29,15 @@ width: 75%;
 /* キーワード値 */
 width: max-content;
 width: min-content;
+width: fit-content;
 width: fit-content(20em);
 width: auto;
 
 /* グローバル値 */
 width: inherit;
 width: initial;
 width: revert;
+width: revert-layer;
 width: unset;
 ```
 
@@ -39,14 +46,16 @@ width: unset;
 - {{cssxref("&lt;length&gt;")}}
   - : 絶対的な値で幅を定義します。
 - {{cssxref("&lt;percentage&gt;")}}
-  - : 親となる包含ブロックの幅に対するパーセント値で定義します。
+  - : 親となる[包含ブロック](/ja/docs/Web/CSS/Containing_block)の幅に対するパーセント値で定義します。
 - `auto`
   - : 指定された要素の幅をブラウザーが計算して決めます。
 - `max-content`
   - : 望ましい固有の幅です。
 - `min-content`
   - : 最小の固有の幅です。
-- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
+- `fit-content`
+  - : 利用可能なスペースを使用しますが、[max-content](/ja/docs/Web/CSS/max-content)、つまり `min(max-content, max(min-content, stretch))` を超えません。
+- `fit-content({{cssxref("&lt;length-percentage&gt;")}})` {{Experimental_Inline}}
   - : 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, <length-percentage>))` です。
 
 ## アクセシビリティの考慮
@@ -66,7 +75,7 @@ width: unset;
 
 ## 例
 
-<h3 id="Default_width">既定の幅</h3>
+### 既定の幅
 
 ```css
 p.goldie {
@@ -80,7 +89,7 @@ p.goldie {
 
 {{EmbedLiveSample('Default_width', '500px', '64px')}}
 
-<h3 id="Pixels_and_ems">ピクセル数と em 単位</h3>
+### ピクセル数と em 単位
 
 ```css
 .px_length {
@@ -103,9 +112,9 @@ p.goldie {
 <div class="em_length">Width measured in em</div>
 ```
 
-{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}
+{{EmbedLiveSample('Example using pixels and ems', '500px', '64px')}}
 
-<h3 id="Percentage">パーセント値</h3>
+### Percentage の例
 
 ```css
 .percent {
@@ -119,9 +128,9 @@ p.goldie {
 <div class="percent">Width in percentage</div>
 ```
 
-{{EmbedLiveSample('Percentage', '500px', '64px')}}
+{{EmbedLiveSample('Example using percentage', '500px', '64px')}}
 
-### max-content
+### max-content の例
 
 ```css
 p.maxgreen {
@@ -137,9 +146,9 @@ p.maxgreen {
 <p class="maxgreen">The Mozilla community produces a lot of great software.</p>
 ```
 
-{{EmbedLiveSample('max-content', '500px', '64px')}}
+{{EmbedLiveSample('Example using "max-content"', '500px', '64px')}}
 
-### min-content
+### min-content の例
 
 ```css
 p.minblue {
@@ -154,7 +163,7 @@ p.minblue {
 <p class="minblue">The Mozilla community produces a lot of great software.</p>
 ```
 
-{{EmbedLiveSample('min-content', '500px', '155px')}}
+{{EmbedLiveSample('Example using "min-content"', '500px', '155px')}}
 
 ## 仕様書