Web/CSS/:placeholder-shown を更新 (#1370)

- conflicting 版は前身となる -moz-placeholder の記事であるため削除
- 2021/06/23 時点の英語版に同期

4 files changed, 42 insertions, 183 deletions

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 827582774f..13422b8d17 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -271,7 +271,7 @@
 /ja/docs/CSS/:-moz-locale-dir(ltr)	/ja/docs/Web/CSS/:-moz-locale-dir(ltr)
 /ja/docs/CSS/:-moz-locale-dir(rtl)	/ja/docs/Web/CSS/:-moz-locale-dir(rtl)
 /ja/docs/CSS/:-moz-only-whitespace	/ja/docs/Web/CSS/:-moz-only-whitespace
-/ja/docs/CSS/:-moz-placeholder	/ja/docs/conflicting/Web/CSS/:placeholder-shown
+/ja/docs/CSS/:-moz-placeholder	/ja/docs/Web/CSS/:placeholder-shown
 /ja/docs/CSS/::after	/ja/docs/Web/CSS/::after
 /ja/docs/CSS/::before	/ja/docs/Web/CSS/::before
 /ja/docs/CSS/::first-letter	/ja/docs/Web/CSS/::first-letter
@@ -628,7 +628,7 @@
 /ja/docs/CSS::-moz-last-node	/ja/docs/Web/CSS/:-moz-last-node
 /ja/docs/CSS::-moz-list-bullet	/ja/docs/Web/CSS/:-moz-list-bullet
 /ja/docs/CSS::-moz-only-whitespace	/ja/docs/Web/CSS/:-moz-only-whitespace
-/ja/docs/CSS::-moz-placeholder	/ja/docs/conflicting/Web/CSS/:placeholder-shown
+/ja/docs/CSS::-moz-placeholder	/ja/docs/Web/CSS/:placeholder-shown
 /ja/docs/CSS::default	/ja/docs/Web/CSS/:default
 /ja/docs/CSS:@-moz-document	/ja/docs/Web/CSS/@document
 /ja/docs/CSS:Getting_Started	/ja/docs/Learn/CSS
@@ -4349,7 +4349,7 @@
 /ja/docs/Web/CSS/-ms-high-contrast	/ja/docs/Web/CSS/@media/-ms-high-contrast
 /ja/docs/Web/CSS/-ms-scroll-snap-type	/ja/docs/Web/CSS/scroll-snap-type
 /ja/docs/Web/CSS/:-moz-alt-text	/ja/docs/orphaned/Web/CSS/:-moz-alt-text
-/ja/docs/Web/CSS/:-moz-placeholder	/ja/docs/conflicting/Web/CSS/:placeholder-shown
+/ja/docs/Web/CSS/:-moz-placeholder	/ja/docs/Web/CSS/:placeholder-shown
 /ja/docs/Web/CSS/:-ms-input-placeholder	/ja/docs/Web/CSS/:placeholder-shown
 /ja/docs/Web/CSS/:-webkit-autofill	/ja/docs/Web/CSS/:autofill
 /ja/docs/Web/CSS/::-moz-placeholder	/ja/docs/Web/CSS/::placeholder
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 26a8bb6e7d..0c6767c094 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -48459,15 +48459,6 @@
       "Marsf"
     ]
   },
