【opacity】要素の透明度を変えるプロパティ【CSS】

チャッピー

こういうボタンやリンクにカーソルが乗ると色が薄くなるやつってどうやるの？(語彙力)

ボタン

こばゆた

opacityというプロパティを使うんだよ

今回の内容

1.opacityの使い方
2.rgbaとの違い
3.まとめ

1.opacityの使い方

opacityは要素の透明度を変えたい時に使い、値は０から１で指定し、０に近づくほど透明になります。

セレクター{
  opacity: 値;
}

0.2

0.6

0.8

/*左から*/
.buttonA{
  opacity: 0.2;
}

.buttonB{
  opacity: 0.6;
}

.buttonC{
  opacity: 0.8;
}

.buttonD{
  opacity: 1;
}

ちなみにコンマの前の０は省略できます。

こばゆた

最初に言ってたボタンはカーソルが乗った時にopacityプロパティが適用される様にすれば完成だよ！

きなこ

カーソルが乗った時のアクションを作るのは:hoverだったね

<div class="button">ボタン</div>

.button{
  font-size: 1em;
  padding: 0.5em 1em;
  border: 1px solid #ddd;
  background-color: pink;
  display: inline-block;
  cursor: pointer;
  border-radius: 6px;
  text-align: center;
}

.button:hover{
  opacity: .6;
}

チャッピー

おー！これでできそうだ

2.rgbaとの違い

似た様なことができるものに色の設定の時に出てきたrgba( )というものがありました。

結論から先に言うと…

opacityが要素全体に適用されるのに対し、rgbaを使うと指定した部分の色の透明度を変える事ができます

/*左から*/
.buttonA{
  background-color: rgba(252, 192, 203, 0.2);
}

.buttonB{
  background-color: rgba(252, 192, 203, 0.6);
}

.buttonC{
  background-color: rgba(252, 192, 203, 0.8);
}

.buttonD{
  background-color: rgba(252, 192, 203, 1);
}

0.2

0.6

0.8

見てわかる通りこちらはopacityと異なり、文字の透明度はそのままで背景だけ透明度が下がっているのがわかります。

こばゆた

こちらのパターンも使う機会があると思います！

状況に応じて使い分けましょう

3.まとめ

opacityまとめ

opacityを使うと要素の透明度を変える事ができる
値は０から１で指定し、０に近づくほど透明になる
コンマの前の０は省略できる

セレクター{
  opacity: 値;
}

opacityが要素全体に適用されるのに対し、rgbaを使うと指定した部分の色の透明度を変える事ができる

box

opacity

rgba

リセット