CSSで要素を透明にする3つの方法を紹介！

2023年1月26日2023年1月29日

takato（@n8takato）です！

cssで透明にする方法を知りたい

この記事は上記の課題に向けて作成しています。

webサイトを制作していると要素を透明にすることが度々あります。

cssでは簡単に要素を透明にすることが出来ます。

この記事ではcssで要素を透明にする方法を紹介します。

この記事を読むメリット

cssで要素を透明にする方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です！

都内制作会社でwebデザイナー・webディレクターとして勤務
webデザイナー3年、webディレクター1年目
web制作現場で学んだことを発信している人

CSSで要素を透明にする3つの方法

早速cssで要素を透明にする方法を紹介します。

cssで透明にする方法は3通りあります。

cssで要素を透明にする3つの方法

opacityプロパティ
rgbaの指定
transparentの指定

それぞれ説明していきます。

opacityプロパティ

1つ目は「opacityプロパティ」を使う方法です。

opacityプロパティは指定した要素とその子要素を透明にすることが出来ます。

コードの記述方法

 opacity:数字;

数字は0〜1まで入力出来、0に近いほど透明になります。

実際にopacityプロパティを使った例

opacity:0;

opacity:0.2;

opacity:0.4;

opacity:0.6;

opacity:0.8;

opacity:1;

左上は数値が0なので完全に透明になり見えなくなりました。

また、指定したクラスの子要素も透明になります。

※文章も同様に半透明になっていますよね。このように「opacity」は子要素も半透明になるのが特徴です。

使用したHTMLコード

<div class="test">
  <div class="test01">
   <p>opacity:0;</p>
  </div>
  <div class="test02">
   <p>opacity:0.2;</p>
  </div>
  <div class="test03">
   <p>opacity:0.4;</p>
  </div>
  <div class="test04">
   <p>opacity:0.6;</p>
  </div>
  <div class="test05">
   <p>opacity:0.8;</p>
  </div>
  <div class="test06">
   <p>opacity:1;</p>
  </div>
 </div>

使用したcssコード

.test01 {
 opacity:0;
}

.test02 {
 opacity:0.2;
}

.test03 {
 opacity:0.4;
}

.test04 {
 opacity:0.6;
}

.test05 {
 opacity:0.8;

}
.test06 {
 opacity:1;
}

rgbaの指定

2つ目は「rgbaを指定」する方法です。

rgbaの「a」はアルファ値というもので透明度を指定出来ます。

コードの記述方法

<!--背景を透明にする場合-->
background-color:rgba(0,0,255,0);

<!--文字を透明にする場合-->
color:rgba(0,0,255,0);

一番最後の数字が透明度の値です。0に近づくほど透明になります。

実際にrgba指定を使った例

opacity:0;

opacity:0.2;

opacity:0.4;

opacity:0.6;

opacity:0.8;

opacity:1;

上記のように背景色が半透明になりました。

「opacityプロパティ」との違いは子要素に影響が無いという点です。

※「opacityプロパティ」は子要素の文字も透明になっていましたが「rgba指定」は指定した箇所のみ透明になります。

「rgbaの指定」は部分的に透明にする際に適してます。

使用したHTMLコード

<div class="test">
  <div class="test01">
   <p>opacity:0;</p>
  </div>
  <div class="test02">
   <p>opacity:0.2;</p>
  </div>
  <div class="test03">
   <p>opacity:0.4;</p>
  </div>
  <div class="test04">
   <p>opacity:0.6;</p>
  </div>
  <div class="test05">
   <p>opacity:0.8;</p>
  </div>
  <div class="test06">
   <p>opacity:1;</p>
  </div>
 </div>

使用したcssコード

.test01 {
 background-color:rgba(229,229,229,0);
}

.test02 {
 background-color:rgba(229,229,229,0.2);
}

.test03 {
 background-color:rgba(229,229,229,0.4);
}

.test04 {
 background-color:rgba(229,229,229,0.6);
}

.test05 {
 background-color:rgba(229,229,229,0.8);

}
.test06 {
 background-color:rgba(229,229,229,1);
}

transparentの指定

3つ目は「transparentを指定」する方法です。

カラー設定に「transparent」を追加すると透明になります。

「transparent」は半透明の設定は出来ません。完全な透明になります。

コードの記述方法

<!--背景を透明にする場合-->
 background-color:transparent;

<!--文字を透明にする場合-->
 color:transparent;

実際にtransparent指定を使った例

transparent

カラー設定

1番目のみ「transparent」を指定したので背景が透明になっています。

「transparent」は「opacity:0;」と同じ状態です。

完全に透明にしたい場合は「transparent」を使用してください。

使用したHTMLコード

<div class="test">
  <div class="test01">
   <p>opacity:0;</p>
  </div>
  <div class="test02">
   <p>opacity:0.2;</p>
  </div>
  <div class="test03">
   <p>opacity:0.4;</p>
  </div>
  <div class="test04">
   <p>opacity:0.6;</p>
  </div>
  <div class="test05">
   <p>opacity:0.8;</p>
  </div>
  <div class="test06">
   <p>opacity:1;</p>
  </div>
 </div>

使用したcssコード

.test01 {
 background-color:transparent;
}

.test02 {
 background-color:rgba(229,229,229);
}

.test03 {
 background-color:rgba(229,229,229);
}

.test04 {
 background-color:rgba(229,229,229);
}

.test05 {
 background-color:rgba(229,229,229);

}
.test06 {
 background-color:rgba(229,229,229);
}