blob: 6d2f99e063138d68e40fc010bbaef057202cda78 (
plain)
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
|
---
title: Alpha (アルファチャンネル)
slug: Glossary/Alpha
tags:
- Alpha
- Alpha Channel
- Drawing
- Glossary
- Graphics
- Translucecncy
- Translucent
- Transparency
- Transparent
- WebGL
- WebXR
- channel
- color
- pixel
translation_of: Glossary/Alpha
---
<p>コンピューター上では、色を数値の組であらわします。各数値は色のいずれかの構成要素の強さ、主に輝度を表します。それぞれの構成要素を<strong>チャンネル</strong>と呼びます。画像ファイルでは、ある色の色チャンネルによって、この色がどれくらいの強さの赤色・緑色・青色の光から構成されているかを表すのが一般的です。後ろ側が透けて見えるような色を表すために、4番目に追加されるのが<strong>アルファチャンネル</strong>です。アルファチャンネルは、ある色が後ろ側にある色をどの程度覆い隠すかを表します。</p>
<p>具体例をみてみましょう。<code>#8921F2</code> (<code>rgb(137, 33, 242)</code> または <code>hsl(270, 89%, 54)</code> とも記述します) は紫色を表します。下の図では 2 個のボックスがテキストを含む段落の手前に描画されています。左上にあるボックスでは上で示した紫色を背景色に指定しています。右下のボックスは、<em>同じ</em> 背景色ですがアルファチャンネルの値を 0.5 に指定しています。これは、50% の不透明度とも表せます。</p>
<p style="text-align: center;"><img alt="色をあらわすアルファチャンネルの効果を示す画像" src="https://mdn.mozillademos.org/files/17019/alpha-channel-example.png" style="height: 219px; width: 420px;"></p>
<p>このように、ボックスの背景色にアルファチャンネルを明示的に指定しなかった場合、後ろ側のテキストは完全に覆い隠されます。一方、アルファチャンネルを指定した場合、後ろ側のコンテンツが透けて見えます。</p>
<h2 id="Learn_more" name="Learn_more">関連項目</h2>
<h3 id="General_knowledge" name="General_knowledge">一般知識</h3>
<ul>
<li>Wikipedia 上の記事「{{interwiki("wikipedia", "アルファチャンネル")}}」</li>
<li>Wikipedia 上の記事「{{interwiki("wikipedia", "色空間#RGBA")}}」</li>
<li>Wikipedia 上の記事「{{interwiki("wikipedia", "en:Channel (digital image)")}}」</li>
</ul>
<h3 id="Technical_reference" name="Technical_reference">技術リファレンス</h3>
<ul>
<li><a href="/ja/docs/Web/CSS/CSS_Color">CSS color</a></li>
</ul>
|
