ZeroPlus Media > Web制作 > HTML/CSS > CSSで要素を透明化する方法3選！それぞれの使い分け方を紹介

CSSで要素を透明化する方法3選！それぞれの使い分け方を紹介

HTML/CSS

2022/02/19

2023/04/20

「CSSで要素を透明化する方法を知りたい」

「要素を透明化する方法を、正しく使い分けたい」

Web制作の際に要素の透明化を活用できると便利です。

例えば他の要素を強調したり、異なる2つの要素を調和させたりできるのです。

この記事ではCSSを用いて要素を透明化する３つの方法と、それぞれの使い分けについて解説しています。

Webサイト制作時に目的に合う方法が選択できるよう、ぜひ参考にしてみてください。

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

要素を透明化する3つの方法と使い分け
まとめ

要素を透明化する3つの方法と使い分け

要素を透明化する方法は、3つございます。

それぞれの指定方法について、簡単に特徴を紹介いたします。

指定方法	特徴
opacityプロパティ	要素の透明度を、数値で調整する
rgba指定	要素の色の透明度を、数値で調整する
transparent指定	要素の色を、完全に透明化する

1.opacityプロパティ

最初に、opacityプロパティを用いて要素を透明化する方法を確認しましょう。

opacityの値には0.0~1.0の範囲で「不透明度」を指定可能です。

数値が0に近いほど、要素は透明に近づきます。

実例を用いて確認しましょう。

<div class="container"> 
　　<div class="item itemA">
　　　<p>opacity: 1;</p>
　　　<img src="img/sample.jpg" alt="サンプル画像">
　　</div>
　　<div class="item itemB">
　　　<p>opacity: 0.8;</p>
　　　<img src="img/sample.jpg" alt="サンプル画像"> 
　　</div>
　　<div class="item itemC">
　　　<p>opacity: 0.5;</p>
　　　<img src="img/sample.jpg" alt="サンプル画像">
　　</div>
　　<div class="item itemD">
　　　<p>opacity: 0.3;</p> 
　　　<img src="img/sample.jpg" alt="サンプル画像"> 
　　</div>
　　<div class="item itemE">
　　　<p>opacity: 0;</p>
　　　<img src="img/sample.jpg" alt="サンプル画像">
　　</div>
</div>

「itemA〜itemE」の5つの要素に、異なる値のopacityを指定します。

.item{
　　width: 200px;
　　height: 100px;
　　background-color: aqua;
　　border: 1px solid black;
}
.item img{
　　width: 150px;
　　height: 80px;
　　object-fit: cover;
}
.itemA{
　　opacity:1;/*itemAの不透明度を100％に指定*/
}
.itemB{
　　opacity: 0.8;/*itemBの不透明度を80％に指定*/
}
.itemC{
　　opacity: 0.5;/*itemCの不透明度を50％に指定*/
}
.itemD{
　　opacity: 0.3;/*itemDの不透明度を30％に指定*/
}
.itemE{
　　opacity: 0;/*itemEの不透明度を0％（透明）に指定*/
}

表示結果は下のようになります。

opacityが0に近づくにつれて、要素は透明に近づいています。

opacityを0に指定した「itemE」では完全に透明化し、子要素のテキストや画像など全てが見えない状態となりました。

つまりopacityは指定要素のみならず、子要素も透明化する性質があるのです。

opacityプロパティの使い分けopacityプロパティの使い分けについても確認しましょう。

opacityプロパティの特徴はテキスト要素や背景色のみならず、画像要素のような色を指定できない要素も透明化できる点です。

opacityプロパティのメリットに、幅広い要素を透明化できることがありますが、デメリットも一つございます。

それは、親要素にopacityを指定すると子要素にまでopacityが効くことです。

実例を用いて確認しましょう。

<div class="container"> 
　　<div class="itemA item">
　　　　<p>opacity: 1;</p>
　　　　<img src="img/sample.jpg" alt="">
　　</div>
　　<div class="itemB item">
　　　　<p>opacity: 0.8;</p>
　　　　<img src="img/sample.jpg" alt=""> 
　　</div>
　　<div class="itemC item">
　　　　<p>opacity: 0.5;</p>
　　　　<img src="img/sample.jpg" alt="">
　　</div>
　　<div class="itemD item">
　　　　<p>opacity: 0.3;</p> 
　　　　<img src="img/sample.jpg" alt=""> 
　　</div>
　　<div class="itemE item">
　　　　<p>opacity: 0;</p>
　　　　<img src="img/sample.jpg" alt="">
　　　</div>
</div>

.itemA {
opacity:1;
}
.itemB {
opacity: 0.8;
}
.itemC {
opacity: 0.5;
}
.itemD {
opacity: 0.3;
}
.itemE {
opacity: 0;
}

上記の例では親要素である「itemA」~「itemE」へopacityを指定しました。

opacityを親要素に指定すると、透明化は子要素にまで影響します。

