6日でできる 新HTML&CSS入門｜アルファ値とアルファチャンネル

6日でできる 新HTML&CSS入門｜アルファ値とアルファチャンネル

透明は、感覚ではなく数値で表せる。アルファ値とアルファチャンネルを理解して、画像やUIの重なりを読み解こう。

Webページやアプリの画面では、画像やパネル、アイコン、ボタンなどが重なって見えることがあります。たとえば、背景写真の上に白い半透明のパネルを置いたり、透過PNGのロゴを背景色の上に重ねたり、影をほんの少しだけ見せたりする表現です。

このような「透けて見える」表現を支えているのが、アルファ値とアルファチャンネルです。

RGBは、赤、緑、青の強さを表し、色そのものを決める情報です。一方、アルファ値は、その色や画像をどれくらい見せるかを表します。完全に見せるのか、半分だけ見せるのか、それとも完全に透明にするのかを数値で指定します。

アルファチャンネルは、その透明度の情報を画像データの中に保存しておく場所です。RGBが色の情報を持つのに対して、アルファチャンネルは透明度の情報を持ちます。

画像やUIを重ねて表示するとき、前にある色と後ろにある色は、アルファ値に応じて合成されます。たとえば、前面の白いパネルを40パーセントだけ見せると、背景写真が少し透けて見えます。このような処理を理解すると、画像形式やWebデザインの見え方がより分かりやすくなります。

この記事では、アルファ値の基本、アルファチャンネルの役割、RGBとRGBAの違い、画像形式ごとの透明度対応、透過PNGの仕組み、そしてCSSで扱う透明表現の考え方まで、順番に解説していきます。

なお、ここまでの記事ではCSSをまだ詳しく扱っていないため、サンプルHTMLにはCSSを含めません。CSSによるrgba、opacity、影、ガラス風パネル、ぼかし背景などの実装は、CSSに関する記事以降で解説します。

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。

background-photo.png	panel-alpha.png	logo-alpha.png

アルファ値は透明度を表す数値

アルファ値は、透明度を表すための数値です。英語ではAlpha Valueと呼ばれます。

色を表すRGBが「何色か」を決める情報だとすると、アルファ値は「どれくらい見えるか」を決める情報です。

アルファ値が0に近いほど透明になり、背景が見えやすくなります。反対に、アルファ値が1に近いほど不透明になり、前面の色や画像がはっきり見えます。

Webや画像編集の世界では、アルファ値を0から1の小数で表すこともあれば、0から255の整数で表すこともあります。

たとえば、0.5は50パーセント程度の不透明度を表します。8bitの整数で考えると、およそ128です。16進数では80に近い値になります。

図1：アルファ値で透明度が変わる仕組み

この図から分かること

この図から、アルファ値が色や画像の見え方を調整する数値であることが分かります。

アルファ値が1の場合、前面の色は完全に見えます。背景は隠れるため、前面の色だけがはっきり表示されます。

アルファ値が0.5の場合、前面の色と背景が混ざって見えます。これが半透明の状態です。

アルファ値が0の場合、前面の色は見えなくなり、背景だけが表示されます。

つまり、RGBが色の種類を決める情報なら、アルファ値はその色をどれくらい見せるかを決める情報です。

アルファチャンネルは透明度を保存する場所

アルファチャンネルは、画像データの中にある透明度専用の情報です。

通常のRGB画像では、1つのピクセルに赤、緑、青の情報があります。これにアルファ情報が加わると、RGBAになります。

RGBだけの場合、ピクセルは色の情報を持っていますが、透明度の情報は持っていません。つまり、そのピクセルがどれくらい透けるかを表せません。

RGBAでは、赤、緑、青に加えてアルファ値を持つため、ピクセルごとに透明度を指定できます。

たとえば、透過PNGのロゴでは、ロゴの形の部分は不透明、背景部分は透明、輪郭部分は少し半透明というように、ピクセルごとに細かく透明度を持つことができます。

このため、背景の上にロゴを置いても、四角い背景が出ず、ロゴの形だけが自然に表示されます。

RGBとRGBAの違い

RGBは色を表す方式です。赤、緑、青の3つの値で1つの色を表します。

RGBAは、RGBにアルファ値を加えたものです。色だけでなく、透明度も一緒に扱えます。

