1. 背景色を半透明にするってどういうこと？

ウェブページの背景色を「少し透けて見えるようにする」ことを、CSSでは「透明度をつける」と言います。たとえば、写真の上に文字を載せるとき、背景にほんのり色をつけて、写真が少し見えるようにしたい場合などに使われます。

このような半透明な背景は、CSSのrgba()やhsla()という指定方法を使うことで簡単に実現できます。

2. RGBAとは？透明度を指定できるカラー指定

RGBAは、「赤（Red）」「緑（Green）」「青（Blue）」の3色に、「透明度（Alpha）」を加えた指定方法です。

たとえば、赤色にしたい場合はrgb(255, 0, 0)ですが、半透明にしたいときはrgba(255, 0, 0, 0.5)のように書きます。最後の「0.5」は透明度で、「0」が完全に透明、「1」が完全に不透明を表します。

3. HSLAとは？色の雰囲気で指定できるカラー表現

HSLAは、「色相（Hue）」「彩度（Saturation）」「明度（Lightness）」に「透明度（Alpha）」を加えた色の指定方法です。

たとえば、青っぽい色を透けさせて使いたいときはhsla(240, 100%, 50%, 0.3)のように書きます。

数値の意味がわかりにくいですが、Hueは「色の種類」、Saturationは「色の鮮やかさ」、Lightnessは「明るさ」を意味します。透明度の指定はRGBAと同じように0〜1で行います。

4. RGBAとHSLAの違いと使い分け

RGBAとHSLAは、どちらも透明度を設定できるCSSのカラー指定方法です。違いは「色の指定のしかた」です。

RGBAは「赤・緑・青」の割合で色を作る
HSLAは「色の雰囲気・鮮やかさ・明るさ」で色を作る

初心者にはまずRGBAをおすすめします。RGBは身近なテレビやモニターでも使われている色の表現だからです。慣れてきたら、HSLAで微調整すると便利です。

5. 背景を半透明にするCSSの書き方（RGBAの例）

次は、実際にRGBAを使って背景を半透明にするHTMLとCSSのサンプルコードを見てみましょう。


<style>
.box {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 20px;
}
</style>

<div class="box">これは半透明の黒い背景です</div>

ブラウザ表示

6. 背景を半透明にするCSSの書き方（HSLAの例）

次に、HSLAを使った半透明の背景の例です。


<style>
.box2 {
    background-color: hsla(120, 100%, 25%, 0.4);
    color: white;
    padding: 20px;
}
</style>

<div class="box2">これは半透明の緑の背景です</div>

ブラウザ表示

7. 不透明と半透明の見た目の違いを体験しよう

次のサンプルでは、上が不透明、下が半透明の背景です。見た目を比べて、透明度があると背景が透けて見えることがわかります。


<style>
.full {
    background-color: rgb(0, 0, 255);
    color: white;
    padding: 20px;
}
.semi {
    background-color: rgba(0, 0, 255, 0.5);
    color: white;
    padding: 20px;
    margin-top: 10px;
}
</style>

<div class="full">これは不透明の青い背景です</div>
<div class="semi">これは半透明の青い背景です</div>

ブラウザ表示