HTML の 要素 の 透過率 を 設定する

目的

• HTMLファイルの要素の透過率を設定する方法をまとめる。

押さえるポイント

• 透過率を変更する方法はopacityとrgbaの2種類が存在する
• opacityはプロパティとして透過率を設定する→要素に記載されているテキストまで透過させてしまう
• rgbaは色のカラーコードのように背景色を設定するついでに透過率を設定する→要素に記載されている文字は透過させない

opacityの書き方の例(テキストも透過させてしまう)

• 透過率は0.0～1.0の数字で指定する
• 0.0が透明
• 1.0が不透明
• 下記にCSSファイルの内容を記載する。

要素の名前かクラス名 {
  opacity: 0.0～1.0の数字で指定;
}

opacityのより具体的な例

• h1要素の透過率を0.5に設定する。
• 背景色は既に黒となっている。
• 下記にHTMLファイルの内容を記載する。

<h1>おはようございます。</h1>

• 下記にCSSファイルの内容を記載する。

h1 {
  opacity: 0.5;
}

rgbaの書き方の例(テキストを透過させない)

• 透過率は0.0～1.0の数字で指定する
• 0.0が透明
• 1.0が不透明
• background-colorプロパティ色指定方法などでrgbaで指定する(r:red g:green b:blue a:alphaの略) ※rgbでの色指定は赤、緑、青(色の三原色)の割合(1～255)を用いて色を指定する方法である ※カラーコードは16進数で色を設定する ※rgbは10進数で色を設定する ※カラーコードの16進数はrgb値を元に作られている

要素の名前かクラス名 {
  background-color: rgba(1～255の赤の割合, 1～255の緑の割合, 1～255の青の割合, 0.0～1.0の透過率);

rgbaのより具体的な例

• h1要素の透過率を0.5に設定する。
• 背景色を黒に設定する。
• 下記にHTMLファイルの内容を記載する。

<h1>おはようございます。</h1>

• 下記にCSSファイルの内容を記載する。

h1 {
  background-color: rgba(255, 255, 255, 0.5);
}