「アルファチャンネル」
～マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典（85）

解説

　チャンネルは、色情報などを保持するグレースケールの画像のことです。RGBの画像の場合は、レッドとグリーンとブルーのチャンネル（グレースケールの画像）に分けることが可能です。そして、元の画像は、レッドとグリーンとブルーのチャンネルを合成した画像と見なすことができます。

　CMYKの画像の場合は、シアン、マゼンタ、イエロー、ブラック（キープレート）のチャンネルに分けることができます。

　アルファチャンネルは、こういった色表現のチャンネルにプラスアルファした補助データのことです。多くの場合、不透明度を表すグレースケールの画像です。アルファチャンネルを利用することで、画像の一部は半透明で、他の一部は不透明、ある部分は完全に透けているといった状態を表現できます。

　アルファチャンネルを含む画像では、背景の上に、背景部分を透過させた状態で、画像を重ね合わせることができます。

　Web用の画像では、PNGがアルファチャンネルをサポートしています。

サンプル

　プログラムではなく、PNGを背景の上に描画することで、アルファチャンネルを体験してみます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>「アルファチャンネル」のサンプル</title>
    </head>
    <body>
        <div style="background-color: red;
        display: inline-block; padding: 16px;">
            <img src="8856_img_char.png">
        </div>
        <div style="background-image: url('8856_img_back.png');
        display: inline-block; padding: 16px;">
            <img src="8856_img_char.png">
        </div>
    </body>
</html>

元画像（8856_img_char.png）

元画像（8856_img_back.png）

表示結果

フィードバックお待ちしております！

　ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookやTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。