CSSのopacityプロパティとは?要素を透明にする使い方を徹底解説

Webサイトをデザインしていると、ページ上の特定の要素だけを他よりも透過させて表示したいと思うことがあります。たとえば、複数の画像を少し透明に見せたいといったケースです。

そんなときに役立つのが、CSSのopacityプロパティです。opacityプロパティは、Web要素の透明度を指定するために使われるプロパティです。

この記事では、実際のコード例を交えながら、opacityプロパティを使ってWebページ上の要素を透明にする方法を詳しく解説します。読み終える頃には、CSSのopacityプロパティを自信を持って使いこなせるようになっているでしょう。

CSSのopacityプロパティとは

CSSのopacityプロパティは、要素を半透明(シースルー)にするためのプロパティです。

opacityプロパティの値は0から1の範囲で指定します。値が小さいほど要素はより透明になります。つまり、0を指定すると要素は完全に透明になり、1を指定すると通常どおり表示されます。

以下が、CSSのopacityプロパティの基本構文です。

img { opacity: 0.5; }

この例では、Webページ上のすべてのimg要素の不透明度が0.5に設定されます。つまり、すべての画像がデフォルトの状態より50%透明に表示されることになります。

なお、opacityプロパティは親要素だけでなく、その中に含まれる子要素にも適用される点に注意が必要です。たとえば、テキストを含むボックスにopacityを適用すると、ボックス自体もテキストも一緒に透明になってしまいます。

構文がわかったところで、次に実際の使用例をいくつか見ていきましょう。

画像を透明にする方法

画像を透過させて表示したいWebサイトをデザインしているとしましょう。このような場合は、CSSのopacityプロパティで簡単に実現できます。

以下は、opacityを使って画像の不透明度を0.7(70%不透明)に設定する例です。

img {
	opacity: 0.7;
}

コードの実行結果:

左側は不透明度を指定していない画像のため、まったく透明ではありません。右側はopacityを0.7に設定した画像で、左側の画像よりも透明に表示されています。

ホバー時にopacityを変化させる方法

opacityプロパティを使っていると、「ユーザーが画像にカーソルを合わせたとき(hover時)に、画像の透明度を変化させたい」という場面が出てきます。

このような場合は、CSSの:hoverセレクターをopacityプロパティと組み合わせることで、ホバー時の透明度を変更できます。

たとえば、デフォルトでは画像を50%透明(opacity: 0.5)にしておき、ユーザーが画像にホバーしたときにはopacityを1にして完全に表示させたいとします。この場合、次のようなコードで実現できます。

.img {
  opacity: 0.5;
}

.img:hover {
  opacity: 1;
}

コードの実行結果:

左側はユーザーが要素にカーソルを合わせている状態の画像、右側はカーソルを合わせていない状態の画像です。

デフォルトでは画像は50%透明ですが、ユーザーが画像にホバーするとopacityが1に設定され、画像が完全に表示されます。この手法は、ギャラリーやサムネイルの一覧表示などによく使われています。

ボックスを透明にする方法

opacityプロパティは、ボックス(div要素など)を透明にすることにも利用できます。

ただし、前述のとおり、opacityプロパティで要素を透明にすると、その要素内のすべての子要素にも同じ透明度が適用されるので注意してください。

ここで、2つの<div>要素で作られたボックスがあるとします。一方は通常どおり表示し、もう一方は50%透明にしたい場合、次のようなコードを使用します。

.div1 {
  background-color: #B5651D;
  opacity: 0.5;
  text-align: center;
  padding: 20px;
  color: black;
}

コードの実行結果:

この例では2つのボックスを作成しています。上のボックスは下のボックスと同じスタイルですが、opacityは指定していません。下のボックスはopacityが0.5に設定されているため、50%透明に表示されます。

ご覧のとおり、下のボックス内のテキストも一緒に薄くなっています。これは、<div>ボックス内のすべての要素が、指定された透明度の値を継承するためです。

RGBAカラーで背景だけを透明にする方法

これまでの例では、opacityプロパティを使って要素の透明度を変更してきました。しかし、要素を透明にする方法はもうひとつあります。それが、RGBAカラーバリューを使って背景色を指定する方法です。

色を扱う際、一般的にはRGBでカラーバリューを指定します。RGBに加えてアルファ値(A)を含めたRGBA形式を指定すると、その色の不透明度を設定できます。

この方法が便利なのは、要素の背景色だけに透明度を適用できる点です。RGBAを使えば、その要素内にある子要素(テキストなど)には影響を与えません。これは、opacityプロパティが子要素も含めた要素全体に適用されるのとは対照的な動作です。

先ほどの茶色いボックスの例を見てみましょう。ボックス自体は70%透明にしたいけれど、ボックス内のテキストはそのまま表示したい場合は、次のようなコードを使います。

.div1 {
  text-align: center;
  padding: 20px;
  color: black;
  background: rgba(181, 101, 29, 0.3);
}

コードの実行結果:

コードで指定しているアルファ値は0.3です。これは、値が小さいほど要素がより透明になるためで、0.3の不透明度は「要素が70%透明」であることを意味します。また、この例ではテキストの色を黒に設定しています。

上のボックスはopacityを指定していない<div>の例です。下のボックスはrgba()バリューを使って不透明度を0.3に設定しています。ご覧のとおり、下のボックスは上のボックスよりも大幅に透明になっています。

しかし、ボックスの内容である「This is a box」というテキストは、まったく透明になっていません。これは、ボックスの背景色のみを透明に設定したためです。

まとめ

CSSのopacityプロパティは、Webページ上の要素の透明度を設定するために使用されるプロパティです。

この記事では、コード例を交えながら、opacityプロパティを使って画像やボックスの透明度を変更する方法を解説しました。さらに、:hoverセレクターとの組み合わせによるインタラクティブな透明度の変化や、RGBAカラーを使って背景だけを透明にするテクニックについても紹介しました。

これで、あなたもopacityプロパティをプロのように使いこなす準備が整いました。ぜひ実際のプロジェクトで試してみてください。