)「background-colorで背景色を透明な色にするにはどうすればいいのだろう...。」そんなお悩みありませんか?この記事では、「background-colorで背景色を透明な色にする方法」と「背景色を透明な色にする場面の例」の2つを解説していきます。それではまず、背景色を透明な色にする方法を見ていきましょう。背景色を透明な色にする方法として以下の2つがあります。rgba値を設定するopacityを使うそれぞれ説明していきます。rgba値を設定するまずは、rgba値を使う方法です。下の図を見てください。背景の色が透明な色になっているのがわかります(ちなみにこれは、純粋な緑色の透明度を上げています)。先ほどの図のコードは以下のようになります。0.2);}上のように、background-colorの値のところにrgba値が書かれています。rgbaはred(赤)、green(緑)、blue(青)、alpha(アルファチャネル)の頭文字を取ったものです。透明度の数値)」と書きます。rgbの部分は0~255までの数値を入力します。rgbは光の三原則に基づいています。255)のMAX値のとき色は白になるということです。本題の透明度に関しては、rgbaのaの部分で設定をします。aは0~1までの数値で設定します。1から0に近づくほど透明になっていきます1がデフォルトの状態で、0が完全に透明な状態ということです。以上、背景色の透明度を変える方法としてrgba値の使用が挙げられるということでした。opacityを使うつづいて、「opacity」を使う方法です。opacityはCSSのプロパティです。下の図を見てください。透明度が高く、薄い色が表示されています。これは赤色の透明度を上げた色になります。先ほどの図のコード以下のようになります。0.15;}background-colorをredに設定し、opacityの値を0.15にしています。opacityも0~1までの数値を決め、0に近づくにつれて透明になっていきます。注意すべき点は、rgba値が「値」だったのに対し、opacityは「プロパティ」だということです。よってopacityは、文字を含んだ要素に使うと、背景色だけでなく文字の色もすべて透明になります。文字をふくむ要素で、かつ背景色だけを透明にしたい場合はrgba値を使いましょう。以上、色の透明度を変える方法として、CSSのopacityプロパティがあるということでした。背景色を透明にする場面の例として以下の3つをつくるときを紹介します。文字を書くブロックボタンそれぞれみていきましょう。ヘッダーヘッダーの背景色を透明にする例を見ていきましょう。下のヘッダーを簡略して描いたものを見てください。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。120px;}上のような色だとべたっとした印象になります。下のようにコードを書き換えて出力してみましょう。0.7);}背景色の透明度が上がり、やわらかでさっきよりは洗練された印象が生まれました。文字を書くブロックつづいて、文字を書くブロックをつくる場面です。セクションに関してもヘッダーと同じです。下の図を見てください。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。50px;}背景色の透明度を上げて文字を見やすくしています。透明度を指定しない場合は以下のようになります。濃い青色だったのがわかります。以上、文字を各ブロックの背景色の透明度を上げる例でした。ボタンの色つづいてボタンの色です。ここでは、ホバー時(カーソルが上にくるとき)に透明度を変えてみましょう。以下のようにボタンをつくりました。white;}このCSSに下のようなホバー時のスタイルのコードを追加します。0.8);}するとカーソルをボタンに合わせたときに下のような色になります。ボタンの色の透明度が上がり、色が少しだけ薄くなっているのがわかります。ホバーした際にボタンの色の透明度を変更するデザインはよくあるので、おさえておきましょう。(補足)画像を透明にするさいごに、派生知識として画像の透明度を変える例を紹介します。結論から言うと、opacityを使います。下の画像を見てください。270px;}この画像に対して以下のCSSを追加します。0.3;出力すると以下のようになります。画像の透明度が上がりました。画像の透明度を上げるデザインも参考にしてみてください。まとめいかがでしたでしょうか。background-colorで背景色を透明な色にする方法について理解が深まったことでしょう。色の透明度を操作できるようになるとデザインに幅を利かせることができます。透明な色だとふわっとしてオシャレな印象を与えられる可能性があります。今回の知識を実践してみてください。