CSSで透明にするopacityとrgbaを使い分けよう！

CSSには要素を透明にすることができるタグがあります。

それらを使えば、文字や画像を半透明にしてサイトに奥行きを出せるなどデザインの幅を広げることができます。

基本の透明にする方法と、「文字の背景だけを透明にしたい」「マウスが上に乗った時に透明にしたい」という表現方法も初心者のために簡単に紹介しています。

CSSでの透明

HTMLとCSSが初心者の人でも、透明な要素をサイトに取り入れることで、簡単に魅力的なサイトを作ることができます。

実際のサイトの例も紹介しながら、CSSでの透明についてわかりやすく説明していきます。

まずは、具体的にどんなものを透明にできるのか見ていきましょう！

CSSで透明にできるモノ

CSSで透明にできるものは様々あります。

文字、文字の背景、ボーダー線、画像、ボタン、ボックス、アイコンなどです。

まだ他にも沢山ありますが、主にこれらに透明の要素を取り入れることで、見やすく、ユーザーにわかりやすいサイトを作ることができます。

イメージしやすいよう、実際に透明の効果を取り入れているサイトの例を見てみましょう。

CSSの透明方法を取り入れているサイト

He & She Photography

（URL：http://www.heandshephoto.com）

一つ目は、写真家のブログサイトで使われている透明要素の例です。
カテゴリーを透明な要素で重ね合わせています。

ADVIES

（URL：http://www.advies.co.uk）

こちらは、投資サポートを運営している会社のウェブサイトです。

文字の背景に透明な要素が使われています。
こうすることで文字を目立たせることができます。

create change

（URL：https://createchange.io）

こちらはデザイン会社のホームページの例です。
文字の背景に透明の要素を使うことによって、背景の画像を見やすくデザインされています。

このようなサイトは透明の要素を使って作ることができます！
複数の透明な画像を重ねたり、背景を透明にして文字を読みやすくするなど、様々な工夫ができます。

早速、順を追ってCSSでの透明の方法を説明していきます。

CSSで透明にするの際の注意点

CSSで透明度の指定をしても、反映されないことがあります。
その場合、ブラウザが対応していない可能性があるので確認しましょう。
以下のブラウザでない場合、透明にすることに対応していません。

透明にすることに対応しているブラウザ

Firefox 3.0以上
Google Chrome どのバージョンでも可
Safari 3.0以上
Opera 10.0以上
Internet Exprore 9.0以上

CSSで透明にする方法

例でも挙げたような、文字や画像などの要素をCSSで透明にするには、opacityとrgbaを用いた2種類の方法があります。

この２つの方法は透明にしたい対象によって使い分ける必要があります。

画像などの対象全体の透明にはopacityを使い、文字や色を付けられる要素にはrgbaを使用します。

それぞれ詳しく説明していきます。
どちらも簡単なので使いこなせるようになりましょう！

まずは、画像を透明にできるopacityについて説明します。

対象全体を透明にするopacity

先程も書いたように、opacityとは画像のような対象全体を透明にすることができるタグです。

画像にopacityを指定することで、文字を目立たせることもできます。

opacityを使う上で少し気をつけなくてはならないことがあります。
それは、対象全体に効果を表すというopacityの性質です。
opacityは、対象全体に効果を表すので、子要素に対しても透明にします。
例えば、文字を子要素に持つ背景だけを透明にするためにopacityを使うと、一緒に文字も透明になってしまいます。
この場合にはopacityではなく、rgbaを使いましょう。
その方法は後ほど説明します。

画像に対してのopacity

画像を透明にすることで、文字を読みやすくしたり、圧迫感を抑えた奥行きのあるサイト作りができます。

image {
  opacity: 0.5;
}

このコードを複数の画像に対して使うことで、透明な画像を重ねて使うことができるなど、様々な表現ができます。

またopacityは、画像に対してだけでなく、ボックス要素にも使えることができ、デザインの幅が広がります。

hover時に透明にする方法

次に、マウスが要素の上に乗った時に透明になる方法を紹介します。

:hoverを { の前に置くことで、マウスが上に乗った時の状態を示すことができます。

.image:hover {
  opacity: 0.5;
}

これでマウスが上に乗った時、要素を透明にすることができ、簡単に動きのあるサイトが作れます。

色をつけるrgba

rgbaとは、色を付けられる対象を透明にできるタグです。
色を付けられる対象とは、文字、文字の背景、ボーダーなどのことです。

例えばrgbaを使うと、文字はそのままで、文字の背景だけを透明にすることができます。この方法は後ほど説明します。

rgbaは、４つの数値で対象の色と透明度を示しています。
rがredで赤、gがgreenで緑、bがblueで青、aがalphaという透明度を指定するもので、それぞれに数値が入ります。

透明度を表す値はopacityと同じく０〜１で、０が透明で、１が不透明です。 

使用したい色と透明度の値を自分でrgbaを使って出すことはとても難しいです。

そのため、簡単にrgbaの値を出してくれるツールも紹介します。

まずは要素に対してどのようにrgbaを適応させれば良いのか、よく使う文字と背景に対しての使い方を学びましょう。

文字に対して

文字を透明にすることで後ろの画像を引き立たせることもできます。

color:　rgba　(0,0,0,0.5);

このサンプルコードはボーダーなどの他の色を付けられる要素に対しても使うことができます。

背景に対して

背景にrgbaを使って透明にすることで、文字はそのままで背景だけを透明にすることができます。

background-color: rgba (148,255,226,0.5);

透明な背景と文字を組み合わせたりすることで様々な表現ができ、デザイン性のあるサイトになるでしょう。

簡単にrgbaの数値を出す方法

上に挙げた２つのサンプルコードのように、rgbaの値が簡単なものから、複雑な値まで様々あります。

希望の色を出すrgbaの値を自分で求めることは難しいです。

そのため、簡単にrgbaの値を求められるこちらのツールを使いましょう！

https://generator.web-alpha.info/rgba/index.php#step1

まず、Step1で自分の反映させたい色を選択します。
左の例では、0099FFという色が選択されています。

Step2で10種類ある中から好みの透明度のrgba値をコピーするだけです。
真ん中の半透明であるコードをコピペするとこうなります。

background-color:rgba(0,153,255,0.5);

これだけで、自分で複雑なrgbaの値を出すことなく、簡単にrgbaの値を用いた色を使うことができます。

まとめ

CSSにはopacityとrgbaの２種類のタグで要素を透明にすることができます。

透明にしたい要素によってタグの使い分けを行い、見やすいサイト作りをしましょう。