こんな悩みに答える記事になっています。
画像やラベルを少し透明にできれば、デザインの幅が広がりそうです。
前回の記事↓では、影の付け方について解説しました。
【CSS】box-shadowやdrop-shadowで要素に影を付ける方法とサンプル
CSSでbox-shadowやdrop-shadowでの影の付け方を解説します。ドロップシャドウはあまり使われませんが、覚えておくといざという時に便利。CSSで影の付け方を一気に学べる記事になっています。
今回の記事では、画像や文字を透明にできるopacityについて解説していきます！
maipyon
合わせて読みたいプログラミングスクールの10社比較ランキング【転職、副業、就職の3つの目的別】
この記事の目次
【CSS】opacityの使い方
opacityの使い方は簡単です。
○○{
opacity: ...;
}
これだけ。
0～1の数字を入れることにより、不透明度を表します。
0が透明で、1が不透明です。
以上のように、0から1の間の値を指定することで、0.5なら50%、0.7なら70%・・・というように細かく不透明度を決めることができます。
maipyon
CSSのopacityの使用例
使用例をいくつか見ていきましょう！
opacityの活用例
- 画像の下側に説明を入れる
- 画像や文字などをすこし薄くする
- ホバーしたときに判別がつくようにする
などなど・・・アイデア次第で色々な使い道があります。
【CSS】画像の下側に説明を入れる
このように、画像の下に説明を入れることができます。
このような場合は、文字も透明になっているので背景色の黒色だけを透明にすべきです。
これについては後述します。
maipyon
<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;
}
これを利用して、ブログなどでアイキャッチ画像の左上にラベルを付けているのはよく見かけます。
【CSS】opacityで画像や文字の色を薄くする
先ほどのように、要素の背景色と文字の色をopacityで透明にすることもできます。
しかしこれに関しては色をrgba形式で指定すればいいだけなので、opacityを使う必要はありません。
maipyon
ですが、画像を透明にしようと思ったら必ずopacityを使う必要が出てきます。
img{
opacity: 0.5;
}
周りに比べてちょっと目立ちすぎる・・・なんて時に0.9とかにすることで主張を抑えたりもできます。
【CSS】opacityでホバーしたときに判別がつくようにしたい
opacityは特にホバーしたときに使われることが多いです。
書き方は後述しますが、ホバーしたときにちょっと薄くなることでユーザは『あ、ここはクリックできるボタンだ！』と認識することができます。
マウスカーソルがホバーしたときに、少し色が薄く（透明に）なることで、分かりやすいということですね。
ちなみに、ホバーについては以下の記事で解説しています。
CSSのhover(ホバー)の使い方とサンプルまとめ【transitionについても解説】
CSSのhover(ホバー)について解説していきます。ホバーの使い方から、transitionについての解説、最後によく使う例をサンプルを解説します。ホバーを覚えることで、ユーザにとって分かりやすいデザインにすることが可能です！
ホバーしたときに画像や文字を透明にする方法
:hoverを使用することで、ホバーしたときのスタイルを決めることができます。
ホバーについては、次のステップで詳しく解説をします。
CSSのhover(ホバー)の使い方とサンプルまとめ【transitionについても解説】
CSSのhover(ホバー)について解説していきます。ホバーの使い方から、transitionについての解説、最後によく使う例をサンプルを解説します。ホバーを覚えることで、ユーザにとって分かりやすいデザインにすることが可能です！
今回は、コードを参考程度に見てもらえればと思います。
先ほど紹介した緑色のボタンの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
文字だけ・背景だけ透明にしたいとき
最初に例にも出てきたこの画像
実は、背景の黒色だけでなく、文字も一緒に透明になってしまっています。
opacityは要素全体を透明にするため、文字も含めて透明になります。
文字が読みにくくなるため、ラベルなどで使用するのは効果的ではありません。
背景色や文字の色を薄くするには、opacityを使うのではなく、背景色の黒色をrgba形式で指定して透明にすればOKです。
rgba形式については、以下の記事で詳細に説明しています！
【初心者向けCSS入門】Webデザインのための基本まとめ
CSS入門となるような記事になっています。CSSってなに？という人でも、CSSが分かるように初心者に向けて解説した記事になっています。CSSについて学び、デザイン変更が自力でできるようになりましょう。
CSSのopacityの使い方まとめ
今回は、要素を透明にするためのプロパティであるopacityについて解説しました！
住所などを入力する部分を、確認画面でopacityを使って透明度を上げつつ、『確認画面なので入力できませんよ』とすることもありますね。
上記の場合は、透明度を上げるというよりも、CSSで色を薄くするという意味合いが強いかもしれません。
opaticyの使い道は本当に多いです。
今回紹介したラベルでopacityを使うなど、使いどころを誤って文字も一緒に見にくくなってしまった！ということが無いように、使いどころをしっかりと考えましょう！
