【CSS】透明・半透明のカラーコード

「有色の指定方法はわかるけど、透明や半透明ってどうやって指定するんだろう？」

CSSで透明や半透明にする方法を解説します。

なお、CSSにおける「color」は文字色の指定ですが、背景色や線の色を透明にしたいときも同じ方法が使えます。

透明はtransparent

カラーコードとして「transparent」を指定すると透明になります。

下記は「color: transparent」を指定し、文字を透明にした例です。ネコの写真の上に「透明テキスト」という文字があります。

なお、ドラッグで選択すると反転して見えるようになります。

<style>
.example{
    /*コレ*/color: transparent;
}
.exampleback{
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100px;
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    font-size: 200%;
}
</style>
<div class="exampleback">
    <span class="example">透明テキスト</span>
</div>

「transparent」は「透明」です。色の指定に「red」や「green」のように色の名前で直接指定する方法がありますが、それの「透明」の指定です。「#」はいりません。

「transparent」は予測変換されない場合が多いため、スペルミスには気を付けましょう。

文字色のcolorだけでなく、border-colorやbackground-colorなど色を指定するときはいつでも使えます。

半透明はrgba

有色でありながら少し透けるようにする（半透明にする）にはrgbaで色を指定します。

下記は「color: rgba(255,255,255,0.5)」を指定し、文字を白の半透明にした例です。

<style>
.example2{
    /*コレ*/color: rgba(255,255,255,0.5);
}
.exampleback{
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100px;
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    font-size: 200%;
}
</style>
<div class="exampleback">
    <span class="example2">透明テキスト</span>
</div>

まず、rgbは赤緑青の3色で色を表現する方法です。これにaつまりアルファ値（透明値）を追加してrgbaです。

aの部分は小数点で0～1の数値を指定します。0ほど透明で1ほど有色です。

rgbaを指定するとき「,」コンマや「.」小数点が出てくるため間違わないように気を付けましょう。

文字色のcolorだけでなく、border-colorやbackground-colorなど色を指定するときはいつでも使えます。

要素の透明度はopacity

特定のhrmlタグ、クラスの要素を透明、半透明にするにはCSS opacityを指定します。

下記は「opacity: 0.5」を指定し、写真事半透明にした例です。背景色が白であるため白っぽくなります。

<style>
.exampleback2{
    /*コレ*/opacity: 0.5;
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100px;
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    font-size: 200%;
}
</style>
<div class="exampleback2">
    <span>透明テキスト</span>
</div>

opacityは文字や背景も含め要素全体を半透明にするCSSです。カラーコードではありません。

小数点で0～1の数値を指定します。0ほど透明で1ほど有色です。

【まとめ】color(色)を透明にする方法

• 透明はtransparent
• 半透明はrgba
• 要素の透明度はopacity

以上、CSSでcolor(色)を透明や半透明にする方法でした。