background-colorのrgbaを使った
背景色の透過処理のやり方を覚えておこう

Webデザイン案を見てコーディングしようと思ったとき、デザイナーによっては画像の上にテキストを配置して、そのテキストに透過した背景色を設定したデザインを多用されるデザイナーの方がいます。

この時、背景色の透過の仕方を知っていないとコーディングすることができなくなってしまう…なんてことになりかねませんので、今回は改めて、background-color: rgba()の使い方をしっかりとおさらい含めて見ておきたいと思います。

よく勘違いされやすいopacityとの違い、どういうデザインの時に使われやすいのかなども合わせて紹介しておきたいと思います。

背景色の透過はbackground-color:rgba();を使用

通常のcssでは背景色を指定する時、

.background01{
  background-color: #000;
}

といったように、カラーコードを指定するのが一般的です。透過処理をさせたい場合は、この時の指定をカラーコードではなく、rgba指定に変えるだけで透過処理は完了します。

.background02{
  background-color: rgba( 0, 0, 0, 0.3 );
}

これだけで、透過処理が完了します。

デモページ

RGBAについておさらい

今更感がありますが、RGBAについて簡単におさらいしておくと

• R：レッド（赤）
• G：グリーン（緑）
• B：ブルー（青）
• A：アルファ（透明度）

を指定するもになります。
Photoshopなどのデザインツールを使っていれば馴染みもあるかと思いますが、それぞれ、RGBの3色に関しては、0～255までの値、Aの透明度は、0～1.0までの値で指定することになります。

同じ透過のopacityとの違い

cssで透過というとopacityを思い浮かべる方も多いかもしれません。
では、このopacityとは何が違うのか？というと、opacityは全てを透過してしまいます。

一方で、background-color: rgba()であれば、背景色のみ透過処理をする事が可能になります。これもデモを見た方が早いかもしれません。

デモページ

opacityを設定した方は、文字の色も薄くなってしまっているのがわかります。一方、先ほどのbackground-color: rgba()で指定した方は、背景色のみが薄くなっています。

ただ背景色を透過させる使い方はあまり意味がない

たまに他の解説記事などを見ていると、ここを書いていない方も多いのですが、ただ背景をそのまま透過処理をして書いたところで、正直なところその背景色が薄くなるだけで、薄いカラーコードを指定するのと変わりはありません。

.background03{
  background-color: #7f7f7f;
}

.background03_2{
  background-color: rgba( 0,0,0,0.5);
}

これは実際に見てみればわかりますが、この使い方であれば全く同じ色になります。

デモページ

後述しますが、この背景色を透過処理させる意味というか本領を発揮するのは、画像の上にテキストを載せて、そのテキストに背景色を付けて透過処理などをさせる時になります。

画像などと合わせて使うとより効果が出やすい

rgbaを透過処理する場合、先ほどのデモのようにただそれ単体で使ってもあまり意味はありません。実際のコーディング現場として使うシーンとしては、背景画像などの上に文字を載せるときによく使われたりします。

画像と合わせて使うことで、画像の上に載せる文字の背景色の帯が透過されてデザイン性が上がるように見せられます。実際、当裏方ワークスのブログでも、エントリー一覧のカテゴリ表示の枠などは、ほんの少しだけですがこの透過処理を使っています。

これも、実際にデモを見た方がわかりやすいかと思いますので、下記を参考にしてみてください。

デモページ

このように、画像の上に載せるテキストなどに背景色を付ける際、透過処理を施す事で見た目が段違いに良くなりますし、こういう使い方の時にそれぞれの違いが顕著に出てくることになります。

この画像の上にテキストを載せつつ、テキストに背景を施すというのは割とサイトのメインビジュアルなどのデザインでも使われる使い方になっていますので、しっかりと使い方を覚えておくようにしましょう。

rgbaに変換したい時はどうすれば良いか

rgbaを使えば透過は簡単にできるというのは分かったものの、普段はカラーコードを使っているので、このカラーコードをrgbaに置き換えたいとなったとき、どうすれば良いかというのも最後にまとめておきます。

結論だけを言えば、Photoshopなどのデザイン系ツールを使えばわかるのですが、カラーコード自体がわかっているのであれば、外部ツールを使えば簡単にカラーコードをrgbaの数値に変換してくれます。

カラーコード変換ツール

こういったツールを使う事で、簡単に今使っているカラーコードをRGBAのコードに変換してくれますのし、「カラーコード 変換」などで調べれば、多種多様なツールが今では公開されているので、自分にあった使いやすいツールを見つけてそれを使って行くのが良いのではないかと思います。

まとめ

背景の透過処理についてですが、昔であれば画像でやらなければいけなかったような事も今では簡単にcssだけで処理できるようになり、使い方も簡単で普段、カラーコードで指定しているものを、background-color: rgba();で指定するだけのお手軽です。

特に背景画像の上に載せるテキストの背景を透過処理するという方法は実際のコーディング関連でもよく頻繁に使われるかと思いますし、しっかりと使い方を覚えておきましょう。