Webデザインopacity同様、透明度を指定するCSS3のプロパティ。background-colorなどとの併用で色と透明度を同時に指定できます。使用できるプロパティbackground-colorborder-colorcolor指定方法CSSbackground-color:rgba(赤,緑,青,透明度);1background-color:rgba(赤,緑,青,透明度);と指定します。それぞれ「赤,緑,青」は0~255で指定、透明度は0~1で指定。(0.1や0.555等)RGBaサンプル上の図はRGBaの透明度を0.1~1で10通り指定したものです。背景の色をRGBaで指定してます。背景の色をRGBaで指定してます。背景の色をRGBaで指定してます。背景の色をRGBaで指定してます。背景の色をRGBaで指定してます。背景の色をRGBaで指定してます。背景の色をRGBaで指定してます。背景の色をRGBaで指定してます。背景の色をRGBaで指定してます。背景の色をRGBaで指定してます。demo-1">背景の色をRGBaで指定してます。demo-2">背景の色をRGBaで指定してます。demo-3">背景の色をRGBaで指定してます。demo-4">背景の色をRGBaで指定してます。demo-5">背景の色をRGBaで指定してます。demo-6">背景の色をRGBaで指定してます。demo-7">背景の色をRGBaで指定してます。demo-8">背景の色をRGBaで指定してます。demo-9">背景の色をRGBaで指定してます。demo-10">背景の色をRGBaで指定してます。{background-color:rgba(0,50,100,1);}とこんな感じです。難しいことはないんですが、RGBの指定がめんどくさそうと思う方もいるかもしれませんね。赤、緑、青の絵の具を混ぜる間隔でやってみてください。demoopacityとの使い分け冒頭でチラッと出てきましたopacityとの違い。結論から言うとopacityで透明度を指定すると要素内全体にopacityがかかってしまします。よって要素内、個別に透明度を指定したい場合はRGBa、全体に透明度を指定したい場合はopacityということでいいのかな?と思います。opacityで指定してます。opacityで指定してます。opacityで指定してます。opacityで指定してます。opacityで指定してます。opacityで指定してます。opacityで指定してます。opacityで指定してます。opacityで指定してます。opacityで指定してます。demo-1">opacityで指定してます。demo-2">opacityで指定してます。demo-3">opacityで指定してます。demo-4">opacityで指定してます。demo-5">opacityで指定してます。demo-6">opacityで指定してます。demo-7">opacityで指定してます。demo-8">opacityで指定してます。demo-9">opacityで指定してます。demo-10">opacityで指定してます。opacity:1;}demoまとめ決まり文句で申し訳ありませんが、IE8以下はRGBaは利用できません。透明度もCSS3からメジャーなテクニックになってきましたが、IE8以下未対応ということでなかなか使いどころが難しいですね。その辺を考慮して無理なくご利用は計画的に。関連記事[CSS]CSSでアイコンを実装できるICONOを使ってみた。CSSだけでアイコン付けれるっていいじゃない。WEBフォントとか使わなくていいなんてステキじゃない。ノーブラの日ってサイコーじゃない。今日はそんな腐クリエイターさんたちのた...記事を読む[SnapWidget,Instagram]インスタグラムのタイムライン、ハッシュタグをWEBサイトに表示するInstagram、人気ですよね。女子とかに人気ですよねっ。ユーザーの6割は女子ですって。Bootstrap最近マイブームのフレームワークのご紹介。マイブームって・・・死語。PC、スマホ、タブレット対応のフレームワークで使いやすくてカスタマ...記事を読む[CSS]そろそろFlexboxをまとめてみるIE10のシェアも全体の1%を切ったということで、そろそろガンガンFlexbox使ってもいいかなと思ったり思わなかったり。この辺...記事を読む[スマホサイト]スマホサイトのナビゲーションを考える最近のサイトはスマホサイトあって当たり前な流れが定着してきましたが、なかなかスタンダードなデザインが見出だせなくて奮闘しております。そこ...記事を読む[CSS3]CSS3で背景画像を複数指定する!IE9以上3歩進んで2歩下がる生活スタイルがすっかり定着の下山です。マウスをカチカチやってるよりキーボードをパチパチやってるほうが好きです。(...記事を読む[CSS2]属性セレクタこの業界に両足をどっぷり突っ込んで13年、まだまだ知らないことばかりですギャフン。CSS2の属性セレクタ...記事を読む商用利用OKの無料ピクトグラム最近WEBデザインにしろペーパーデザインにしろピクトグラムを使うことが多くなりました。※オレ用に久しぶりの更新ですがな。今回はbox-shadowでよく使うものをメモっておこうと思います。