CSSで色・透明度を指定するrgbaプロパティの概要・使い方を徹底解説!

色・透明度を指定する rgbaプロパティの使い方

皆さんは、CSSで色を指定するrgbaプロパティを使ったことがありますか? ただ色を指定するだけでなく透明度も指定できるため、使い方を覚えておくと便利です!

そこで今回は、

  • CSSで色・透明度を指定するrgbaプロパティとは?
  • rgbaプロパティの使い方・サンプルコード


といった基礎的なことから、

  • 透明度を指定するopacityとrgbaプロパティの違いとは?
  • rgbaプロパティのブラウザサポート状況


といった応用的な方法まで、徹底的に解説します!

CSSで色・透明度を指定するrgbaプロパティとは?

最初に、rgbaプロパティについて簡単に解説します。rgbaプロパティとは、CSS3で新たに追加された、「色・透明度」を指定するプロパティです。

rgbaプロパティを使った色・透明度指定のイメージ:

色のみだと固い表現になってしまいますが、透明度を意識するだけでぐっと見やすさが上がるため、使いこなすとても便利です!

rgbaプロパティの使い方・サンプルコード

次に、rgbaプロパティの使い方について解説します。rgbaプロパティは、次のように使います。

使い方:

backgroud-color(またはcolor):rgba(赤 , 緑 , 青 , 透明度)

赤・緑・青には0 ~ 255までの数値を指定し、透明度には0 ~ 1までの数値を指定します。透明度は0が0%、0.5が50%、1が100%で数字が小さいほど透明度が高いです。

言葉だけではわかりづらいため、簡単なサンプルコードを用意しました。

サンプルコード - HTML:

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>rgbaサンプル</title>

        <link rel="stylesheet" href="main2.css">
    </head>

    <body>
        <h2>rgbaサンプル</h2>
        <div class="main-block">
            <div class="rgba-1">100%</div>
            <div class="rgba-2">50%</div>
            <div class="rgba-3">20%</div>
        </div>
    </body>

</html>

サンプルコード - CSS:

/* ブロック全体のデザイン */
div{
    width:auto;
    height:20px;
}

/* 上のブロック (100%) のデザイン */
.rgba-1{
    background-color:rgba(255,0,0,1);
}

/* 真ん中のブロック (50%) のデザイン */
.rgba-2{
    background-color:rgba(255,0,0,0.5);

}

/* 下のブロック (20%) のデザイン */
.rgba-3{
    background-color:rgba(255,0,0,0.2);
}

実行結果:

このように、簡単に色・透明度を指定することができます。

rgbaの色・透明度はジェネレータを使ってコピペでOK

ここまでrgbaプロパティの色・透明度について解説してきましたが、イメージした透明度の数値を調べるのは結構大変です。

そんな時におすすめなのが、rgbaジェネレーターです。

以下のrgbaジェネレーターはメインの色を指定するだけで、10段階にわけた透明度を自動で作成してくれます。

作成イメージ:

色を決めたらジェネレーターを使って視覚的に確認しつつ、適した透明度のrgba値を選べばOKです!

rgbaプロパティの使い方とあわせて、覚えておくのがおすすめです!

透明度を指定するopatityとrgbaプロパティの違いとは?

ここまでrgbaプロパティで透明度も指定できることをお伝えしてきましたが、、、CSSには透明度を指定するopatityプロパティがあります。

こう聞くと、「rgbaプロパティとopatityプロパティは、どうやって使い分ければいいんだろう?」と思う方も結構いるので、簡単に違いについて解説しますね。

「rgbaプロパティ」と「opatityプロパティ」は大きく分けて、次の2つの違いがあります。

  • 画像の透明度指定ができるか
  • 透明度が影響する範囲

rgbaプロパティは色を指定することが前提のプロパティのため、画像に透明度を指定するときには使えません。そのため、画像に透明度を指定したい場合は、opatityプロパティを使います。

また、親要素・子要素がある入れ子の要素に対して透明度を指定する場合、少し動きが変わります。親要素・子要素がある場合、rgbaプロパティを使うと親要素にしか透明度が指定されません。

そのため、親要素・子要素に透明度を指定したい場合は、opatityプロパティを使います。

1つの要素で色を透明にしたいときのみrgbaプロパティを使い、それ以外はopatityプロパティを使う」と覚えておけばOKです!

rgbaプロパティのブラウザサポート状況

最後に、rgbaプロパティのブラウザサポート状況について解説します。

2018年1月21日時点で、対応しているバージョンについてまとめました。

  • Chrome:1.0以上
  • IE:9.0以上
  • FireFox:3.0以上
  • Safari:3.1以上
  • Opera:10.0以上

参考:w3schools.com CSS rgba() Function

最新バージョンではどのブラウザでも対応できますが、古いバージョンで動くことを前提としたアプリを作るときは、注意が必要です。

まとめ

今回は、CSSで色・透明度を指定するrgbaプロパティの概要・使い方について解説しました。

透明度を意識した色を使うケースは、よくあります。

使い方もとても簡単なので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説