この記事の要点

opacity は要素の不透明度を指定する CSS プロパティ。値は 0（完全透明）〜 1（完全不透明） 子要素にも適用されるのが特徴。背景だけ薄くしたい場合は rgba() や background-color の方が適切 クリック判定は残る（透明だが存在する）。完全に消したい場合は visibility: hidden や display: none を併用する GPU で合成されるため、transform と並んでアニメーションのパフォーマンスが良い transition: opacity 0.3s と組み合わせるだけで、フェードイン・フェードアウトが即実装できる

opacity プロパティとは

opacity は、要素をどれくらい透けて見せるかを 0〜1 の数値で指定する CSS プロパティです。0 なら完全に透明（ただし要素自体は存在する）、1 なら完全に不透明、0.5 なら半透明、というように直感的に扱えます。フェードイン / フェードアウトの演出、ホバー時の薄暗化、無効ボタンの淡色化など、UI 制作で日常的に使うプロパティです。

構文

.box      { opacity: 1;    }  /* 不透明（デフォルト） */
.box-half { opacity: 0.5;  }  /* 半透明 */
.box-zero { opacity: 0;    }  /* 完全透明（クリックは可能） */

/* パーセント表記も可（モダンブラウザのみ） */
.percent  { opacity: 50%;  }

値の範囲

値	見え方
1 / 100%（既定）	不透明
0.75	うっすら背景が透ける
0.5	半透明（うっすら隠れた状態）
0.25	ほとんど見えない
0	完全透明だがレイアウト・クリック判定は残る

子要素にも適用される（最重要）

opacity の最大の特徴は子要素にも連鎖して影響することです。親に opacity: 0.5 を当てると、その中のテキスト・画像・ボタンすべてが半透明になります。

そのため「背景だけ薄くしたい、文字ははっきり見せたい」用途には不向きで、rgba() による背景色の透過の方が適しています。

/* NG: 文字まで薄くなってしまう */
.overlay {
  background: #000;
  opacity: 0.5;
}

/* OK: 背景だけ半透明、文字は不透明のまま */
.overlay {
  background: rgba(0, 0, 0, 0.5);
}

フェードイン / フェードアウト

transition: opacity と組み合わせるだけで、滑らかな表示・非表示アニメーションが実装できます。opacity は GPU 合成されるためフレーム落ちしにくく、UI の定番です。

.modal {
  opacity: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none; /* クリックも無効化 */
}

.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

hover で薄暗くする

.btn {
  transition: opacity 0.15s ease;
}
.btn:hover  { opacity: 0.85; }
.btn:active { opacity: 0.7;  }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

opacity と visibility / display の違い

プロパティ	見た目	レイアウト占有	クリック判定	遷移可能
opacity: 0	透明	残る	残る	○（フェード）
visibility: hidden	非表示	残る	無し	△（瞬時）
display: none	非表示	消える	無し	×

フェードアウト後に完全に消したいなら、transition 終了後に display: none を JS で付けるか、opacity: 0; pointer-events: none を組み合わせます。

パフォーマンスのポイント

• opacity と transform はGPU で合成されるため、再描画コストが極小
• width・height・top などをアニメーションするより大幅に高速
• JS で requestAnimationFrame から書き換えるよりも、CSS の transition / animation に任せる方が滑らか

filter プロパティとの違い

opacity は要素全体に均一に透明度を与えます。一方、filter: opacity(0.5) もほぼ同じ効果ですが、filter は blur() や brightness() など他のエフェクトと組み合わせられる点が特徴です。単純な透明度だけなら opacity プロパティを使う方が分かりやすく軽量です。

無効ボタンや読み込み中のローディング表現

UI コンポーネントを「操作不可」と視覚的に伝える定番手法が opacity を下げる方法です。スピナーを重ねたり、cursor: not-allowed と pointer-events: none を組み合わせると、状態が一目で伝わります。

/* 送信中のフォーム全体をフェード */
.form.is-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ボタン無効化 */
.btn[disabled],
.btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 読み込み中のスケルトン（チラつき防止用） */
.skeleton {
  background: #e2e8f0;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.5; }
}

カラーの透明度との使い分け

「文字色だけ薄くしたい」「枠線だけ薄くしたい」といった部分的な透明度なら、opacity ではなく色値のアルファチャンネルを使います。

.note {
  /* 文字を 60% の濃さに */
  color: rgba(0, 0, 0, 0.6);
  /* もしくは現代的に */
  color: rgb(0 0 0 / 60%);
}

.divider {
  border-top: 1px solid hsl(220 10% 50% / 0.3);
}

/* CSS 変数の現代的な活用 */
:root { --brand: 220 90% 50%; }
.btn        { background: hsl(var(--brand)); }
.btn:hover  { background: hsl(var(--brand) / 0.85); }

このように「要素自体を透ける」のが opacity、「色そのものを透ける」のが rgba / hsla / アルファチャンネルと覚えておくと、迷ったときに正しく選べます。

関連記事

• animation-fill-mode プロパティ
• CSS ライブラリ