aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css/alpha-value
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/css/alpha-value
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/ja/web/css/alpha-value')
-rw-r--r--files/ja/web/css/alpha-value/index.html64
1 files changed, 64 insertions, 0 deletions
diff --git a/files/ja/web/css/alpha-value/index.html b/files/ja/web/css/alpha-value/index.html
new file mode 100644
index 0000000000..43f07fb8d7
--- /dev/null
+++ b/files/ja/web/css/alpha-value/index.html
@@ -0,0 +1,64 @@
+---
+title: <alpha-value>
+slug: Web/CSS/alpha-value
+tags:
+ - Alpha-value
+ - CSS
+ - CSS Data Type
+ - CSS データ型
+ - Data Type
+ - Draft
+ - Example
+ - アルファ値
+ - データ型
+translation_of: Web/CSS/alpha-value
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;alpha-value&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>であり、 {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} によって色の<strong>{{Glossary("alpha", "アルファチャネル")}}</strong>または<strong>透過性</strong>を表します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>数値で指定された場合、利用可能な範囲は '0' (完全透過) から '1' (完全不透過) までの小数値です。 0 から 1 の範囲を超える数も有効ですが、 0 から 1 の範囲に<a href="https://en.wikipedia.org/wiki/Clamping_(graphics)">クランプ</a>されます。</p>
+
+<p>パーセント値で指定された場合、 '0%' は完全に透明、 '100%' は完全に不透明に対応します。</p>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p>アニメーションの際、 CSS の <code>&lt;alpha-value&gt;</code> データ型の値は実数の浮動小数点値として補間されます。補間の速度はアニメーションと関連づけられた<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>によって決められます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>&lt;alpha-value&gt;</code> 値を使用する CSS 機能には、 <a href="/ja/docs/Web/CSS/color_value#RGB_colors">rgba() や hsla() などの色関数</a>や、シェイプを抽出する目的で画像の一部とみなされるピクセルを決定する {{cssxref("shape-image-threshold")}} などがあります。</p>
+
+<pre class="brush: css no-line-numbers language-css notranslate">/* &lt;rgba()&gt; */
+color: rgba(34, 12, 64, 0.6);
+color: rgba(34.0 12 64 / 60%);
+
+/* shape-image-threshold */
+shape-image-threshold: 70%;
+shape-image-threshold: 0.7;</pre>
+
+<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 Colors', '#type-def-alpha-value', '&lt;alpha-value&gt;')}}</td>
+ <td>{{Spec2('CSS4 Colors')}}</td>
+ <td>目立った変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Colors', '#alphavaluedt', '&lt;alpha-value&gt;')}}</td>
+ <td>{{Spec2('CSS3 Colors')}}</td>
+ <td><code>&lt;alpha-value&gt;</code> を <code>rgba()</code> および <code>hsla()</code> 関数表記のために導入した。</td>
+ </tr>
+ </tbody>
+</table>