RGB 8-8-8では、赤、緑、青にそれぞれ8bitを使います。8bitでは0から255までの256段階を表せるため、RGB全体では約1677万色を表現できます。

RGBA 8-8-8-8では、RGBに加えてアルファにも8bitを使います。アルファが8bitであれば、透明度を0から255までの256段階で表せます。

つまり、RGBAでは「色」と「透明度」を同時に持てるため、画像を重ね合わせる表現に向いています。

8bitアルファは0から255で透明度を表す

アルファチャンネルが8bitの場合、透明度は0から255までの整数で表されます。

Webカラーの8桁HEXで使われる#RRGGBBAAのAA部分も、この考え方に基づいています。

たとえば、#FF573380では、#FF5733が色の部分で、80がアルファ値の部分です。80は10進数で128に近いため、およそ50パーセント程度の不透明度になります。

ただし、透明度は背景との組み合わせによって見え方が変わります。同じ半透明の色でも、白い背景の上と黒い背景の上では、印象が大きく変わります。

アルファブレンディングは前景と背景を混ぜる処理

アルファ値を使って前面の色と背景の色を合成する処理を、アルファブレンディングと呼びます。

考え方としては、前面の色をアルファ値の割合だけ使い、背景色を残りの割合だけ使って合成します。

表示される色 = 前景色 × α + 背景色 × (1 - α)

たとえば、アルファ値が0.3の場合、前景色を30パーセント、背景色を70パーセント使って合成するイメージです。

この仕組みによって、半透明のボタン、薄い背景色、ふんわりした影、透けるパネルなどが表現できます。

見た目としては「透けている」と感じますが、画面の中では、前面と背景の色を計算して新しい色として表示しています。

透明度を持つ画像形式

画像形式によって、透明度を扱えるかどうかが異なります。

PNGやWebPは、透明度を含む画像に向いています。特に、ロゴやアイコンのように背景を透過させたい画像では、PNGがよく使われます。

JPEGは写真に向いている形式ですが、アルファチャンネルを持てません。そのため、JPEG画像では背景を透明にすることはできません。透明な背景が必要な場合は、PNG、WebP、SVGなどを検討します。

GIFも透過に対応していますが、基本的には1色を透明にするような扱いです。滑らかな半透明表現には向いていません。

図2：画像形式ごとの透明度対応

この図から分かること

この図から、すべての画像形式が透明度に対応しているわけではないことが分かります。

PNG、WebP、SVGは透明度を扱えるため、ロゴやアイコン、UI素材などに向いています。背景の上に自然に重ねたい画像では、アルファチャンネルを持てる形式を選ぶことが大切です。

JPEGは写真には向いていますが、透明度を持てません。そのため、背景を透過させたいロゴやアイコンには向いていません。

画像をWebページに使うときは、見た目だけでなく、透明度が必要かどうかも考えて形式を選ぶとよいでしょう。

PNGの透明背景はアルファチャンネルでできている

透過PNGは、背景を透明にできる画像形式です。ロゴ、アイコン、イラスト素材などでよく使われます。

たとえば、ロゴ画像の周りが透明になっている場合、下にある背景色や写真がそのまま見えます。これは、透明部分のアルファ値が0に近くなっているためです。

また、ロゴの輪郭部分では、完全に不透明なピクセルと完全に透明なピクセルの間に、半透明のピクセルが配置されることがあります。これにより、輪郭がギザギザせず、なめらかに見えます。

このように、アルファチャンネルは単に「透明か不透明か」を切り替えるだけではありません。ピクセルごとに透明度を細かく持つことで、自然な重なりやなめらかな輪郭を作ることができます。

CSSで扱うアルファ表現の考え方

CSSを使うと、色に透明度を加える指定ができます。代表的な考え方として、rgba、hsla、8桁HEX、opacityなどがあります。

ただし、ここまでの記事ではCSSをまだ詳しく解説していないため、ここでは仕組みだけを紹介します。具体的なCSSの書き方やサンプルは、CSSに関する記事以降で扱います。

rgbaや8桁HEXは、背景色だけ、文字色だけ、影だけのように、特定の色に透明度を持たせる考え方です。

opacityは、要素全体をまとめて透明にする考え方です。要素の中に文字や画像がある場合、それらも一緒に透けます。

この違いはとても大切です。たとえば、背景だけを半透明にしたい場合と、要素全体を半透明にしたい場合では、使う方法が変わります。

