More than 3 years have passed since last update.

【初心者でもわかる】cssで使われる透明3種類の使い方

Posted at 2021-02-23

どうも7noteです。CSSで使う透明には大きく3種類あるので、使い分け方について解説。

一言に透明、といってもcssでは透明にする方法が3つあります。

・ opacity　　　　　(プロパティ)
・ transparent　　　(色)
・ rgba(0,0,0,0)　　(色の透明度)

それぞれの使い方や意味を解説

opacityはcssプロパティの一種です。使い方はこう

style.css

/* 例 */
.clear {
  opacity: 0;
}

opacityは要素の透明度を指定することができます。

0 → 透明(透明度0%)
1 → 不透明(透明度100%)

100%が透明になっていない状態です。
たとえば0.3を指定すれば、要素は100%の見えている状態から30%まで透明になります。

【特長】
これは要素ごと透明にするので、子要素も一緒に透過されます。

cssで文字色や背景色を指定するときに#000やred等を指定するのと同様にtransparentを指定すると色が透明になります。

index.html

<p>文字が<span class="clear">透明</span>になります。</p>

style.css

.clear {
  color: transparent;
}

文字を透明にしたらこんな感じ↓

(↓カーソルで選択しようとすると見える↓)

【特長】
これは透明度合を調整できないので、完全に透明にすることにしかできません。半透明にしたりはできないので注意。
色を半透明にしたい場合は次のrgba()を使いましょう。

rgb()で色を指定することができるのですが、これにaを加えて透明度も指定することができます。
たとえばrgba(0,0,0,0.5)とした場合、黒の半透明を作ることができます。

style.css

/* 例 */
.clear {
  width: 100px;
  height: 100px;
  background: rgba(0,0,0,0.5);
}

指定できる幅は0～1でopacityと同様に0で完全透明になります。

【特長】
opacityと違い要素を透明にしているわけではないので、子要素は透明にしたくない時などはrgba()を使うとGOOD!!

【ざっくりした使い分け方】

・画像等色を指定しないもの　→　opacityで透化させる
・背景色、文字、border等　　→　transparentやrgba()で透過色を指定

あとはopacityだと中にある子要素も一緒に透明になってしまうので、半透明の要素の上に文字を乗せたい時などはrgba()を使うとよいでしょう。