【CSS】2種類の透明度「rgba」と「opacity」の違いについて
このまま学習を続けて、本当に実務で通用するのか不安な方へ。
そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。
さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
CSSで透明度を表す「rgba」と「opacity」の違いについて解説していきます。
両者はともに透明度を設定することができますが、透明になる対象の要素が異なりますのでそれぞれの特徴と違いについて解説します。
目次
1. 「rgba」と「opacity」の違いについて
「rgba」が指定した色を透過させるのに対し、「opacity」は要素全体（ボーダーや背景、子要素を含む全ての要素）が透過されます。
2. rgba
指定した色を透過させることができます。「カラー（rgb）」と「透明度（a）」の2つを設定して表現します。透明度は0~1の数値が指定でき、数字が小さいほど透明度が高くなります。
■「rgba」で透明度の設定を行った場合
背景だけが透過されて中のテキストは透過されません。
＜元の要素＞
background-color: rgb(0, 153, 255);
＜rgbaを設定した要素＞
background-color: rgba(0, 153, 255, 0.5);
3. opacity
指定した要素全体を透過させることができます。（指定した要素のボーダーや背景だけでなく子要素を含む全ての要素が透過されます。）透明度は0~1の数値が指定でき、数字が小さいほど透明度が高くなります。
■「opacity」で透明度の設定を行った場合
背景と中のテキストの両方が透過されます。
＜元の要素＞
background-color: rgb(0, 153, 255);
＜opacityを設定した要素＞
opacity: 0.5;
4. まとめ
CSSで設定できる2種類の透明度「rgba」と「opacity」の違いについて解説してきました。
「rgba」が指定した色を透過させるのに対し、「opacity」は要素全体（ボーダーや背景、子要素を含む全ての要素）が透過されます。
両者は透明になる対象が異なりますので、用途に応じて使い分けましょう！
あなたのコーディング力、実務で通用しますか？
以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。
- 模写はできるようになってきたけど、実務に通用するか不安
- ポートフォリオに悩んでいる・載せる実績がない
- 案件に挑戦したいけど、自信がなくて一歩踏み出せない
今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
コーディングを仕事にしていきたい方へ
Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。
- ポートフォリオに載せる実績がない・・・
- 実務経験がゼロ・・・
- 案件獲得に不安がある・・・
1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。