opacityとアルファ付き色の違い

opacityとアルファ付き色は、どちらも透明に見せるための仕組みですが、作用する範囲が異なります。

たとえば、カード全体にopacityを指定すると、カードの背景だけでなく、中の文字や画像も一緒に薄くなります。

一方、背景色だけにアルファ値を持たせる指定を使うと、背景だけを透けさせ、文字ははっきり表示することができます。

Webデザインでは、背景は透けているけれど文字は読みやすい状態にしたいことがよくあります。そのような場合は、opacityよりもアルファ付きの背景色を使う考え方が向いています。

半透明表現のHTMLサンプルを確認する

ここからは、CSSを使わずにHTMLだけで確認できるサンプルを見ていきます。

CSSによる半透明パネルや影の作成は後の記事で扱うため、ここでは透過PNGや表を使って、アルファ値とアルファチャンネルの考え方を確認します。

最初のサンプルでは、背景画像の上に、透明部分を持つPNG画像を表示します。

事前にlesson21_1.htmlと同じ場所にimagesフォルダを作成し、その中にbackground-photo.pngとpanel-alpha.pngを保存しておきます。panel-alpha.pngは、半透明の白いパネルを含むPNG画像として用意します。

ファイル名： lesson21_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>半透明パネル画像</title>
</head>
<body>
  <h1>半透明パネルと背景画像</h1>

  <p>下の画像は、背景写真です。</p>
  <img src="images/background-photo.png"
       width="480" height="300"
       alt="背景として使う風景写真">

  <p>次の画像は、半透明部分を持つPNG画像です。</p>
  <img src="images/panel-alpha.png"
       width="480" height="300"
       alt="半透明の白いパネルを含むPNG画像">
</body>
</html>

ブラウザの表示例

ブラウザには、背景写真と半透明パネルを含むPNG画像が順番に表示されます。

このサンプルでは、CSSで画像を重ねてはいません。HTMLだけで、背景画像と半透明PNG画像を別々に表示し、アルファチャンネルを持つ画像の見え方を確認します。

実際に背景写真の上へ半透明パネルを重ねる配置は、CSSに関する記事以降で扱います。ここでは、PNG画像自体が透明度の情報を持てるという点を理解しましょう。

8桁HEXのアルファ値をHTMLで整理する

次のサンプルでは、8桁HEXの考え方をHTMLの表で整理します。

CSSで色を直接表示するサンプルはまだ扱わず、#RRGGBBAAのAA部分がアルファ値であることを表として確認します。

ファイル名： lesson21_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>8桁HEXのアルファ値</title>
</head>
<body>
  <h1>8桁HEXの透明度</h1>

  <table border="1">
    <tr>
      <th>表記</th>
      <th>色の部分</th>
      <th>アルファ部分</th>
      <th>透明度のイメージ</th>
    </tr>
    <tr>
      <td>#FF5733FF</td>
      <td>#FF5733</td>
      <td>FF</td>
      <td>完全に不透明</td>
    </tr>
    <tr>
      <td>#FF573380</td>
      <td>#FF5733</td>
      <td>80</td>
      <td>半透明に近い</td>
    </tr>
    <tr>
      <td>#FF573300</td>
      <td>#FF5733</td>
      <td>00</td>
      <td>完全に透明</td>
    </tr>
  </table>

  <p>8桁HEXでは、最後の2桁がアルファ値を表します。</p>
</body>
</html>

ブラウザの表示例

ブラウザには、8桁HEXの構造を整理した表が表示されます。

#RRGGBBAAの形式では、先頭の6桁がRGBの色を表し、最後の2桁がアルファ値を表します。

FFは完全に不透明、00は完全に透明です。80はおよそ半透明に近い値です。

CSSを使えば、これらの値を実際の背景色や文字色として指定できます。具体的な表示方法は、CSSに関する記事以降で学びます。

図3：#RRGGBBAAの読み方

この図から分かること

この図から、8桁HEXではRGBの後ろにアルファ値が追加されることが分かります。

#FF573380の場合、FFが赤、57が緑、33が青を表します。そして最後の80がアルファ値を表します。

6桁の#RRGGBBは色だけを表しますが、8桁の#RRGGBBAAは色に加えて透明度も表します。

