記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【CSS透過】文字・画像・背景色を透過させる方法(サンプルコード付き)

CSSで画像や文字、背景色を透過させる方法を解説。
「opacityとは?」「rgbaとは?」の基礎知識はもちろんのこと、「opacity」「rgba」を使い実践的に透過をする事ができ、webページをより華やかにする事ができます。
全てサンプルコードが付いているので、実際に手を動かして学ぶことができます。

カテゴリ: HTML/CSS

こんにちは!
「画像や文字、背景色を透明にするのってどうするの・・?」「opacityってなに・・?」「rgbaってなに・・?」

どのように透明を加えて良いかわからない初心者web制作者の方も多いのではないでしょうか?

透明を加える事ができれば、ボタンや画像を目立たせる事、文字や背景をオシャレな見た目にする事ができます。

今回は、初心者の方向けに、「opacity」「rgba」を使用した透過の指定方法、使い分けを中心に詳しく解説していきます。

CSSで透過をさせる方法は2種類

CSSで透過(透明)にする方法は主に2種類あります。
①opacity ②rgbaの2種類です。
この2つの違いは、ざっくりいうと、

opacityは、画像など全体的な対象に透明を指定する時に使用。
rgbaは、文字や色などの部分的な細かく分けた透明を指定する時に使用。


プロパティ・プロパティ値という観点からより詳しく違いをみてみます。

opacityはプロパティ。
rgbaはプロパティ値。
という事が大きな違いです

プロパティは何を?
プロパティ値はどのように?
を表します。

なので、opacityは、画像など全体的な対象に透明を指定する時、
rgbaは、文字や色などの部分的な細かく分けた透明を指定する時。
と使いわける事で、より用途にあった使い分けをする事ができます。

大きいくくりがopacity、細かく分けてがrgbaというイメージです。

それぞれについて解説していきます。

opacityとは

opacityとは、透過度(透明度)を指定する事ができるCSSプロパティです。

指定なし↓
指定なし
opacity指定↓
指定あり

opacityの指定方法

opacityの指定方法

セレクタで透明にしたい要素を指定。
透過度には、0-1の範囲で値を指定。

サンプルコードで値を指定

opacity0.1を指定
opacity0.1を指定↓
opacity0.1

HTMLサンプルコード

CSSサンプルコード

※解説
0.1だと透明度が10%で、かなり薄く0にすれば透明です。

opacity0.5を指定

opacity0.5↓
opacity0.5

HTMLサンプルコード

CSSサンプルコード

※解説
0.5だと透明度が50%です。

opacity1を指定

サンプルコード表示結果↓
opacity1

HTMLサンプルコード

CSSサンプルコード

※解説
1だと透明度が0%です。つまり変わっておらず最初のデフォルトの状態です。

opacityこんな場面に便利

opacityの使用で便利な場面を紹介します。
一番よく良く使われるのは、ボタン、画像にカーソルが乗った時(hover)時に透過する場面です。
理由は、ボタン、画像などを目立たせる事ができ、クリックしてもらいやすくするためです。
具体例で説明します。

押してもらいやすいボタン

カーソルが乗った時に半透明になるボタン

サンプルコード表示結果↓
Button

HTMLサンプルコード

CSSサンプルコード

※解説
カーソルが乗った時にボタンが半透明になっています。

これは、ボタンにhover(カーソルが乗った時にスタイルを変更する)を指定し、opacity: 0.5;を指定する事で、表現する事ができています。

半透明になることで、ボタンを目立たせる事ができ、よりクリックしてもらいやすいボタンを作成する事ができています。

画像の透過方法

カーソルが乗った時に、半透明になる画像

サンプルコード表示結果↓

HTMLサンプルコード

CSSサンプルコード

※解説
カーソルが乗った時に半透明になっています。
これは、画像にhover(カーソルが乗った時にスタイルを変更する)を指定し、opacity: 0.5;を指定する事で、表現する事ができています。
半透明になることで、画像を目立たせる事ができています。

マウスオーバー時0.3秒後に透過する画像

マウスオーバー時、透過されるまでの時間を指定する。
これまではマウスが乗ったらすぐに透過されていましたが、透過が始まるまでの時間を指定する事ができます。

サンプルコード表示結果↓

HTMLサンプルコード

CSSサンプルコード

※解説
マウスオーバー時、0.3s秒後(ゆっくり)透過されていいます。
img画像に、変化の時間を指定するtransitionプロパティを指定、hover時にopacityプロパティを指定する事で、実装する事ができます。

