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

- conflicting 版は廃止ページからのリダイレクト前のものなので削除 - 2021/06/17 時点の英語版に同期
mdn · Jul 3, 2021 · 4f71387 · 4f71387
1 parent 678b2b2
commit 4f71387
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 125 deletions.
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
@@ -421,7 +421,7 @@
 /ja/docs/CSS/animation-timing-function	/ja/docs/Web/CSS/animation-timing-function
 /ja/docs/CSS/attr	/ja/docs/Web/CSS/attr()
 /ja/docs/CSS/aural	/ja/docs/Web/CSS/@media/aural
-/ja/docs/CSS/auto	/ja/docs/conflicting/Web/CSS/width
+/ja/docs/CSS/auto	/ja/docs/Web/CSS/width
 /ja/docs/CSS/backface-visibility	/ja/docs/Web/CSS/backface-visibility
 /ja/docs/CSS/background-attachment	/ja/docs/Web/CSS/background-attachment
 /ja/docs/CSS/background-clip	/ja/docs/Web/CSS/background-clip
@@ -4415,7 +4415,7 @@
 /ja/docs/Web/CSS/Using_multiple_backgrounds	/ja/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
 /ja/docs/Web/CSS/attr	/ja/docs/Web/CSS/attr()
 /ja/docs/Web/CSS/aural	/ja/docs/Web/CSS/@media/aural
-/ja/docs/Web/CSS/auto	/ja/docs/conflicting/Web/CSS/width
+/ja/docs/Web/CSS/auto	/ja/docs/Web/CSS/width
 /ja/docs/Web/CSS/border-radius/border-radius	/ja/docs/Web/CSS/border-radius
 /ja/docs/Web/CSS/border-top-left-radius_|_-moz-border-radius-topleft	/ja/docs/Web/CSS/border-top-left-radius
 /ja/docs/Web/CSS/box_model	/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
@@ -5705,7 +5705,7 @@
 /ja/docs/title	/ja/docs/Web/HTML/Element/title
 /ja/docs/toSource	/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource
 /ja/docs/toString	/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
-/ja/docs/width	/ja/docs/conflicting/Web/CSS/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc
+/ja/docs/width	/ja/docs/Web/CSS/width
 /ja/docs/window.clearInterval	/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
 /ja/docs/window.screenY	/ja/docs/Web/API/Window/screenY
 /ja/docs/window.scrollMaxY	/ja/docs/Web/API/Window/scrollMaxY

diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
@@ -48917,20 +48917,6 @@
       "sosleepy"
     ]
   },
-  "conflicting/Web/CSS/width": {
-    "modified": "2019-03-24T00:00:43.619Z",
-    "contributors": [
-      "ethertank",
-      "Taken"
-    ]
-  },
-  "conflicting/Web/CSS/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc": {
-    "modified": "2019-03-23T23:31:06.728Z",
-    "contributors": [
-      "wbamberg",
-      "ethertank"
-    ]
-  },
   "conflicting/Web/CSS_eb0c7d23f84df658710ebb6b4bdec8ea": {
     "modified": "2019-03-23T23:44:01.923Z",
     "contributors": [

diff --git a/files/ja/conflicting/web/css/width/index.html b/files/ja/conflicting/web/css/width/index.html
diff --git a/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html b/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html
diff --git a/files/ja/web/css/width/index.html b/files/ja/web/css/width/index.html
@@ -4,13 +4,13 @@
 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 @@
 
 <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 @@ <h2 id="Syntax" name="Syntax">構文</h2>
 /* グローバル値 */
 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 @@ <h3 id="Values" name="Values">値</h3>
  <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,51 +108,51 @@ <h3 id="Pixels_and_ems" name="Pixels_and_ems">ピクセル数と em 単位</h3>
 }
 </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 */
   width: -webkit-max-content; /* Chrome */
   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 @@ <h2 id="Specifications" name="Specifications">仕様書</h2>
   <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 @@ <h2 id="Specifications" name="Specifications">仕様書</h2>
  </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>