CSS ・ 色・背景
opacity
不透明度
要素全体の不透明度を 0（完全に透明）〜 1（不透明）で指定します。中の文字や子要素もまとめて透けます。
01
サンプルコード
HTML
1<div class="row">
2 <div class="box o100">1</div>
3 <div class="box o60">0.6</div>
4 <div class="box o30">0.3</div>
5</div>
CSS
1.row {
2 display: flex;
3 gap: 12px;
4}
5.box {
6 width: 80px;
7 padding: 16px 0;
8 text-align: center;
9 background: #b68235;
10 color: #fff;
11}
12.o100 {
13 opacity: 1;
14}
15.o60 {
16 opacity: .6;
17}
18.o30 {
19 opacity: .3;
20}
02
実行結果
ブラウザでの表示
03
解説
opacity は要素全体の不透明度を指定します。0 で完全に透明、1 で不透明、0.5 で半透明です。
背景だけでなく、中の文字や子要素もすべて一緒に透けます。背景だけを透けさせたいときは、background-color: rgb(0 0 0 / 50%) のように色の透明度を使います。
opacity: 0 にしても要素は見えなくなるだけで、場所は残り、クリックもできます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
1 | 不透明（初期値） |
0.5 / 50% | 半透明 |
0 | 完全に透明（場所とクリックは残る） |
ふわっと表示する
transition と組み合わせると、なめらかに表示・非表示を切り替えられます。
CSS
1.fade {
2 opacity: 0;
3 transition: opacity .4s ease;
4}
5.fade.is-show {
6 opacity: 1;
7}
注意点
- 01文字まで薄くなるため、読みやすさが下がらないよう注意します。
- 02transform と同様に、opacity のアニメーションは描画の負荷が軽くなめらかです。