透過を使って画像を浮かび上げる

これまではマウスオーバー時に、画像が透過するでした。
最初から画像を透過させておき、マウスオーバー時に透過をやめて、画像を浮かび上るように見せます。
下記画像にマウスオーバーしてみてください。
0.3s秒後に画像が出てきます

サンプルコード表示結果↓

HTMLサンプルコード

CSSサンプルコード

※解説
最初の画像表示の段階で、透過opacity0.1を指定する。
変化の時間を指定する、transitionプロパティを指定。
hover(マウスオーバー)時にopacity1を指定し、透過を止める事で実装。

rgbaとは

rgbaとは、CSSプロパティ値で、RGBカラーモデルと言われている色の表現方法の一種です。
RED・GREEN・BLUEを混ぜることで色を表現しています。
この3色に透明度を指定する(alpha)を加え、透明を作り、alphaは0−1までの透明度の値を指定できます。


ざっくりいうと、
webをデザインする時の基本カラーは、rgbで作られている。
rgbは赤、緑、赤の3色を混ぜて数多くの色を表現している。
ここに透明(alpha)を加えて色に透明度を出している、というです。

rgbaは値なので、部分的な透明を指定するのに向いています。

rgbaの指定方法

まずrgbは三色の色を混ぜて指定します。

上記の各色に数字の数値を指定します。

rgb割合(赤の割合、緑の割合、青の割合)

rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,255,255)
rgb(0,0,0)

例えば、rgb(240, 120, 50);の配合率であればこの色になります


これに透明(alpha)0-1までの値を加えます。
上記の配合率に0.5の透明度を加えれば、rgb(240, 120, 50, 0.5);この色になります。

rgbaはプロパティ値なので文字、背景色などの部分的な指定をするのに有効です。

文字色は透明・背景色はそのまま

文字色には透明加え・背景には透明を加えない。
部分的に分けて透明を加えてみます。

サンプルコード表示結果↓

文字の透過

HTML サンプルコード

CSSサンプルコード

※解説
文章の色を指定するcolorには、rgbaを使用。
background-colorは、blackそのままに。

文字色はそのまま・背景色は透明に

文字色に透明を加えない・背景には透明を加える.
部分的に分けて透明を加えてみます。

サンプルコード表示結果↓

背景の透過

HTMLサンプルコード

CSSサンプルコード

※解説
文章の色を指定するcolorは、そのままblackに,
背景色を指定する、background-colorにはrgbaを使用。

ブラウザ対応状況

透過の指定をしても反映されない、対応していないブラウザがありますので注意してください。

透過対応ブラウザ一覧
●Google Chrome
●Safari 3.0以上
●Firefox 3.0以上
●Internet Exprore 9.0以上
●Opera 10.0以上

rgbaの数値を出すツール

rgbaの値はかなりの数があり、覚えていることや、1から調べ直すのは現実的ではありません。
そこで自動で変換してくる、カラーコード変換ツールを紹介しておきます。
こちらも参考にしてみてください。


PEKO STEP
https://www.peko-step.com/tool/alphachannel.html

TECH-UNLIMiTED
https://tech-unlimited.com/color.html

Syncer
https://syncer.jp/color-converter

まとめ

今回は、初心者の方向けに、「opacity」「rgba」を使用した透過の指定方法、使い分けを中心に詳しく解説してきました。

1.透過を指定する方法は、2種類「opacity」「rgba」

2.opacityは、画像など全体的な対象に透明を指定する時に使用

3.rgbaは、文字や色などの部分的な細かく分けた透明を指定する時に使用


透明を加える事により、ボタンや画像を目立たせる事や文字や背景をオシャレな見た目にする事ができ、より華やかなwebサイトを作成する事ができます。
今回の記事を参考にしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleアナリティクス使い倒し活用術  <AKAHON>

ダウンロード資料画像

「毎日、数値をみているけどどこをどうやって改善すれば良いのかわからない」

「Google analyticsを導入して、自社サイトのパフォーマンスを上げて欲しいといわれたけど、何をどうすればいいのかわからない」

「Web以外にも担当を兼任していて、アクセス解析に多くの時間をついやすことができない」

上記のような思いをお持ちのWeb担当者の方にはお役に立てる一冊です。

Googleアナリティクス初心者の方でも使いこなせるように、導入方法や用語、やっておきたい初期設定から具体的な活用方法まで丁寧に解説します。