files/ja/web/css/alpha-value/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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>