From db221b9940f0e209fae9e7724053cf404d01bfc3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 02:39:58 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_doublecolon_-webkit-progress-value/index.md | 81 ++++++++++++---------- 1 file changed, 44 insertions(+), 37 deletions(-) (limited to 'files/ja/web/css/_doublecolon_-webkit-progress-value') diff --git a/files/ja/web/css/_doublecolon_-webkit-progress-value/index.md b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.md index 01545f5204..e8db641a77 100644 --- a/files/ja/web/css/_doublecolon_-webkit-progress-value/index.md +++ b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.md @@ -1,66 +1,73 @@ --- title: '::-webkit-progress-value' -slug: 'Web/CSS/::-webkit-progress-value' +slug: Web/CSS/::-webkit-progress-value tags: - CSS - - Reference - - Selector - - 疑似要素 - - 非標準 -translation_of: 'Web/CSS/::-webkit-progress-value' + - 標準外 + - 擬似要素 + - リファレンス + - セレクター +browser-compat: css.selectors.-webkit-progress-value +translation_of: Web/CSS/::-webkit-progress-value --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

::-webkit-progress-value CSS 疑似要素 は、 {{HTMLElement("progress")}} 要素のバーの塗りつぶされた部分を表します。これは、 {{cssxref("::-webkit-progress-bar")}} 疑似要素の子要素です。

+**`::-webkit-progress-value`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、 {{HTMLElement("progress")}} 要素のバーの塗りつぶされた部分を表します。これは、 {{cssxref("::-webkit-progress-bar")}} 擬似要素の子要素です。 -
-

Note: ::-webkit-progress-value を有効にするには {{cssxref("-webkit-appearance")}} を <progress> 要素で none に設定する必要があります。

-
+> **Note:** `::-webkit-progress-value` を有効にするには {{cssxref("-webkit-appearance")}} を `` 要素で `none` に設定する必要があります。 -

仕様

+## 構文 -

仕様の一部ではありません。これは、 WebKit/Blink に固有の独自疑似要素です。

+```css +::-webkit-progress-value +``` -

+## 例 -

HTML

+この例は Blink または WebKit ベースのブラウザーでのみ動作します。 -
<progress value="10" max="50">
-
+### HTML -

CSS

+```html + +``` -
progress {
+### CSS
+
+```css
+progress {
   -webkit-appearance: none;
 }
 
 ::-webkit-progress-value {
   background-color: orange;
-}
+} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 50)}} + +### 結果のスクリーンショット -

Result

+上記のスタイルを使用したプログレスバーは次のようになります: -

{{EmbedLiveSample("Example", 200, 50)}}

+![](progress-value.png) -

上記のスタイルを使用したプログレスバーは次のようになります:

+## 仕様書 -

+どの標準にも含まれていません。 -

ブラウザーの実装状況

+## ブラウザーの互換性 +{{Compat}} +## 関連情報 -

{{Compat("css.selectors.-webkit-progress-value")}}

+- WebKit/Blink が {{HTMLElement("progress")}} 要素のその他の部分を整形するために使用する擬似要素: -

関連項目

+ - {{ cssxref("::-webkit-progress-bar") }} + - {{ cssxref("::-webkit-progress-inner-element") }} -
    -
  • WebKit/Blink が {{HTMLElement("progress")}} 要素のその他の部分をスタイルするために使用する疑似要素: -
      -
    • {{ cssxref("::-webkit-progress-bar") }}
    • -
    • {{ cssxref("::-webkit-progress-inner-element") }}
    • -
    -
  • -
  • {{ cssxref("::-moz-progress-bar") }}
  • -
  • {{ cssxref("::-ms-fill") }}
  • -
+- {{ cssxref("::-moz-progress-bar") }} +- {{ cssxref("::-ms-fill") }} -- cgit v1.2.3-54-g00ecf