透明度を操れ!CSS OpacityとRGBaの使い方

どうも、僕です。

最近CSSの記事ばかり書いているので、そろそろWordpress系の記事とかSEOなどのマーケティング関係の記事を書かなければなーと思ってます。
※SEOとかWordpress関係の記事は上位表示が難しいので、書くのには気合がいるんですよね。

CSSで背景などを透明にするときにOpacityとかRGBaを使用すると思いますが、今回はそこの使い方と違いについて解説していきます。

対応ブラウザ

CSS3のプロパティなので主要ブラウザの最新版では動作します。
IE9より古いものはopacityをサポートしていないので、代わりにfilterのalpha(opacity=)を使用してください。

CSS filterの詳しい使い方はCSSでおしゃれに画像を加工!CSS FILTER 使用方法と例から

Opacity

不透明度を表すもので、指定できる値は0〜1の間です。※小数点以下「0.25」とかも指定可能。

デモ

通常
Opacity

ご覧の通り透明度が増してますよね。指定する値が0に近ければ近いほど透明になります。
ただここで問題なのは文字も一緒に透明度が下がってしまう点ですね。
ですので、hoverで背景だけを透明にしたいときとかは、次に説明するRGBaでの透明度を調整することをおすすめします。

RGBa

RGBカラーモデル(Red,Green,Blue)にalphaが加わった色指定際に使用できるものです。

デモ

通常
RGBa

alphaの指定できる値はopacityと同じ0〜1までの間で、前の3つの数字はそれぞれ赤、緑、青を表しています。
このRGBaで指定することによってbackgroundだけの透明度を操ることができるので非常に便利です。

OpacityとRGBaの違い

上記の説明でOpacityとRGBaの使い方を説明しましたが、違いは

Opacity = プロパティ

RGBa =

というところです。
プロパティと値の違いはわかりますよね?

color:#000;

のようなコードの場合、colorがプロパティ、#000が値になります。

OpacityとRGBaの使い分け

Opacity
・画像を透明にする場合

RGBa
・色を透明にする場合
background,colorなどの色を指定できるところにはRGBaが使用できるのでその色だけを透明にできます。

まとめ

今回はすこし短いですが、要素を透明にする際にどっちが適しているかがわかっていただければ嬉しいです。たまにrgbaだとあれこの色のコードなんだっけとなることがありますが、そこはどこかにメモってコメントアウトするなりしてください。※慣れると自分で大体の色を調節できるようになります。

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。