Web/CSS/width を更新 (#1290)

- conflicting 版は廃止ページからのリダイレクト前のものなので削除
- 2021/06/17 時点の英語版に同期

1 files changed, 32 insertions, 40 deletions

diff --git a/files/ja/web/css/width/index.html b/files/ja/web/css/width/index.html
index b52da296f5..322e08849b 100644
--- a/files/ja/web/css/width/index.html
+++ b/files/ja/web/css/width/index.html
@@ -4,13 +4,13 @@ slug: Web/CSS/width
 tags:
   - CSS
   - CSS Property
-  - CSS プロパティ
+  - Layout
   - Reference
   - dimensions
-  - 'recipe:css-property'
+  - recipe:css-property
   - size
   - width
-  - 寸法
+browser-compat: css.properties.width
 translation_of: Web/CSS/width
 ---
 <p>{{CSSRef}}</p>
@@ -21,11 +21,11 @@ translation_of: Web/CSS/width
 
 <div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
 
-<p>{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは、 {{cssxref("width")}} を上書きします。</p>
+<p>{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは <code>width</code> を上書きします。</p>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
 
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
 width: 300px;
 width: 25em;
 
@@ -41,17 +41,11 @@ width: auto;
 /* グローバル値 */
 width: inherit;
 width: initial;
+width: revert;
 width: unset;
 </pre>
 
-<p><code>width</code> プロパティは以下のいずれかの値で指定します。</p>
-
-<ul>
- <li>キーワード値 <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code> のうちの一つ。</li>
- <li><code><a href="#&lt;length>">&lt;length&gt;</a></code> または <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code>。</li>
-</ul>
-
-<h3 id="Values" name="Values">値</h3>
+<h3 id="Values">値</h3>
 
 <dl>
  <dt>{{cssxref("&lt;length&gt;")}}</dt>
@@ -68,38 +62,38 @@ width: unset;
  <dd>利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち <code>min(max-content, max(min-content, &lt;length-percentage&gt;))</code> です。</dd>
 </dl>
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>
 
 <p>ページを拡大してテキストサイズを大きくしたときに、 <code>width</code> を設定した要素が切り捨てられたり、他のコンテンツが見えなくなったりしないようにしてください。</p>
 
 <ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN WCAG の理解、 ガイドライン 1.4 の説明</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4  | Understanding WCAG 2.0</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN WCAG の理解、 ガイドライン 1.4 の説明</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
 </ul>
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+<h2 id="Formal_definition">公式定義</h2>
 
 <p>{{CSSInfo}}</p>
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+<h2 id="Formal_syntax">形式文法</h2>
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
-<h3 id="Default_width" name="Default_width">既定の幅</h3>
+<h3 id="Default_width">既定の幅</h3>
 
-<pre class="brush:css notranslate">p.goldie {
+<pre class="brush:css">p.goldie {
   background: gold;
 }</pre>
 
-<pre class="brush:html notranslate">&lt;p class="goldie"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+<pre class="brush:html">&lt;p class="goldie"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
 
 <p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p>
 
-<h3 id="Pixels_and_ems" name="Pixels_and_ems">ピクセル数と em 単位</h3>
+<h3 id="Pixels_and_ems">ピクセル数と em 単位</h3>
 
-<pre class="brush: css notranslate">.px_length {
+<pre class="brush: css">.px_length {
   width: 200px;
   background-color: red;
   color: white;
@@ -114,26 +108,26 @@ width: unset;
 }
 </pre>
 
-<pre class="brush: html notranslate">&lt;div class="px_length"&gt;Width measured in px&lt;/div&gt;
+<pre class="brush: html">&lt;div class="px_length"&gt;Width measured in px&lt;/div&gt;
 &lt;div class="em_length"&gt;Width measured in em&lt;/div&gt;</pre>
 
 <p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p>
 
-<h3 id="Percentage" name="Percentage">パーセント値</h3>
+<h3 id="Percentage">パーセント値</h3>
 
-<pre class="brush: css notranslate">.percent {
+<pre class="brush: css">.percent {
   width: 20%;
   background-color: silver;
   border: 1px solid red;
 }</pre>
 
-<pre class="brush: html notranslate">&lt;div class="percent"&gt;Width in percentage&lt;/div&gt;</pre>
+<pre class="brush: html">&lt;div class="percent"&gt;Width in percentage&lt;/div&gt;</pre>
 
 <p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p>
 
 <h3 id="max-content">max-content</h3>
 
-<pre class="brush:css; notranslate">p.maxgreen {
+<pre class="brush:css;">p.maxgreen {
   background: lightgreen;
   width: intrinsic;           /* Safari/WebKit uses a non-standard name */
   width: -moz-max-content;    /* Firefox/Gecko */
@@ -141,24 +135,24 @@ width: unset;
   width: max-content;
 }</pre>
 
-<pre class="brush:html notranslate">&lt;p class="maxgreen"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+<pre class="brush:html">&lt;p class="maxgreen"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
 
 <p>{{EmbedLiveSample('max-content', '500px', '64px')}}</p>
 
 <h3 id="min-content">min-content</h3>
 
-<pre class="brush:css notranslate">p.minblue {
+<pre class="brush:css">p.minblue {
   background: lightblue;
   width: -moz-min-content;    /* Firefox */
   width: -webkit-min-content; /* Chrome */
   width: min-content;
 }</pre>
 
-<pre class="brush:html notranslate">&lt;p class="minblue"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+<pre class="brush:html">&lt;p class="minblue"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
 
 <p>{{EmbedLiveSample('min-content', '500px', '155px')}}</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h2 id="Specifications">仕様書</h2>
 
 <table class="standard-table">
  <thead>
@@ -177,7 +171,7 @@ width: unset;
   <tr>
    <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
    <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code><code>fit-content</code> を追加</code></td>
+   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> を追加</td>
   </tr>
   <tr>
    <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
@@ -192,13 +186,11 @@ width: unset;
  </tbody>
 </table>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("css.properties.width")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
  <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">ボックスモデル</a></li>