IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
CSS3リファレンス
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > CSS3リファレンス > > rgbaの解説
  カテゴリ別さくいん
  タグ別さくいん

rgbaの解説

RGBAカラーの指定を指定するには?

値の書式

rgba(【赤】, 【緑】, 【青】, 【不透明度】 )

対応ブラウザ

  • IE 9:○
  • Firefox 10.0:○
  • Opera 11.61:○
  • Chrome 17.0:○
  • Safari 5.1:○

    ※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
    ブラウザWindows 7上で動作確認を行っています。
    ユーザーの設定より、異なる挙動をする場合があります。

引数一覧

引数内容
指定する色の赤色の成分を指定します。値として0から255の整数か、0%から100%のパーセント値が使用できます。
指定する色の緑色の成分を指定します。使用できる値は赤と同じです。
指定する色の青色の成分を指定します。使用できる値は赤と同じです。
不透明度指定する色の透明・不透明の度合いを指定します。
0から1.0の実数値で指定し、0で完全に透明になり、1.0で完全に不透明になります。

解説文

プロパティの値として色を指定するにはいくつか方法がありますが、rgba()を使用すると、赤、緑、青、不透明度の各要素を表す数値によって、色指定を行うことができます。

赤、緑、青の各要素は、0から255までの整数か、0%から100%までのパーセント値で指定します。

なお、赤、緑、青の部分の指定では、「整数による指定」か「パーセント値による指定」か、どちらか一方の指定方法で統一する必要があります。一度の指定のなかで、二つの指定方法を混ぜることはできません。

不透明度はアルファ値ともいい、0から1.0までの実数値で指定します。0が透明で、1.0が完全に不透明です。

rgb()による指定との相違点は、16進表記による指定が使用できないということです。

たとえば以下のように指定すると、完全に不透明な赤を指定したことになります。

rgba(255,0,0,1)

サンプルソース

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <style>
 div.box{
     width:100px;
     height:100px;
     position:absolute;
     text-align:center;
 }
 div#box1 {
     left:10px;
     top:10px;
     background-color:rgba(100%,0%,0%,1); /* 完全に不透明な赤 */
 }
 div#box2 {
     left:100px;
     top:100px;
     background-color:rgba(120,0,120,0.5);/* 半透明の紫 */
 }
 div#box3 {
     left:190px;
     top:190px;
     background-color:rgba(0%,0%,0%,0.1);/* 透明な黒 */
 }
 </style>
 </head>
 <body>
 
 <div id="box1" class="box">完全に不透明な赤</div>
 <div id="box2" class="box">半透明の紫</div>
 <div id="box3" class="box">透明な黒</div>
 
 </body>
 </html>

関連項目

(関連項目はありません)




AQUOS RAQUOS R
シャープのスマートフォン「AQUOS」シリーズのフラグシップモデルの呼称。
LAVIE Note MobileLAVIE Note Mobile
NECが販売するモバイルノートPCのシリーズ。
Galaxy S8 PlusGalaxy S8 Plus
スマートフォン「Galaxy S8」の大画面モデル。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2017年4月27日現在
ランキング1   ICT (用語辞典)
ランキング2   セグメント (用語辞典)
ランキング3   リーンスタートアップ  (用語辞典)
ランキング4   スワイプ  (用語辞典)
ランキング5   ライトバック  (用語辞典)
ランキング6   コンテキスト  (用語辞典)
ランキング7   バリデーション  (用語辞典)
ランキング8   オムニチャネル  (用語辞典)
ランキング9   フラッグシップモデル  (用語辞典)
ランキング10   アクティビティ  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについてウェブリオ株式会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2012 Weblio, Inc. All rights reserved.