最後の2桁がFFに近いほど不透明になり、00に近いほど透明になります。80は中間に近い値なので、半透明のような見え方になります。

透過PNGロゴを表示するサンプル

3つ目のサンプルでは、アルファチャンネルを持つPNGロゴを表示します。

透過PNGは、背景部分が透明になっている画像です。HTMLだけでは自由に重ね合わせる配置はできませんが、透過PNGそのものはimgで表示できます。

事前にlesson21_3.htmlと同じ場所にimagesフォルダを作成し、その中にlogo-alpha.pngを保存しておきます。logo-alpha.pngは、背景が透明なPNGロゴとして用意します。

ファイル名： lesson21_3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>透過PNGロゴ</title>
</head>
<body>
  <h1>透過PNGロゴの表示</h1>

  <p>次の画像は、アルファチャンネルを持つPNGロゴです。</p>

  <img src="images/logo-alpha.png"
       width="240" height="240"
       alt="背景が透明なPNGロゴ">

  <p>透明部分では、ページの背景がそのまま見えます。</p>
</body>
</html>

ブラウザの表示例

ブラウザには、背景が透明なPNGロゴが表示されます。

ロゴの周りが透明になっている場合、四角い背景は表示されず、ロゴの形だけが見えます。これは、PNG画像のアルファチャンネルによって、透明部分と不透明部分が分けられているためです。

透過PNGは、ロゴやアイコンをWebページに自然に配置したいときに便利です。

ただし、画像の位置調整、背景との重ね合わせ、中央配置などは、CSSを使うことでより自由に行えます。CSSによる配置や重なりの制御は、CSSに関する記事以降で解説します。

アルファ値が役立つ場面

アルファ値は、画像やUIの見え方を調整するときに役立ちます。

たとえば、ドロップシャドウでは、真っ黒な影をそのまま表示すると強すぎることがあります。そこで、黒にアルファ値を加えて薄くすることで、自然な影に見せられます。

ガラス風のパネルでは、白や黒に透明度を加え、背景を少し見せながら前面の情報を読みやすくします。

ただし、これらの具体的な表現はCSSを使って作ることが多いため、ここでは考え方だけを押さえておきましょう。

マスクとアルファチャンネルの関係

マスクは、画像や要素のどの部分を見せるか、どの部分を隠すかを制御する考え方です。

アルファチャンネルは、このマスクのような働きをすることがあります。アルファ値が高い部分は見え、低い部分は見えにくくなります。

たとえば、中心ははっきり表示し、外側へ向かって徐々に透明にするような画像は、アルファ値のグラデーションによって作ることができます。

これにより、画像の端を自然にぼかしたり、特定の形だけを表示したりできます。

CSSや画像編集ソフトでは、マスクやアルファチャンネルを使って、より高度な表示制御ができます。CSSによるマスク表現は、後の記事で扱う内容です。

アルファ値を使うときの注意点

アルファ値は便利ですが、使い方によっては読みにくさの原因にもなります。

特に、文字の背景に半透明色を使う場合は、背景画像や背景色によって文字の読みやすさが変わります。

半透明の背景を使う場合は、その上にある文字がしっかり読めるかを確認しましょう。

また、透明画像を使いたい場合は、画像形式にも注意が必要です。JPEGでは透明背景を扱えないため、PNG、WebP、SVGなどのアルファ対応形式を使います。

使用キーワードを整理する

アルファ値とアルファチャンネルに関する主な用語を整理しておきます。

最初に押さえたいのは、RGBは色、アルファ値は透明度という考え方です。

RGBだけでは、何色かは表せますが、どれくらい透けるかは表せません。そこにアルファ値を加えることで、半透明や透明背景のような表現が可能になります。

アルファ値を理解すると画像とUIの重なりが分かる

アルファ値とアルファチャンネルを理解すると、画像やUIがどのように重なって見えるのかを考えやすくなります。

Web制作では、画像をそのまま表示するだけでなく、背景と重ねたり、文字を読みやすくしたり、画面に奥行きを出したりする場面があります。

そのとき、アルファ値はとても大切な役割を持ちます。

ここではHTMLだけでアルファチャンネルの基本を確認しました。CSSに関する記事以降では、rgba、opacity、半透明の背景、影、ガラス風パネル、マスク表現などを使って、実際のデザインにどう活用するかを詳しく学んでいきましょう。