実行できるCSSドキュメント: CSS opacity (透明度)

Q: CSS の opacity は何をしますか？

要素がどれだけ透けて見えるかを、0 (完全に透明) から 1 (完全に不透明) で指定します。文字、border、画像、すべての子要素を含む要素全体に、1 つにまとめたレイヤーとして適用されます。

Q: 文字ではなく背景だけを透明にするには？

opacity は使わず、背景にアルファ付きの色を指定します: background-color: rgb(37 99 235 / 0.5); または rgba(37, 99, 235, 0.5)。文字と子要素は不透明のままです。

Q: 子要素を親より不透明にできますか？

できません。親の opacity はグループ全体に適用されるので、子要素の opacity: 1 では打ち消せません。0.5 の親の子要素は、最大でも半分の不透明度で描かれます。代わりに透明度を親の背景色に移しましょう。

Q: opacity: 0、visibility: hidden、display: none の違いは何ですか？

opacity: 0 は要素を隠しますが、場所を取り、クリックでき、スクリーンリーダーにも読まれます。visibility: hidden は場所を残しますが、クリックできず、読まれません。display: none はレイアウトから完全に取り除きます。

Q: opacity にパーセントは使えますか？

使えます。現在のすべてのブラウザで opacity: 50% は opacity: 0.5 と同じです。0 未満や 1 を超える値は、その範囲に収められます。

opacity の役割

opacity は要素がどれだけ透けて見えるかを決めます。1 は不透明 (初期値)、0 は見えず、その間の値では背景が透けて見えます。下のボックスは、透け具合がわかるようにストライプの背景の上に置いています:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

最後のボックスもそこにあります。行の中の 90px の枠を取っていて、何も描かないだけです。白い数字もボックスと一緒に薄くなっていることに注目してください。opacity は要素 とその中のすべて に適用されます。

背景は透明、文字は不透明

opacity は子要素も薄くするので、「読みやすい文字の後ろに透ける背景」には向いていません。代わりにアルファチャンネル付きの背景色を使います:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

2 つの白いパネルは、どちらも同じだけストライプが透けて見えます。1 つ目は文字もパネルと一緒に薄くなっています。2 つ目は背景色 (rgb(255 255 255 / 0.6)、rgba(255, 255, 255, 0.6) と同じ) だけが透明なので、文字は不透明で読みやすいままです。アルファ付きの色は色のページで解説しています。

子要素は親の opacity から逃れられません。親は子要素を中に含んだまま 1 つの薄いレイヤーとして描かれるので、子要素の opacity: 1 は何もしません。

値

値	結果
`1` または `100%`	完全に不透明 (初期値)
`0.5` または `50%`	半透明
`0` または `0%`	完全に透明。レイアウトに残り、クリックもできる
`1.5`、`-1`	`1` と `0` に収められる

opacity は見た目では引き継がれますが、プロパティとしては継承されません。子要素の計算値の opacity は 1 のままで、薄くなった親の中に描かれているだけです。

opacity: 0 と visibility: hidden と display: none の違い

3 つとも要素を見えなくしますが、それ以外はすべて違います:

	`opacity: 0`	`visibility: hidden`	`display: none`
場所を取る	はい	はい	いいえ
クリックとフォーカスを受け取る	はい	いいえ	いいえ
スクリーンリーダーが読む	はい	いいえ	いいえ
transition できる	はい、なめらかに	片方の端で切り替わり、フェードしない	いいえ

困るのは 2 行目の違いです。opacity: 0 のボタンは、クリックも Tab での移動もできてしまいます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

表示欄は、隠した各ボタンの中の点の下にどの要素があるかをブラウザに尋ねています。opacity: 0 のボタンは「clickable」と答え、visibility: hidden のボタンは答えません。Visible のボタンは空の 150px の枠 2 つの後から始まります。場所を返したのは display: none のボタンだけだからです。フェードアウトしてから取り除くには、opacity をアニメーションさせ、最後に visibility: hidden にします。

ホバーでフェードさせる

opacity はアニメーションの負荷が一番軽いプロパティの 1 つなので、フェードイン、フェードアウトの定番の方法です。画像の上に表示されるキャプションの例です:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

:focus-within で、キーボードで操作する人にもキャプションが表示されます。上の表を思い出してください。見えない間もキャプションはスクリーンリーダーに読まれますが、キャプションならそれで問題ありません。

アクセシビリティ: 薄い文字はコントラストを失う

opacity を下げるとコントラストも下がります。白地に灰色の文字を opacity: 0.5 にすると、本文に必要な 4.5:1 の比を大きく下回ることがあります。補足の文字には、濃い色を薄くするのではなく、コントラストの基準を満たす色を選びましょう。無効なコントロールでは opacity を下げるのが一般的な合図ですが、disabled 属性と組み合わせて、キーボードでも操作できず、無効として読み上げられるようにしましょう。

副作用: スタッキングコンテキスト

1 未満の opacity は、transform と同じく新しいスタッキングコンテキストを作ります。すると、z-index の大きい子要素も薄くした要素の中でしか重なり順が決まらず、外側の要素の上には出られません。薄くしたパネルの中のドロップダウンがほかの要素の下に潜り込むなら、これが原因です (重なり順は z-index のページで解説しています)。

よくある間違い

背景を透明にするためにカードを薄くする。 文字も薄くなります。背景に rgb(... / 0.5) を使いましょう。
子要素を不透明に戻そうとする。 親の opacity がすべての子要素を制限します。
opacity: 0 だけで隠す。 要素はクリックとフォーカスを受け取ったままです。visibility: hidden を加えるか、display: none を使いましょう (pointer-events: none はクリックは止めますが、キーボードのフォーカスは止めません)。
opacity: 50 と書く。 opacity は 0 から 1 で、50 は 1 に収められます。0.5 か 50% と書きましょう。
opacity で文字のコントラストが低くなる。 元の色ではなく、結果のコントラストを確認しましょう。

よくある質問

CSS の opacity は何をしますか？

要素がどれだけ透けて見えるかを、0 (完全に透明) から 1 (完全に不透明) で指定します。文字、border、画像、すべての子要素を含む要素全体に、1 つにまとめたレイヤーとして適用されます。

文字ではなく背景だけを透明にするには？

opacity は使わず、背景にアルファ付きの色を指定します: background-color: rgb(37 99 235 / 0.5); または rgba(37, 99, 235, 0.5)。文字と子要素は不透明のままです。

子要素を親より不透明にできますか？

できません。親の opacity はグループ全体に適用されるので、子要素の opacity: 1 では打ち消せません。0.5 の親の子要素は、最大でも半分の不透明度で描かれます。代わりに透明度を親の背景色に移しましょう。

opacity: 0、visibility: hidden、display: none の違いは何ですか？

opacity: 0 は要素を隠しますが、場所を取り、クリックでき、スクリーンリーダーにも読まれます。visibility: hidden は場所を残しますが、クリックできず、読まれません。display: none はレイアウトから完全に取り除きます。

opacity にパーセントは使えますか？

使えます。現在のすべてのブラウザで opacity: 50% は opacity: 0.5 と同じです。0 未満や 1 を超える値は、その範囲に収められます。

CSS opacity で透明度を指定する: 透明な要素、背景、フェード