MENU
カテゴリー

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

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

※当ブログでは商品・サービスのリンク先にプロモーションを含みます。ご了承ください。

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);
}

CSSで透明にするのは簡単!

最後にまとめです。

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

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

それぞれ特徴があるので使い分けてください。

あわせて読みたい
現役webデザイナーがオススメするスクール3選! webデザインを学ぶのにオススメなスクールを知りたい この記事は上記の課題に向けて作成しています。 webデザインが学べるスクールがいくつか存在します。 その中でオス...
あわせて読みたい
【CSS】display:flex;の使い方の全てを紹介します! 「display:flex;」の使い方を知りたい この記事は上記の課題に向けて作成しています。 web制作をしていると必ずと言って良いほど「display:flex;」を使用します。 「dis...
あわせて読みたい
スムーズスクロールをjQueryで実装する方法を紹介! スムーズスクロールをjQueryで実装したい この記事は上記の課題に向けて作成しています。 スムーズスクロールはweb制作で頻繁に使用されます。 jQuerを使用することで簡...
  • URLをコピーしました!
目次