-  "conflicting/Web/CSS/:placeholder-shown": {
-    "modified": "2019-03-24T00:07:01.599Z",
-    "contributors": [
-      "teoli",
-      "ethertank",
-      "myakura",
-      "Marsf"
-    ]
-  },
   "conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": {
     "modified": "2019-03-23T23:37:28.021Z",
     "contributors": [
diff --git a/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html b/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html
deleted file mode 100644
index f67b584d66..0000000000
--- a/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: ':-moz-placeholder'
-slug: conflicting/Web/CSS/:placeholder-shown
-tags:
-  - CSS
-  - CSS Reference
-  - Non-standard
-translation_of: Web/CSS/:placeholder-shown
-translation_of_original: Web/CSS/:-moz-placeholder
-original_slug: Web/CSS/:-moz-placeholder
----
-<p>{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}</p>
-
-<div class="note"><strong>Note:</strong> The <code>:-moz-placeholder</code> pseudo-class is deprecated in Firefox 19 in favor of the {{ cssxref('::-moz-placeholder') }} pseudo-element.</div>
-
-<div class="note"><strong>Note: </strong>The CSSWG have decided to introduce <code>:placeholder-shown</code>. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name.  {{bug(1069012)}}</div>
-
-<h2 id="Summary" name="Summary">概要</h2>
-
-<p><code>:-moz-placeholder</code> は<a href="/en/HTML/HTML5/Forms_in_HTML5#The_placeholder_attribute" title="en/HTML/HTML5/Forms in HTML5#The placeholder attribute">プレースホルダ</a>を表示するフォーム要素にマッチします。この擬似クラスにより、Web 開発者やテーマデザイナーがプレースホルダの表示 (デフォルトは薄い灰色) をカスタマイズすることができます。</p>
-
-<p>たとえば、フォームフィールドの背景色をプレースホルダの色と似た色に変更した場合、プレースホルダが目立たなくなりうまく機能しません。しかし、この擬似クラスを利用してプレースホルダの文字色を変更すればいいのです。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>この例はプレースホルダの文字色を緑色に変更しています。</p>
-
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Placeholder demo&lt;/title&gt;
-  &lt;style type="text/css"&gt;
-    input:-moz-placeholder {
-      color: green;
-    }
-  &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;input id="test" placeholder="Placeholder text!"&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p><a href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">View this example live</a>.</p>
-
-<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2>
-
-<p>{{ Bug(457801) }}</p>
-
-<h2 id="Notes" name="Notes">注記</h2>
-
-<div class="note"><strong>Note:</strong> このページは Gecko 1.9 {{ geckoRelease("1.9") }} のリリース時に、<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=11011" title="https://bugzilla.mozilla.org/show_bug.cgi?id=11011">全く異なる目的</a> から間違って作られていました。</div>
-
-<h3 id="SeeAlso" name="SeeAlso">参考</h3>
-
-<ul>
- <li><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">Forms in HTML5</a></li>
- <li>{{ HTMLElement("input") }}</li>
- <li>{{ HTMLElement("textarea") }}</li>
-</ul>
diff --git a/files/ja/web/css/_colon_placeholder-shown/index.html b/files/ja/web/css/_colon_placeholder-shown/index.html
index a156a2592a..835fb611af 100644
--- a/files/ja/web/css/_colon_placeholder-shown/index.html
+++ b/files/ja/web/css/_colon_placeholder-shown/index.html
@@ -1,30 +1,35 @@
 ---
 title: ':placeholder-shown'
-slug: 'Web/CSS/:placeholder-shown'
+slug: Web/CSS/:placeholder-shown
 tags:
+  - ':placeholder-shown'
   - CSS
-  - Experimental
+  - Pseudo-class
   - Reference
+  - Selector
   - セレクター
-  - 疑似クラス
-translation_of: 'Web/CSS/:placeholder-shown'
+  - 擬似クラス
+browser-compat: css.selectors.placeholder-shown
+translation_of: Web/CSS/:placeholder-shown
 ---
 <div>{{CSSRef}}</div>
 
-<p><strong><code>:placeholder-shown</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>は、<a href="/ja/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">プレイスホルダー文字列</a>が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。</p>
+<p><strong><code>:placeholder-shown</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、<a href="/ja/docs/Web/HTML/Element/input#attr-placeholder">プレイスホルダー文字列</a>が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。</p>
 
 <pre class="brush: css no-line-numbers">/* プレイスホルダーが有効な要素を選択 */
 :placeholder-shown {
   border: 2px solid silver;
 }</pre>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
 
 {{CSSSyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Example">例</h2>
 
-<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+<h3 id="Basic_example">基本的な例</h3>
+
+<p>この例は、プレイスホルダーが表示されているときに特殊なフォントと境界線を適用します。</p>
 
 <h4 id="HTML">HTML</h4>
 
@@ -32,92 +37,46 @@ translation_of: 'Web/CSS/:placeholder-shown'
 
 <h4 id="CSS">CSS</h4>
 
-<div class="hidden">
-<pre class="brush: css">input:-ms-input-placeholder {
-  border-color: silver;
-}
-
-input:-moz-placeholder {
-  border-color: silver;
-}</pre>
-</div>
-
-<pre class="brush: css; highlight[6]">input {
-  border: 2px solid black;
-  padding: 3px;
+<pre class="brush: css">input {
+  border: 1px solid black;
+  padding: 3px;
 }
 
 input:placeholder-shown {
-  border-color: silver;
+  border-color: teal;
+  color: purple;
+  font-style: italic;
 }</pre>
 
-<h4 id="Result" name="Result">結果</h4>
+<h4 id="Result">結果</h4>
 
-<p>{{EmbedLiveSample("Basic_example", 200, 60)}}</p>
+<p>{{EmbedLiveSample("Basic_example", 200, 80)}}</p>
 
-<h3 id="Overflowing_text" name="Overflowing_text">文字列があふれる場合</h3>
+<h3 id="Overflowing_text">文字列があふれる場合</h3>
 
 <p>スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 {{cssxref("text-overflow")}} プロパティでこの挙動を修正すると便利です。</p>
 
 <h4 id="HTML_2">HTML</h4>
 
-<pre class="brush: html">&lt;input placeholder="宜しければ、この入力欄に何か入力してください！"&gt;</pre>
+<pre class="brush: html">&lt;input id="input1" placeholder="Name, Rank, and Serial Number"&gt;
+&lt;br&gt;&lt;br&gt;
+&lt;input id="input2" placeholder="Name, Rank, and Serial Number"&gt;</pre>
 
 <h4 id="CSS_2">CSS</h4>
 
-<div class="hidden">
-<pre class="brush: css">input:-ms-input-placeholder {
-  text-overflow: ellipsis;
-}
-
-input:-moz-placeholder {
+<pre class="brush: css">#input2:placeholder-shown {
   text-overflow: ellipsis;
 }</pre>
-</div>
 
-<pre class="brush: css">input:placeholder-shown {
-  text-overflow: ellipsis;
-}</pre>
+<h4 id="Result_2">結果</h4>
 
-<h4 id="Result_2" name="Result_2">結果</h4>
+<p>{{EmbedLiveSample("Overflowing_text", 200, 80)}}</p>
 
-<p>{{EmbedLiveSample("Overflowing_text", 200, 60)}}</p>
-
-<h3 id="Colored_text" name="Colored_text">色付きのテキスト</h3>
-
-<h4 id="HTML_3">HTML</h4>
-
-<pre class="brush: html">&lt;input placeholder="Type something here!"&gt;
-</pre>
-
-<h4 id="CSS_3">CSS</h4>
-
-<div class="hidden">
-<pre class="brush: css">input:-ms-input-placeholder {
-  color: red;
-  font-style: italic;
-}
-
-input:-moz-placeholder {
-  color: red;
-  font-style: italic;
-}</pre>
-</div>
-
-<pre class="brush: css">input:placeholder-shown {
-  color: red;
-  font-style: italic;
-}</pre>
-
-<h4 id="Result_3" name="Result_3">結果</h4>
-
-<p>{{EmbedLiveSample("Colored_text", 200, 60)}}</p>
-
-<h3 id="Customized_input_field" name="Customized_input_field">カスタマイズした入力欄</h3>
+<h3 id="Customized_input_field">カスタマイズした入力欄</h3>
 
 <p>以下の例では部署名と ID コード欄をカスタムスタイルで強調します。</p>
 
-<h4 id="HTML_4">HTML</h4>
+<h4 id="HTML_3">HTML</h4>
 
 <pre class="brush: html">&lt;form id="test"&gt;
   &lt;p&gt;
@@ -135,21 +94,7 @@ input:-moz-placeholder {
   &lt;input type="submit"/&gt;
 &lt;/form&gt;</pre>
 
-<h4 id="CSS_4">CSS</h4>
-
-<div class="hidden">
-<pre class="brush: css">input.studentid:-ms-input-placeholder {
-  background-color: yellow;
-  color: red;
-  font-style: italic;
-}
-
-input.studentid:-moz-placeholder {
-  background-color: yellow;
-  color: red;
-  font-style: italic;
-}</pre>
-</div>
+<h4 id="CSS_3">CSS</h4>
 
 <pre class="brush: css; highlight[6]">input {
   background-color: #E8E8E8;
@@ -162,39 +107,22 @@ input.studentid:placeholder-shown {
   font-style: italic;
 }</pre>
 
-<h4 id="Result_4" name="Result_4">結果</h4>
+<h4 id="Result_3">結果</h4>
 
 <p>{{EmbedLiveSample("Customized_input_field", 200, 180)}}</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+<h2 id="Specifications">仕様書</h2>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+{{Specifications}}
 
-<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a 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.selectors.placeholder-shown")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li>{{CSSxRef("::placeholder")}} 疑似要素はプレイスホルダー<em>自身</em>にスタイルを適用します。</li>
+ <li>{{CSSxRef("::placeholder")}} 擬似要素はプレイスホルダー<em>自身</em>にスタイルを適用します。</li>
  <li>関連する HTML 要素: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
- <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
+ <li><a href="/ja/docs/Learn/Forms">HTML フォーム</a></li>
 </ul>