チャッピー
こういうボタンやリンクにカーソルが乗ると色が薄くなるやつってどうやるの？(語彙力)
こばゆた
opacityというプロパティを使うんだよ
1.opacityの使い方
opacityは要素の透明度を変えたい時に使い、値は０から１で指定し、０に近づくほど透明になります。
セレクター{
opacity: 値;
}/*左から*/
.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);
}見てわかる通りこちらはopacityと異なり、文字の透明度はそのままで背景だけ透明度が下がっているのがわかります。
こばゆた
こちらのパターンも使う機会があると思います！
状況に応じて使い分けましょう
3.まとめ
opacityまとめ
- opacityを使うと要素の透明度を変える事ができる
- 値は０から１で指定し、０に近づくほど透明になる
- コンマの前の０は省略できる
セレクター{
opacity: 値;
}- opacityが要素全体に適用されるのに対し、rgbaを使うと指定した部分の色の透明度を変える事ができる
box
opacity
rgba
リセット
コメント