2015どうも、僕です。最近CSSの記事ばかり書いているので、そろそろWordpress系の記事とかSEOなどのマーケティング関係の記事を書かなければなーと思ってます。※SEOとかWordpress関係の記事は上位表示が難しいので、書くのには気合がいるんですよね。CSSで背景などを透明にするときにOpacityとかRGBaを使用すると思いますが、今回はそこの使い方と違いについて解説していきます。対応ブラウザCSS3のプロパティなので主要ブラウザの最新版では動作します。IE9より古いものはopacityをサポートしていないので、代わりにfilterのalpha(opacity=)を使用してください。使用方法と例からOpacity不透明度を表すもので、指定できる値は0〜1の間です。※小数点以下「0.25」とかも指定可能。}1234.hoge{background:#F50;opacity:0.5;}通常Opacityご覧の通り透明度が増してますよね。指定する値が0に近ければ近いほど透明になります。ここで問題なのは文字も一緒に透明度が下がってしまう点ですね。hoverで背景だけを透明にしたいときとかは、次に説明するRGBaでの透明度を調整することをおすすめします。RGBaRGBカラーモデル(Red,Green,Blue)にalphaが加わった色指定際に使用できるものです。}1234.hoge2{background:rgba(255,85,0,0.5);}通常RGBaalphaの指定できる値はopacityと同じ0〜1までの間で、前の3つの数字はそれぞれ赤、緑、青を表しています。このRGBaで指定することによってbackgroundだけの透明度を操ることができるので非常に便利です。プロパティと値の違いはわかりますよね?color:#000;のようなコードの場合、colorがプロパティ、#000が値になります。OpacityとRGBaの使い分けOpacity・画像を透明にする場合RGBa・色を透明にする場合background,colorなどの色を指定できるところにはRGBaが使用できるのでその色だけを透明にできます。まとめ今回はすこし短いですが、要素を透明にする際にどっちが適しているかがわかっていただければ嬉しいです。rgbaだとあれこの色のコードなんだっけとなることがありますが、そこはどこかにメモってコメントアウトするなりしてください。※慣れると自分で大体の色を調節できるようになります。よろしければシェアをお願いします。デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。@De_webdesign関連記事WordPressにプラグインなしでSNSのシェアボタンを設置してみました。YamashitaTop。