From 8a86c9af31fc7de44c60c25317e413014bdeceb0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 00:09:49 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_placeholder-shown/index.md | 134 +++++++++++---------- 1 file changed, 72 insertions(+), 62 deletions(-) diff --git a/files/ja/web/css/_colon_placeholder-shown/index.md b/files/ja/web/css/_colon_placeholder-shown/index.md index 835fb611af..dffb80bfbc 100644 --- a/files/ja/web/css/_colon_placeholder-shown/index.md +++ b/files/ja/web/css/_colon_placeholder-shown/index.md @@ -4,40 +4,43 @@ slug: Web/CSS/:placeholder-shown tags: - ':placeholder-shown' - CSS - - Pseudo-class - - Reference - - Selector - - セレクター - 擬似クラス + - リファレンス + - セレクター browser-compat: css.selectors.placeholder-shown translation_of: Web/CSS/:placeholder-shown --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:placeholder-shown`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、[プレイスホルダー文字列](/ja/docs/Web/HTML/Element/input#attr-placeholder)が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。 -
/* プレイスホルダーが有効な要素を選択 */
+```css
+/* プレイスホルダーが有効な要素を選択 */
 :placeholder-shown {
   border: 2px solid silver;
-}
+} +``` -

構文

+## 構文 {{CSSSyntax}} -

例

+## 例 -

基本的な例

+### 基本的な例 -

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

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

HTML

+#### HTML -
<input placeholder="何か入力してください！">
+```html + +``` -

CSS

+#### CSS -
input {
+```css
+input {
   border: 1px solid black;
   padding: 3px;
 }
@@ -46,57 +49,65 @@ input:placeholder-shown {
   border-color: teal;
   color: purple;
   font-style: italic;
-}
+} +``` -

結果

+#### 結果 -

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

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

文字列があふれる場合

+### 文字列があふれる場合 -

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

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

HTML

+#### HTML -
<input id="input1" placeholder="Name, Rank, and Serial Number">
-<br><br>
-<input id="input2" placeholder="Name, Rank, and Serial Number">
+```html + +

+ +``` -

CSS

+#### CSS -
#input2:placeholder-shown {
+```css
+#input2:placeholder-shown {
   text-overflow: ellipsis;
-}
+} +``` -

結果

+#### 結果 -

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

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

カスタマイズした入力欄

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

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

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

HTML

+#### HTML -
<form id="test">
-  <p>
-    <label for="name">Enter Student Name:</label>
-    <input id="name" placeholder="Student Name"/>
-  </p>
-  <p>
-    <label for="branch">Enter Student Branch:</label>
-    <input id="branch" placeholder="Student Branch"/>
-  </p>
-  <p>
-    <label for="sid">Enter Student ID:</label>
-    <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
-  </p>
-  <input type="submit"/>
-</form>
+```html +
+ 

+    +    + 

+ 

+    +    + 

+ 

+    +    + 

+  +
+``` -

CSS

+#### CSS -
input {
+```css
+input {
   background-color: #E8E8E8;
   color: black;
 }
@@ -105,24 +116,23 @@ input.studentid:placeholder-shown {
   background-color: yellow;
   color: red;
   font-style: italic;
-}
+} +``` -

結果

+#### 結果 -

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

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

仕様書

+## 仕様書 {{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat}}

+{{Compat}} -

関連情報

+## 関連情報 - +- {{CSSxRef("::placeholder")}} 擬似要素はプレイスホルダー*自身*にスタイルを適用します。 +- 関連する HTML 要素: {{HTMLElement("input")}}, {{HTMLElement("textarea")}} +- [HTML フォーム](/ja/docs/Learn/Forms) -- cgit v1.2.3-54-g00ecf