不透明度プロパティ

最終更新：2026-09-13

opacity 不透明度プロパティ

opacity プロパティは要素全体の透明度を設定し、値の範囲は 0 から 1 です。0 は完全に透明、1 は完全に不透明です。透明な背景と異なり、opacity は要素とそのコンテンツ全体に影響するため、フェードイン／アウト効果や視覚的な階層付けによく使われます。

カテゴリ
初期値	1
継承	いいえ
適用対象	all
アニメーションタイプ	number
CSS バージョン	CSS3
状態	標準

📝 構文

opacity: <number [0,1]>;

⚙️ 値

値	タイプ	説明
`<number [0,1]>`	タイプ	0 は完全に透明、1 は完全に不透明

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
opacity	✓ v25	✓ v12	✓ v16	✓ v9	✓ v15
すべての主要ブラウザーでサポート

注意： opacity は子要素を含む要素全体に影響します。背景だけを透明にしたい場合は、代わりに rgba や hsla の色を使用してください。

ヒント： opacity は遷移可能なプロパティで、フェードイン・フェードアウトアニメーションの作成によく使われます。

❓ よくある質問

Qopacity と rgba の透明度の違いは何ですか？

Aopacity は要素全体に適用され、背景・テキスト・ボーダー・すべての子要素をまとめて透明にし、新しいスタックコンテキストを作成します。rgba() は指定した 1 つのプロパティ（背景色など）のアルファチャンネルだけに影響し、テキストと子要素は不透明のままです。テキストをはっきりさせた半透明の背景が欲しい場合は rgba() を、要素全体をフェードさせたい場合は opacity を使用してください。

Qopacity: 0 と display: none の違いは何ですか？

Aopacity: 0 の場合、要素はスペースを占め、クリック可能なまま、transition に参加でき、スクリーンリーダーも内容を読み取れます。display: none の場合、要素はドキュメントフローから完全に削除され、スペースもなく、操作もできず、読み取り可能な内容もありません。フェードアニメーションには opacity を使用し、要素を完全に削除したい場合にのみ display: none を使用してください。

Qopacity: 0 と visibility: hidden の違いは何ですか？

Aどちらも要素を不可視かつクリック不可にしますが、opacity: 0 はスペースを維持し、スクリーンリーダーで読み取れ、滑らかな遷移に対応します。visibility: hidden はレイアウト上のスペースを維持しますが、補助技術からも内容を隠し、滑らかにアニメーションできません。アニメーションには opacity を、単純な非表示には visibility: hidden を使用してください。

Qなぜ opacity のアニメーションは滑らかなのですか？

Aopacity は合成プロパティです。ブラウザはレイアウトやペイントを引き起こさずに合成スレッド上でブレンドするため、簡単に 60fps に達します。対照的に top や left を変更するとリフローと再描画が発生します。フェードイン／アウトや hover での表示効果には opacity と transition がよく合います。opacity はスタックコンテキストを作成し、fixed 要素の積み重ね方に影響する可能性がある点に注意してください。