よって親要素に指定したopacityの数値に応じ、テキストや画像などの子要素まで透明化しています。

背景色のついた親要素にテキストが存在するレイアウトでは、この性質が弊害を生む可能性があるのです。

実例を用いて紹介いたします。

<div class="container">
　　　<p>opacityのデメリット</p>
</div>

.container{
　　width: 500px;
　　height: 300px;
　　display: flex;
　　background-color: rgb(40, 39, 39);
}

p{
　　margin: auto;/*display:flex;と組み合わせてテキストの左右中央寄せ*/
　　font-size: 36px;
}

上の例ではテキストと背景色の色調が近く、テキストが見えづらくなっています。

そこで背景色を半透明化。

テキストを目立たせてみます。

試しに親要素のcontainerにopacity: 0.5;を追加して背景色を半透明化してみましょう。

.container{
　　width: 500px;
　　height: 300px;
　　display: flex;
　　background-color: rgb(40, 39, 39);
　　opacity: 0.5;
}

上のように背景色のみならず、テキストまで半透明化しました。

背景色を透明化してテキストを目立たせたい場合、opacityでは対応できないケースがあるため注意が必要です。

opacityプロパティまとめ

特徴：数値を指定することで、要素の透明度を調整できる（数値が0に近いほど要素は透明に近づく）
使用シーン：画像要素/テキスト/背景色の透明化
メリット：唯一、画像要素を透明化できる
デメリット：親要素に指定すると、子要素まで透明化する

opacityプロパティは幅広い要素を透明化できるメリットがある一方、子要素の透明度にも影響を与えるデメリットがあります。

2.rgba指定

次にrgba指定で要素を透明化する方法を紹介します。

rgba指定とは色の表現方法の一つです。

rgbは色red・green・blueの頭文字、aは透明度を表すalphaの頭文字から取られています。

rgba指定ではrgba(0,0,255,0.7)という具合に、4つの数値を用いて色と透明度を指定します。

このアルファ値はopacityと同様0に近づくほど、色が透明に近づきます。

例えばrgba(255,0,0,0.5)は半透明の赤を示します。

こちらも実例で確認しましょう。

「itemA」〜「itemE」の背景色を、rgba指定で徐々に透明に近づけております。

.itemA{
　　background-color: rgb(255, 0, 0);/*背景色の不透明度を100%に指定*/
}
.itemB{
　　background-color: rgba(255, 0, 0, 0.8);/*背景色の不透明度を80%に指定*/
}
.itemC{
　　background-color: rgba(255, 0, 0, 0.5);/*背景色の不透明度を50%に指定*/
}
.itemD{
　　background-color: rgba(255, 0, 0, 0.3);/*背景色の不透明度を30%に指定*/
}
.itemE{
　　background-color: rgba(255, 0, 0, 0);/*背景色の不透明度を0%に指定*/
}

background-colorをrgba指定して透明度を変更できました。

不透明度が100%の場合、アルファ値の1は省略可能なため、rgba（255,0,0,1）はrgb(255,0,0)と記述できます。

background-colorにrgba指定する方法と同様に、colorプロパティにrgba指定をすれば文字色を透明化できます。

こちらも実例を用いて確認しましょう。

.itemA{
　　color: rgb(0, 0, 0);/*文字色の不透明度を100%に指定*/
}
.itemB{
　　color: rgba(0, 0, 0, 0.8);/*文字色の不透明度を80%に指定*/
}
.itemC{
　　color: rgba(0, 0, 0, 0.5);/*文字色の不透明度を50%に指定*/
}
.itemD{
　　color: rgba(0, 0, 0, 0.3);/*文字色の不透明度を30%に指定*/
}
.itemE{
　　color: rgba(0, 0, 0, 0);/*文字色の不透明度を0%に指定*/
}

rgba指定で文字色の透明度を変更できました。

rgba指定において注目すべきは、子要素の画像が透明化していない点です。

つまりrgba指定はopacityと異なり、子要素の透明度に影響を与えず、指定した要素の色のみを透明化できるのです。

rgba指定の使い分け

続いて、rgba指定の使い分けについて確認してみましょう。

rgba指定は、colorやbackground-color、borderなど色が変更できるプロパティに使用できます。

そのためテキストや背景に対して個別に透明度の指定ができます。

opacityのように子要素へ影響を与えることはないのです。

テキスト入りの要素で、親要素の背景色の透明度のみを変更することもできます。

