はじめに
HTML＆CSS入門講座の第二十三弾として、【CSS】 opacityやrgba 使い方、子要素への影響、transition、transform、アニメーションでの利用なども解説について紹介します。
この記事を読むと次の疑問について知ることができます。
- opacityとは？
- rgbaとは？
- opacityやrgbaの違いは何があるの？
- opacityを使った文字や画像と背景色の変化はどうなるの？
・文字の場合
・画像の場合 - rgbaを使った文字と背景色の変化はどうなるの？
・文字の場合
・画像の場合 - hoverを使ったopacityやrgbaの例とはどのようなもの？
- hover時にtransitionを使って変化を調節
- hover時にtransitionとtransformを使って回転や拡大の変化
- アニメーション（@keyframes）でtransform、opacityを利用とはどのよなもの？
opacityとは？
opacityは、英語の翻訳は不透明度となりますが、cssで使うopacityは、HTML内で書かれた要素を不透明から透明に色々の不透明度を設定することのできるプロパティです。
opacityの書き方は、次のようになります。
rgbaとは？
文字、背景などの色を指定するときの1つの指定方法で色の三原色で表現するR（赤）、G（緑）、B（黒）の数値と透明度（A：Alpha）を入れたものがrgba色表現形式になります。
rgbaの書き方は、次のようになります。
opacityやrgbaの違いは何があるの？
opacityは、HTMLの要素すべてに適用でき、親要素に設定したopacityは、その子要素、孫要素にも適用されます。
一方、rgbaは指定したもののみの透明度を変化させるので、例えば、文字の書かれた背景があった場合に、片方を変化させずに、背景のみとか文字のみの透明度を変化させることができます。
opacityを使った文字や画像と背景色の変化
文字に背景を入れたものと画像に背景を入れたものを用意し、opacityで透明度を1、0.7、0.5、0.3、0.1と変化させたときにどのようになるかを見てみましょう。
rgbaを使った文字や画像と背景色の変化
文字に背景を入れたものと画像に背景を入れたものを用意し、rgbaで背景色を1、0.7、0.5、0.3、0.1と変化させたときにどのようになるかを見てみましょう。
hoverを使ったopacityやrgbaの例
マウスカーソルを画像に合わせた時(hover）に、一つはopacityで画像の透明度を（１→0.5）にしたものと、画像の背景画の透明度を（1→0）に変えてみました。
どのような変化がみられるか。Resultタブの画像にマウスカーソルを当ててみてください。
hover時にtransitionを使って変化を調節
前の画像では、マウスを合わせた瞬間に変化しましたが、ここでは、transitionを使うと変化の調節が可能となります。
マウスカーソルを画像に合わせた時(hover）に、一つはopacityで画像の透明度を（１→0.3）に5秒かけて変化させたものと、画像の背景画の透明度を（1→0）に5秒かけ変化させてみましたので違いを確認してください。
どのような変化がみられるか。Resultタブの画像にマウスカーソルを当ててみてください。
hover時にtransitionとtransformを使って回転や拡大の変化
マウスカーソルを画像に合わせた時(hover）に、私のサイトアイコンを最初に透明度(opacity：0.3）から3秒かけて回転や拡大して最終的に透明度(opacity：1.0）に変化させてみましたので確認してください。
どのような変化がみられるか。Resultタブの画像にマウスカーソルを当ててみてください。
アニメーション（@keyframes）でtransform、opacityを利用
いろいろなcssのプロパティなどを使用しますので、ここでは、このようなこともできよ！程度で見ていただければと思います。
画像を横に移動させながら、最初が透明度0から出発して途中50％で不透明となり、100％でまた不透明となりを行ったり来たりして繰り返すアニメーションを作成しましたので見てください。
どのような変化がみられるか。Resultタブの画像にマウスカーソルを当ててみてくださいね。
おわりに
如何だったでしょうか？
opacityとは？、rgbaとは？、opacityやrgbaの違いは何があるの？、opacityを使った文字や画像と背景色の変化はどうなるの？、rgbaを使った文字と背景色の変化はどうなるの？、hoverを使ったopacityやrgbaの例とはどのようなもの？、hover時にtransitionを使って変化を調節、hover時にtransitionとtransformを使って回転や拡大の変化、アニメーション（@keyframes）でtransform、opacityを利用とはどのよなもの？などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント