CSS3の使い方について解説する連載です。今回のテーマは、要素の透明度を指定するopacityプロパティです。
opacityを使うと、対象とする要素全体を透明にすることができます。一方で、一部の要素だけを透明にしたい場合もあるかと思います。そういった時の対処方法（rgba）についても、ご紹介します。
opacityの指定方法
opacityを指定する方法です。
opacity: 透明度;
透明度は、0.0から1.0までの数値で指定します。0.0で完全に透明で、1.0で完全に不透明になります。初期値は1.0（不透明）です。
指定した透明度は、要素全体に均一に反映されます。これについては、後述の注意点をご覧ください。
opacityの具体例
実際にopacityを指定した時の具体例について見ていきましょう。初期値の1.0から、順に透明度の値を下げていきましょう。
透明度 1.0（初期値）
初期値の1.0の場合は、完全に不透明となります。
opacity: 1.0;
透明度 0.8
opacity: 0.8;
透明度 0.6
opacity: 0.6;
透明度 0.4
opacity: 0.4;
透明度 0.2
opacity: 0.2;
一部だけ透明にしたい場合は？
opacityを使うと、透明度が要素全体に反映されます。上の例だと、背景色やテキスト、ボーダーなど全体が透明になっています。
ただ、これでは都合の悪い時もあります。例えば、子要素にテキストを使っている時は文字が読みにくくなってしまいますよね？
解決策としては、rgbaを使うことがおすすめ。一部の要素だけ、個別に透明度を指定することができるようになります。下記の例では、rgbaを使って背景色にだけ透明度を反映しています。
rgbaを使った場合
透明度 1.0（初期値）
background-color: rgba(0, 255, 0, 1.0);
透明度 0.8
background-color: rgba(0, 255, 0, 0.8);
透明度 0.6
background-color: rgba(0, 255, 0, 0.6);
透明度 0.4
background-color: rgba(0, 255, 0, 0.4);
透明度 0.2
background-color: rgba(0, 255, 0, 0.2);
あとがき
CSS3のopacityについて解説しました。opacityは使いどころが多いプロパティです。例えば、ボタンにホバー（:hover）した時に透明度を指定してエフェクトとして使うことも可能です。状況によってrgbaと使い分けながら、うまく利用していきましょう。