.container{
width: 500px;
height: 300px;
display: flex;
background-color: rgba(40, 39, 39, 0.5);/*rgba指定で半透明化を指定
}

テキストの透明度を変更することなく、背景色だけを半透明化することができました。

子要素に影響を与えずに、親要素の背景色の透明度を変更したい場合は、rgba指定を使いましょう。

しかし画像要素のような色を指定できない要素の透明化はできないため、その場合はopacityを用いましょう。

rgba指定のまとめ

特徴：アルファ値を指定することで、要素の色の透明度を調整できる（数値が0へ近づくほど要素が透明化する）
使用シーン：テキスト/背景色の透明化、色の打ち消し
メリット：子要素に影響を与えることなく、親要素を透明化できる
デメリット：色を持つ要素しか透明化できず、画像要素は透明化できない

rgba指定は子要素に影響を与えることなく、要素を透明化できるメリットがあります。

その一方で、画像要素を透明化できないデメリットがあります。

3.transparent指定

最後に、transparent指定で要素を透明化する方法をご紹介します。

colorやbackground-colorなど色を指定するプロパティの値に、transparentを指定すれば要素を透明化できます。

要素の色を完全に透明化するため、rgba指定のアルファ値に0を指定した場合と同じ状態を示します。

実例で確認しましょう。

<div class="container"> 
　　<div class="item itemA">
　　　　<p>itemA</p>
　　</div>
　　<div class="item itemB">
　　　　<p>itemB</p> 
　　</div>
　　<div class="item itemC">
　　　　<p>itemC</p>
　　</div>
　　<div class="item itemD">
　　　　<p>itemD</p> 
　　</div>
　　<div class="item itemE">
　　　　<p>itemE</p>
　　</div>
</div>

.container{
　　background-color: rgb(167, 166, 166);コンテナーの背景色を濃いグレーに指定
}
.item{
　　width: 200px;
　　height: 100px;
　　background-color: rgb(255,0,0);各アイテムの背景色を赤に指定
　　border: 1px solid black;
}

上記のコードをブラウザで確認すると下のように表示されます。

ここで「itemC」のみ背景色にtransparentを指定します。

.itemC{
　　background-color:transparent;/*背景色を透明化する*/
}

再び表示結果を確認してみましょう。

「itemC」の背景色が透明化し、親要素「container」の背景色のグレーが見えるようになりました。

このようにtransparent指定は、要素が重なる箇所で、部分的に下地の色や隠れた要素を見せたい場合に便利です。

文字色は、colorプロパティにtransparentを指定することで透明化できます。

background-colorを用いて背景色を変更するプロセスと同様です。

実例を用いて確認してみましょう。

.itemC{ 
　　　color:transparent; /*文字色を透明化する*/
}

文字色が透明に変化しました。

ただしtransparentは透明度を数値で調整できず、中間の透明度を指定できません。

transparent指定の使い分け

transparent指定においても使い分けを確認しましょう。

transparent指定は、rgba指定のアルファ値を0にするケースと全く同じ指定です。

colorやbackground-colorなどの値にtransparentを指定することで、要素を完全に透明化できます。

用途として、先に指定した色を打ち消す際に使うことが多いです。

こちらも実例を用いて確認しましょう。

<div class="container"> 
　　<div class="item">
　　　<p>itemA</p>
　　</div>
　　<div class="item">
　　　<p>itemB</p> 
　　</div>
　　<div class="item">
　　　<p>itemC</p>
　　</div>
　　<div class="item">
　　　<p>itemD</p> 
　　</div>
　　<div class="item">
　　　<p>itemE</p>
　　</div>
</div>

.container{
　　background-color:rgb(167, 166, 166);
}
.item{
　　width: 200px;
　　height: 100px;
　　background-color:rgb(255,0,0);
　　border: 1px solid black;
}
.item:nth-child(3){
　　background-color: transparent;/*3番目の要素（itemC）のみ背景色を透明*/
}

item全てに指定した背景色を、transparentを用いて「itemC」のみ打ち消すことができました。

transparentではrgba指定より簡単に要素を透明化できます。

transparent指定のまとめ

特徴：色を持つ要素を透明化できる
使用シーン：テキスト/背景色の透明化、色の打ち消し
メリット：子要素に影響を与えることなく、親要素を透明化できる
デメリット：中間の透明度を指定できない

transparent指定は要素を簡単に透明化できる反面、中間の透明度を指定できないデメリットがあります。

まとめ

この記事では、要素を透明化する3つの方法を解説してまいりました。

紹介した方法はそれぞれ異なる性質を持ち、使い分けが難しく感じることもあるかと思います。

ここで、それぞれの方法の違いを表で確認しましょう。

	opacityプロパティ	rgba指定	transparent指定
特徴	数値を指定し、要素の透明度を調整できる	数値を指定し、要素の色の透明度を調整できる	色を持つ要素を透明化できる
使用シーン	画像要素/テキスト/背景色の透明化	テキスト/背景色の透明化、色の打ち消し	テキスト/背景色の透明化、色の打ち消し
メリット	唯一画像要素を透明化できる	子要素に影響を与えることなく、親要素を透明化できる	子要素に影響を与えることなく、親要素を透明化できる
デメリット	親要素に指定すると子要素まで透明化する	色を持つ要素しか透明化できない	中間の透明度を指定できない/色を持つ要素しか透明化できない