LINEで現役エンジニアに直接質問してみよう!登録無料

CSS 「opacity」の書き方・使い方! 文字や画像を透明にする方法解説

この記事の概要

CSSののopacityを使うと、文字、画像、要素などを透過させることが出来ます。
使えるようになると、写真にopacityを適用してサムネイルの背景にしたり、マウスカーソルを当てた時に薄くしたり、表現の幅が広がりますよ😌

opacityとは?

opacityとは、要素の透明度(透過度)を設定するプロパティです。

opacityで注意したいのが、この透明度の影響は子要素にも及ぶことです。例えば、親要素と子要素で両方ともopacityを設定し、値が異なっていたとしても、それらは透明度を上書きするのは無く重ねがけします

例えば、親要素のopacity0.6、子要素のが0.8とすると、重ねがけになり子要素の透明度は「0.6 ✗ 0.8 = 0.48」となります。
不透明にするどころか逆に逆に透明化してしまいます。

もし、子要素に透明度を適用させたくない場合は、background: rgba(0, 0, 0, 0.4)のようぱプロパティを使うようにしましょう(この手法については、この記事の下部の章で解説しています)。

opacityの使い方・書き方

〇〇 {
    opacity: <値>;
}

CSSのopacityの値には0 ~ 1の少数で指定します。

例えば、不透明度を30%に設定したければ0.3、完全に透明にしたければ0という具合に設定します。

実際の具体例はこのようになります。

.elem {
    opacity: 0.5;
}
MEMO

mozillaのドキュメントによると、opacityの値に少数の他に%を使うこともできるみたいです。

どちらも同じ意味なので、開発者がわかりやすい方法でいいですが、現在は少数の方がよく使われているので、こちらで合わせるほうがオススメです。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

opacityの使用例(opacityを1, 0.5, 0で比較)

ここでは、opacityの使用例を紹介します。まずは、画像をopacityで透明にしていきます。

「opacity: 1」の場合

「opacity: 1」で指定すると、完全非透明になります。

「opacity: 0.5」の場合

「opacity: 0.5」で指定すると、50%の透明度になります。

「opacity: 0」の場合

「opacity: 0」で指定すると、完全透明になります。

opacityを使った応用デザイン紹介

opacityを使うと、Web作成するとき色々な場面で応用できます。今回は、下記について紹介していきます。

  1. カーソルが当たっているとき要素を薄くしてホバーされている事がわかるようにする
  2. opacityと組み合わせてSEO対応のサムネイルを作成する

カーソルが当たっているとき要素を薄くしてホバーされている事がわかるようにする

ボタンや画像にマウスカーソルが当たっている時、何も反応がなかったらそれがクリックできるのかわかりませんよね?
そんなところを、簡単に改善できるのが、この方法です。

上記の設定だと、画像にマウスカーソルがホバーした時、不透明度を30%にします。急に透明度が変化してしまうと目がチカチカしてしまうので、transitionを付けて透明度に変化をアニメーション化しています。

この方法なら、クリックできることが一目瞭然ですよね!

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

MEMO

逆に、マウスカーソルがあたった時に不透明度が100%で、逆にマウスがあたっていない時に不透明度が70%になるように設定するには、下記のように設定すればOKです。

opacityと組み合わせてSEO対応のサムネイルを作成する

このように、opacityを適用した画像の上に、h1で作ったタイトルを重ねることで、サムネイルを作成することが出来ます。

このデザインを作成するポイントは下記の3つです。

  1. 画像にopacityを適用する(透明度はお好みで)
  2. h1テキストにposition: absoluteを適用する
  3. 上下中央にテキストを配置するために、下記のCSSを使用する
    • top: 50%;
    • left: 50%;
    • transform: translate(-50%, -50%);
    • margin: 0;

opacityの各ブラウザ対応状況(ベンダープレフィクスの必要性)

ここまでで、opacityの使い方、使用例を解説いましたが、実際にブラウザが対応しているのか心配ですよね。

ブラウザの対応状況はどうなのか見ていきましょう。

参考 OpacityCan I use

主要なブラウザはもちろんの事、IE9以降から対応しています。対応ブラウザを気にすること無く、ベンダープレフィックスは不要で使うことができます

opacityの透過を子要素に継承させないようにする方法

デザインの関係上、opacityを子要素に継承させたくない場合もあると思います。
沢山、そのような場面はあるのですが、残念ながら子要素に継承されてしまったopacityを解除する方法はありません

なぜかと言うと、opacityを適用した要素はそれ自体、全体がopacityの適用範囲となってしまうからです。

これについての解説は「mozillaのドキュメント」にも記述されています。

この値は子要素に継承されませんが、その効果は当該要素の内容を含む全体に及びます。すなわち、要素とそれに含まれる子要素は、互いに透明度が異なっていても、その要素の背景に対しては同程度の透明度となります。

https: //developer.mozilla.org/ja/docs/Web/CSS/opacity

もし、CSSから透明度を利用したデザインを行いたい場合、2種類の回避方法があります。

  1. opacityではなく、background + rgba()で書けないか検討する
  2. 子要素ではなく、兄弟要素又は親要素を作って、position:absoluteで重ね合わせて利用できないか検討する

opacityではなく、background + rgba()で書けないか検討する

もし、背景色を透明にできれば十分な場合、background: rgba(0, 0, 0, 0.4)のように、透明度を含めた色指定ができるので、検討してみてください。

子要素ではなく、兄弟要素又は親要素を作って、position:absoluteで重ね合わせて利用できないか検討する

これは、前章のデザイン例として紹介した方法です。

親要素にopacityを使用してしまうと、透明度を元に戻すことは出来ないので、兄弟要素で配置し、画像だけopacityを適用しています。

opacityとrgbaの違い

この2つはどちらも要素を透過することが出来ます。しかし、それぞれ挙動が異なります。

  • opacity – 子要素すべての文字、画像、border等をすべて透過。子要素で上書き出来ない
  • rgba – 要素一部の文字、要素、border等を透過。ただし画像は透過処理出来ない。

opacityを使った透過処理が適している場所

opacityは、子要素を含めてすべて透過処理するので、サクッと全体を透過処理を施したい時や、画像に透過処理を施したい時に使います。
1つ1つ個別に設定する必要はないので、一番楽チンです。

実際にopacityを試すと、このように背景と文字の両方が透明になっていることがわかります。

rgbaを使った透過処理が適している場所

rgbaは、要素の一部を透過処理できるので、文字、背景、枠線(border)を個別に透過処理させたい場合に使います。しかし、rgbaで画像を透過させることができません。その場合はopacityを使うようにしましょう。

MEMO

rgbaは「red, green, blue, alpha」の頭文字を取った略語で、光の3原色+透明度を表しています。光の三原色を組み合わせれば、世の中のすべての光色を表現出来ます。

ここで紹介したrgbaによる透過処理は、この中の「alpha(透明度)」を使った方法で、透明度だけを記述する方法は無く、3原色も合わせて記述する必要があります。

実際に、rgbaを試すと、このように背景だけを透明にすることが出来ます。

まとめ

この記事で紹介したことをまとめると、このようになります!

  • opacityは要素を透明にするCSSプロパティの1つ
  • opacityの透明度は01の少数で指定
  • opacityを使えるようになるとデザインの幅がグッと広がる
  • opacityは子要素全体に適用され、子要素で解除できない
  • opacityが子要素まで適用されて不都合な場合、backgroundを使って表現出来ないか検討しよう
  • 要素を重ね合わせてopacityを適用すする要素を制限すると、いい感じにデザインできる
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。