CSSで色・透明度を指定する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だけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。
Webアプリ、業務アプリ開発において、要件定義、設計、インフラ、製造、テスト、運用保守など、様々な経験あり。
また、侍ブログ編集部として、これまでに200記事以上の記事を執筆。
現在はフリーランスエンジニア兼テックライターとして活動中。

おすすめコンテンツ

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

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