rgb()で透明度も。CSSの新しい色指定と使い方の例。
Contents - 目次
rgb()で透明度も指定可能に。
rgb()関数での色指定。
rgb()の新しい書き方。
- rgb(r g b)
- rgb(r g b / a)
Red（赤） Green（緑） Blue（青）
Red（赤） Green（緑） Blue（青） / Alpha（アルファ）
カンマからスペースでの区切りへ。
rgbの値はこれまで通り0〜255。区切りがカンマではなく、半角スペースになる。
透明度も一緒に。
オプションとして、スラッシュを付けると透明度も一緒に指定できる。
rgb()の使い方の例。
rgb()の使用例。
例1）
文字色を緑にしたい場合。
HTML
<p class="green">緑のテキスト</p>
CSS
.green {
color: rgb(0 255 0);
}
実際の表示。
緑のテキスト
例2）
緑の文字を半透明にしたい場合。
HTML
<p class="translucent_green">半透明の緑のテキスト</p>
CSS
.translucent_green {
color: rgb(0 255 0 / .5);
}
実際の表示。
半透明の緑のテキスト
rgb()のブラウザ対応状況。
ブラウザ対応状況。
モダンブラウザはすでに対応している模様。
参照元：“rgb()” | Can I use… Support tables for HTML5, CSS3, etc
MDNのサイトによると、従来のカンマ区切りの形式も受け入れられ、「rgba()」は「rgb()」の別名（エイリアス）になるとのこと。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。
