Isolation プロパティ

最終更新：2026-09-13

isolation Isolation プロパティ

isolation プロパティは、要素が新しい層叠コンテキスト（stacking context）を作成するかどうかを制御します。isolate に設定すると、要素は独立したブレンド環境を形成するため、子要素の mix-blend-mode は要素の内部のコンテンツとのみブレンドされ、外部の要素に漏れることはありません。これはブレンドモードの範囲を正確に制御するための重要なプロパティです。

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

📝 構文

isolation: auto | isolate;

⚙️ 値

値	タイプ	説明
`auto \| isolate`	キーワード	新しい層叠コンテキストを作成するかどうか

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
isolation	✓ v43	✓ v12	✓ v36	✓ v9	✓ v30
すべての主要ブラウザーでサポート

ヒント： isolate の最も一般的な用途は mix-blend-mode との併用です。影響させたくない要素へのブレンドの漏れ出しを防ぎます。

❓ よくある質問

Qブラウザで層叠コンテキストを作成する CSS プロパティにはどのようなものがありますか？

Aよくあるもの：position と auto 以外の z-index の組み合わせ、1 未満の opacity、none 以外の transform、none 以外の filter、normal 以外の mix-blend-mode、will-change です。isolation: isolate は意図的に層叠コンテキストを作成し、ブレンドと層叠を自身の内部に分離して保持します。

Qisolation: auto と isolation: isolate の違いは何ですか？

Aauto は自身では層叠コンテキストを作成しません。要素は親の層叠環境に参加するため、子要素の mix-blend-mode はそれを越えて外側のコンテンツともブレンドできます。isolate は新しい層叠コンテキストを強制し、ブレンド範囲を要素内に限定します。子要素は要素内部のコンテンツとのみブレンドし、外側には漏れません。ブレンドの境界を正確に制御したい場合は isolate を使ってください。

Qisolation: isolate はブレンドモード以外に他の用途がありますか？

A層叠関係を分離する必要があるあらゆる場所で使えます。子要素のブレンドモードが外部に影響するのを防ぐ、z-index 比較の範囲を制限する、内部の配置や階層が外部と干渉しないようにする、contain: paint と組み合わせて描画を最適化する、などです。本質的に isolate は、z-index や opacity に依存せずに「きれいな」層叠コンテキストを作成する方法を提供します。

Qisolation プロパティと z-index の違いは何ですか？

Az-index は配置された要素（positioned elements）にのみ設定でき、層叠順序を調整します。値が大きいほど上に重なります。isolation: isolate は要素の上下順序を変更せず、内部の層叠を外部から隔てる分離境界を作成します。どちらも層叠コンテキストに関わりますが、z-index は「誰が上か」を、isolation は「境界はどこか」を決定します。