読者の悩み
- CSSで画像や文字、要素を透明にしたい
- CSSで画像や文字、要素を薄くしたい
こんな悩みに答える記事になっています。
画像やラベルを少し透明にできれば、デザインの幅が広がりそうです。
画像や文字をちょっとだけ透明にしたい!というときに使うopacityというプロパティがあります。
今回は、そんなopacityについて解説していきます!
opacityの基本的な部分について3つの活用例を出しつつ解説していくので、CSS初心者でも理解しやすいと思います!
1.【CSS】opacityの使い方
opacityの使い方は簡単です。
○○{ opacity: ...; }
これだけ。
0~1の数字を入れることにより、不透明度を表します。
0が透明で、1が不透明です。
以上のように、0から1の間の値を指定することで、0.5なら50%、0.7なら70%・・・というように細かく不透明度を決めることができます。
maipyon
2.CSSのopacityの使用例
使用例をいくつか見ていきましょう!
opacityの使用例
- 画像の下側に説明を入れる
- 画像や文字などをすこし薄くする
- ホバーしたときに判別がつくようにする
画像の下側に説明を入れる
このように、画像の下に説明を入れることができます。
このような場合は、文字も透明になっているので背景色の黒色だけを透明にすべきです。
これについては後述します。
<div class="img-wrap"> <img src="画像のURL" alt="ラベル付きの画像です" width="700" height="467" /> <div class="description">伏見稲荷大社で撮った写真。人がいないところを狙って撮るのは難しかった・・・。<br>個人的にお気に入りの一枚です。</div> </div>
.img-wrap{ position: relative; } .description{ opacity: 0.6;/*透明度を設定*/ box-sizing: border-box; color: #fff; background: #000; width: 700px; height: 100px; padding: 1em; position: absolute; bottom: 5px; }
これを利用して、アイキャッチ画像の左上にラベルを付けているのはよく見かけます。
opacityで画像や文字を薄くする
先ほどのように、要素の背景色と文字の色をopacity
で透明にすることもできます。
しかしこれに関しては色をrgba形式で指定すればいいだけなので、opacity
を使う必要はありません。
ですが、画像を透明にしようと思ったらopacity
を使う必要が出てきます。
img{ opacity: 0.5; }
周りに比べてちょっと目立ちすぎる・・・なんて時に0.9
とかにすることで主張を抑えたりもできます。
opacityでホバーしたときに判別がつくようにしたい
opacity
は特にホバーしたときに使われることが多いです。
書き方は後述しますが、ホバーしたときにちょっと薄くなることでユーザは「あ、ここはクリックできるボタンだ!」と認識することができます。
マウスカーソルがホバーしたときに、少し色が薄く(透明に)なることで、「ここはクリックできる場所だ」と思わせることができます。
ホバーについては以下の記事で解説しています。
3.ホバーしたときに画像や文字を透明にする方法
:hover
を使用することで、ホバーしたときのスタイルを決めることができます。
ホバーについては、次のステップで詳しく解説をします。
今回は、コードを参考程度に見てもらえればと思います。
先ほど紹介した緑色のボタンのHTMLとCSSは以下のようになります。
<div class="btn">透明になれば押せる!と考えられる</div>
.btn{/*ボタンの形とか色とか*/ display: inline-block; background: #4caf50; border-radius: 5px; padding: 1em 2em; color: #fff; font-weight: bold; transition: 0.3s;/*0.3秒かけて薄くする*/ } .btn:hover{/*ホバーしたとき*/ opacity: 0.7;/*不透明度を70%に*/ cursor: pointer;/*マウスカードルを手のアイコンに*/ }
ホバーのときにopacity
を決めるだけでも、クリックしてほしいボタンならクリック率が上がるので、もしやっていない場所があれば何かしらの工夫をしたいところです。
maipyon
4.文字だけ・背景だけ透明にしたいとき
例にも出てきたこの画像
実は、背景の黒色だけでなく、文字も一緒に透明になってしまっています。
opacity
は要素全体を透明にするため、文字も含めて透明になります。
文字が読みにくくなるため、ラベルなどで使用するのは効果的ではありません。
背景色や文字の色を薄くするには、opacity
を使うのではなく、黒色をrgba形式で指定する方がいいです。
rgba形式については、以下の記事で詳細に説明しています!
5.CSSのopacityの使い方まとめ
今回は、要素を透明にするためのプロパティであるopacityについて解説しました!
今回紹介したラベルでopacityを使うなど、使いどころを誤って文字も一緒に見にくくなってしまった!
ということが無いように、使いどころをしっかりと考えましょう!