今回は、テキストやブロック全体の要素をrgbaやopacityを使って、
薄く（透明度を）にする方法をご紹介します。
rgbaとopacityを使ってテキストやブロック全体を薄く（透明）する方法
テキスト要素を薄くするrgba
それでは、rgbaでテキスト要素を薄く（透明度）する方法を解説していきます。
百聞は一見にしかずということで、
さっそく使用例からご覧ください。
See the Pen yLOEEXY by ryu (@ryu-no-sss) on CodePen.
このように、rgbaの（0、0、0、〜）の『〜』の箇所で、透明度を変更します。
値は、0〜1の間で、0に近づくほど薄くなります。
ここで、rgbaの単語の解説をさせていただきます。
rgbaは、
r・・・レッド
g・・・グリーン
b・・・ブルー
a・・・透明度
の頭文字を取った単語です。
なので、rgba(0,0,0,1)のカッコ内の数字は、
1つ目・・・赤色の値（0〜255）
2つ目・・・緑色の値（0〜255）
3つ目・・・青色の値（0〜255）
4つ目・・・透明度の値（0〜1）
になります。
※（0〜255）は、記載できる最小値〜最大値になります。
なので、rgbaで色を設定する場合は、
絵具のように、rgbの数値を調整し、
自分の表現したい色を作りましょう！
ブロック全体を薄くするopacity
続いては、テキスト要素だけでなく、ブロック全体の透明度を調整するopacityについての解説をしていきます。
まずは、以下の使用例をご覧ください。
See the Pen rNeKrxp by ryu (@ryu-no-sss) on CodePen.
このように、opacityを使うと、ブロック全体の要素の透明度を調整することが出来ます。
透明度の値は、rgbaと同様に、
0〜1の間で、調整します。
使用例では、2番目を『0.5』3番目を『0.1』に設定しています。
まとめ
・テキスト要素のみ透明度を下げる場合、rgbaを使う
・テキスト要素を含めたブロック全体の透明度を下げる場合、opacityを使う。
今回は、CSSでテキストやブロック全体を薄く（透明度）する方法について解説しました。
他にも、実戦でよく使うテキスト要素に対するCSSコードを、以下のリンクの記事にまとめていますので、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
