HTML DOMのスタイル分離（isolation）プロパティとは？使い方をわかりやすく解説
HTML DOMのisolation（分離）プロパティは、ある要素が新しいスタッキングコンテキスト（stacking context）を作成するかどうかを定義するためのプロパティです。主に、独立したスタック要素を作成することで、要素が背景色などと混ざってブレンドされるのを防ぐ目的で使用されます。
特にmix-blend-modeと組み合わせて使う場面が多く、ブレンドの影響範囲を特定の要素内だけに限定したい場合に非常に便利です。
isolationプロパティの構文
isolationプロパティを設定する際の基本的な構文は以下の通りです。
object.style.isolation = "auto|isolate|initial|inherit"
指定できる値の一覧
| 値 | 説明 |
|---|---|
| auto | デフォルト値です。新しいスタッキングコンテキストは作成されません。 |
| isolate | 対象の要素に対して新しいスタッキングコンテキストを作成します。これにより、内部の要素が外部の背景とブレンドされなくなります。 |
| initial | このプロパティを初期値（デフォルト値）に戻します。 |
| inherit | 親要素のisolationプロパティの値を継承します。 |
isolationプロパティの使用例
それでは、実際にisolationプロパティを使ったサンプルコードを見てみましょう。ボタンをクリックすると、内側のdiv要素が分離（isolate）される仕組みです。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
#demo{
background-color: lightpink;
width: 250px;
height: 250px;
}
#demo2{
width: 100px;
height: 100px;
border: 3px solid red;
padding: 4px;
mix-blend-mode:difference;
}
</style>
<script>
function changeIsolation() {
document.getElementById("demo1").style.isolation="isolate";
document.getElementById("Sample").innerHTML="内側のdivは分離されました";
}
</script>
</head>
<body>
<div id="demo">
<div id="demo1">
<div id="demo2">
INNER DIV
</div>
</div>
</div>
<p>下のボタンをクリックすると、内側のdivの分離モードが切り替わります</p>
<button onclick="changeIsolation()">Change Isolation</button>
<p id="Sample"></p>
</body>
</html>実行結果
ページを開いた直後の表示は以下のようになります。
ここで「Change Isolation」ボタンをクリックすると、次のように表示が変化します。
ボタンをクリックすることでdemo1要素にisolation: isolateが適用され、新しいスタッキングコンテキストが作成されます。その結果、mix-blend-mode: differenceが設定された内側のdiv要素は、ピンク色の親要素（背景）とはブレンドされなくなり、独立した状態で描画されます。
まとめ
isolationプロパティは、mix-blend-modeなどのブレンド効果の影響範囲を制御するための重要なプロパティです。「auto」「isolate」「initial」「inherit」の4つの値を持ち、JavaScriptからはelement.style.isolationとして動的に操作できます。ブレンドモードを活用したデザインを実装する際には、ぜひ覚えておきたいプロパティと言えるでしょう。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri