From 2f058cf0373dae40da1fbf8060141b46df205e22 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 13 Jul 2021 02:36:21 +0900 Subject: Web/CSS/:placeholder-shown を更新 (#1370) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - conflicting 版は前身となる -moz-placeholder の記事であるため削除 - 2021/06/23 時点の英語版に同期 --- files/ja/_redirects.txt | 6 +- files/ja/_wikihistory.json | 9 -- .../web/css/_colon_placeholder-shown/index.html | 60 --------- .../ja/web/css/_colon_placeholder-shown/index.html | 150 ++++++--------------- 4 files changed, 42 insertions(+), 183 deletions(-) delete mode 100644 files/ja/conflicting/web/css/_colon_placeholder-shown/index.html (limited to 'files/ja') 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 ---- -

{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}

- -
Note: The :-moz-placeholder pseudo-class is deprecated in Firefox 19 in favor of the {{ cssxref('::-moz-placeholder') }} pseudo-element.
- -
Note: The CSSWG have decided to introduce :placeholder-shown. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name.  {{bug(1069012)}}
- -

概要

- -

:-moz-placeholder はプレースホルダを表示するフォーム要素にマッチします。この擬似クラスにより、Web 開発者やテーマデザイナーがプレースホルダの表示 (デフォルトは薄い灰色) をカスタマイズすることができます。

- -

たとえば、フォームフィールドの背景色をプレースホルダの色と似た色に変更した場合、プレースホルダが目立たなくなりうまく機能しません。しかし、この擬似クラスを利用してプレースホルダの文字色を変更すればいいのです。

- -

例

- -

この例はプレースホルダの文字色を緑色に変更しています。

- -
<!doctype html>
-<html>
-<head>
-  <title>Placeholder demo</title>
-  <style type="text/css">
-    input:-moz-placeholder {
-      color: green;
-    }
-  </style>
-</head>
-<body>
-  <input id="test" placeholder="Placeholder text!">
-</body>
-</html>
-
- -

View this example live.

- -

Bugzilla

- -

{{ Bug(457801) }}

- -

注記

- -
Note: このページは Gecko 1.9 {{ geckoRelease("1.9") }} のリリース時に、全く異なる目的 から間違って作られていました。
- -

参考

- - 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 ---
{{CSSRef}}
-

:placeholder-shown は CSS の疑似クラスは、プレイスホルダー文字列が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。

+

:placeholder-shown は CSS の擬似クラスで、プレイスホルダー文字列が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。

/* プレイスホルダーが有効な要素を選択 */
 :placeholder-shown {
   border: 2px solid silver;
 }
-

構文

+

構文

{{CSSSyntax}} -

例

+

例

-

基本的な例

+

基本的な例

+ +

この例は、プレイスホルダーが表示されているときに特殊なフォントと境界線を適用します。

HTML

@@ -32,92 +37,46 @@ translation_of: 'Web/CSS/:placeholder-shown'

CSS

- - -
input {
-  border: 2px solid black;
-  padding: 3px;
+
input {
+  border: 1px solid black;
+  padding: 3px;
 }
 
 input:placeholder-shown {
-  border-color: silver;
+  border-color: teal;
+  color: purple;
+  font-style: italic;
 }

 
-
結果

+
結果

 
-
{{EmbedLiveSample("Basic_example", 200, 60)}}

+
{{EmbedLiveSample("Basic_example", 200, 80)}}

 
-
文字列があふれる場合

+
文字列があふれる場合

 
 
スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 {{cssxref("text-overflow")}} プロパティでこの挙動を修正すると便利です。

 
 
HTML

 
-
<input placeholder="宜しければ、この入力欄に何か入力してください！">

+
<input id="input1" placeholder="Name, Rank, and Serial Number">
+<br><br>
+<input id="input2" placeholder="Name, Rank, and Serial Number">

 
 
CSS

 
-
 
-
input:placeholder-shown {
-  text-overflow: ellipsis;
-}

+
結果

 
-
結果

+
{{EmbedLiveSample("Overflowing_text", 200, 80)}}

 
-
{{EmbedLiveSample("Overflowing_text", 200, 60)}}

-
-
色付きのテキスト

-
-
HTML

-
-
<input placeholder="Type something here!">
-

-
-
CSS

-
-
-
-
input:placeholder-shown {
-  color: red;
-  font-style: italic;
-}

-
-
結果

-
-
{{EmbedLiveSample("Colored_text", 200, 60)}}

-
-
カスタマイズした入力欄

+
カスタマイズした入力欄

 
 
以下の例では部署名と ID コード欄をカスタムスタイルで強調します。

 
-
HTML

+
HTML

 
 
<form id="test">
   <p>
@@ -135,21 +94,7 @@ input:-moz-placeholder {
   <input type="submit"/>
 </form>

 
-
CSS

-
-
+
CSS

 
 
input {
   background-color: #E8E8E8;
@@ -162,39 +107,22 @@ input.studentid:placeholder-shown {
   font-style: italic;
 }

 
-
結果

+
結果

 
 
{{EmbedLiveSample("Customized_input_field", 200, 180)}}

 
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}{{Spec2("CSS4 Selectors")}}初回定義

+
仕様書

 
-
ブラウザーの対応

+{{Specifications}}
 
-
+
ブラウザーの互換性

 
-
{{Compat("css.selectors.placeholder-shown")}}

+
{{Compat}}

 
-
関連情報

+
関連情報

 
 
-- 
cgit v1.2.3-54-g00ecf