【デザインが進化】CSS プロパティopacityとは？使い方を簡単解説

CSSのプロパティの一つである『opacity』を知っていますか。『opacity』はデザインをグレードアップさせるために重宝するプロパティの一つです。この記事で『opacity』を理解し、使うことで更なるWebサイトのデザイン性を高めていきましょう。

結論：『opacity』は要素の透明度を変化させるプロパティである

『opacity』の主な役割として要素の透明度を変化させることが挙げられます。透明度を変化させるという言葉が難しく感じてしまうかもしれませんが、『opacity』の値を変化させることが絵の具の水の量を変化させていることと同じであると考えれば分かりやすいかもしれません。

今回は『opacity』の使い方を解説しながらCSSに記述したコードがどのように反映されるのかを詳しく解説していきます。

準備：『opacity』を指定する要素を用意する

『opacity』はプロパティであるため、それを指定するための要素がなくてはいけません。そのため、まずはその要素を用意します。

今回は簡易的な要素にするため、この部分を解説する必要はないと感じる人も多いかもしれません。

要素を作るためには『HTML』でそのための記述が必要なのですが、『HTML』について見直したい方はHTMLの使い方、書き方を初心者でも分かりやすく簡単解説で詳しく解説していますので、参考にしてみてください。

それでは今回のコードを書いていきます。

<div>
    sample
</div>

今回はheadタグ内の記述は省き、『opacity』の説明に必要な部分だけ抽出しています。

それではこのコードを使用してCSSでのプロパティ『opacity』の使い方を解説していきます。

1：『opacity』以外のプロパティ、値を指定してベースのデザインを決める

『opacity』はベースのデザインを決め、それをどれくらいの透明度で表現するのかということが基本的な使い方になります。

そのため、まずは『opacity』以外のプロパティ、値を指定してベースのデザインを決めなければなりません。

下記のコードを見てください。

div {
    width: 200px;
    padding: 100px 0;
    background-color: red;
}

上記のコードの部分は任意のコードを記述していただいて構いません。そのため、ここからは上記のデザインからCSSに『opacity』を追記することによってどのように変化していくのかを重点的に解説していきます。

2：『opacity』は『0～1』の間で値を指定する

『opacity』の値は『0～1』の間で値を指定することでベースのデザインを変化させることが出来ます。

今回は値が遷移する毎にどのような変化があるのかをそれぞれ解説していきます。

2－1：opacity: 1;

まずは『opacity: 1;』の場合を解説をしていきます。

div {
    width: 200px;
    padding: 100px 0;
    background-color: red;
    opacity: 1;
}

『opacity: 1;』の場合は全く透明化しないことを意味するため、先ほど掲載した画像と何も変化がありません。

これまでの解説から予想がつくかもしれませんが、『opacity: 1;』から『opacity: 0;』に向けて徐々に透明化されていきます。それを意識しながらここからの解説を読み進めてみてください。

2－2：opacity: 0.5;

次に『opacity: 0.5;』の場合を解説をしていきます。

div {
    width: 200px;
    padding: 100px 0;
    background-color: red;
    opacity: 0.5;
}

先述した『opacity: 1;』に比べて、全体の色が薄くなっていることが分かると思います。

このように『opacity: 1;』から『opacity: 0.5;』に『opacity』の値を0に近づけると、ベースのデザインから色が透明になっていくのが『opacity』の役割となっています。

それでは『opacity: 0;』ではどうなるのかを解説していきます。

2－3：opacity: 0;

最後に『opacity: 0;』の場合を解説をしていきます。

div {
    width: 200px;
    padding: 100px 0;
    background-color: pink;
    opacity: 0;
}

この『opacity: 0;』の場合は画像を用意していませんが、『opacity: 0;』を指定すると、全てのデザインが透明化され、何も表示されなくなります。

これを使用することは数多くありませんが、これまでの『opacity』の値と今回の完全に透明化されたデザインを比較することで『opacity』についての理解を深めてみてください。

応用：hover時にプロパティ『opacity』を反映させる

『opacity』はベースのデザインのタグ、クラスに指定するという使用方法ではなく、hover時に使用するといった用途が頻度として高くなっています。ここではその方法を解説していきます。

『hover』について詳しく知りたい方は疑似クラス『hover』の使い方を完全解説で詳しく解説していますので、参考にしてみてください。

それではhover時のコードについて解説していきます。

div {
    width: 200px;
    padding: 100px 0;
    background-color: red;
}

div:hover {
    opacity: 0.5;
}

ベースのデザインは最初にサンプルとして掲載したデザインをそのまま使用しました。そしてhover時にはそれに『opacity: 0.5;』を指定しました。

このようにhover時に色を薄く変化させることでユーザーがそこにカーソルが重なっていることが視覚的に理解しやすくなります。

この方法はサイト内のボタンを制作する際に良く用いられる手法になります。

ベースのデザインに『opacity: 0.5;』を指定し、hover時に『opacity: 1;』とすることでも先述したデザインとは感じ方が異なるボタンを制作することが出来ます。

このような薄い色を濃い色に変化させることも候補に入れながらそのボタンの用途、デザイン性を加味してボタンのデザイン性を向上させていきましょう。

今回はCSSのプロパティ『opacity』を解説していきました。『opacity』は応用で紹介したhover時などに使用することでデザイン性を向上させることが出来ます。様々なサイトでも使用されているプロパティですので、ボタンを制作する際などで活用してみてはどうでしょうか。