aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/api/cssstylesheet/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/cssstylesheet/index.html
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/ja/web/api/cssstylesheet/index.html')
-rw-r--r--files/ja/web/api/cssstylesheet/index.html136
1 files changed, 136 insertions, 0 deletions
diff --git a/files/ja/web/api/cssstylesheet/index.html b/files/ja/web/api/cssstylesheet/index.html
new file mode 100644
index 0000000000..d34d904d14
--- /dev/null
+++ b/files/ja/web/api/cssstylesheet/index.html
@@ -0,0 +1,136 @@
+---
+title: CSSStyleSheet
+slug: Web/API/CSSStyleSheet
+tags:
+ - API
+ - CSSOM
+ - Reference
+translation_of: Web/API/CSSStyleSheet
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><strong><code>CSSStyleSheet</code></strong> インターフェイスは、1 枚の <a href="/docs/Web/CSS">CSS</a> スタイルシートを表します。これは、その親の {{domxref("StyleSheet")}} からプロパティとメソッドを継承します。</p>
+
+<p>スタイルシートは、<em>{{domxref("CSSStyleRule", "スタイル規則", "", 1)}}</em><em> </em>("<code>h1,h2 { font-size: 16pt }"</code>)、様々な <em>@-規則</em> (<code>@import</code>, <code>@media</code>, ...) 等の <em>{{domxref("CSSRule", "規則", "", 1)}}</em> から構成されます。このインターフェイスは、スタイルシート内の規則のリストを調査および変更できます。</p>
+
+<p>CSSStyleSheet オブジェクトを取得できる様々な方法は、{{anch("Notes", "補記")}} セクションを参照してください。</p>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<p><em>親である {{domxref("Stylesheet")}} からプロパティを継承します。</em></p>
+
+<dl>
+ <dt id="cssRules">{{domxref("CSSStyleSheet.cssRules")}}</dt>
+ <dd>現在の {{domxref("CSSRuleList")}} を返す。これは、スタイルシート内の {{domxref("CSSRule")}} オブジェクトのリストです。<br>
+ これは通常、次のように個々の規則へアクセスするために使用されます:
+ <pre><code> styleSheet.cssRules[i] // where i = 0..cssRules.length</code></pre>
+ <code>cssRules</code> 内のアイテムを追加または削除するには、下記のように、<code>CSSStyleSheet</code> の <code>deleteRule()</code> メソッドと <code>insertRule()</code> メソッドを使用します。</dd>
+ <dt id="ownerRule">{{domxref("CSSStyleSheet.ownerRule")}}</dt>
+ <dd>これが {{cssxref("@import")}} 規則を使用して document にインポートされたスタイルシートである場合、<code>ownerRule</code> は、その {{domxref("CSSImportRule")}} を返す。そうでない場合、<code>null</code> を返す。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p><em>親である {{domxref("Stylesheet")}} からメソッドを継承します。</em></p>
+
+<dl>
+ <dt id="deleteRule">{{domxref("CSSStyleSheet.deleteRule")}}</dt>
+ <dd>スタイルシートから、指定した位置の規則を削除する。</dd>
+ <dt id="insertRule">{{domxref("CSSStyleSheet.insertRule")}}</dt>
+ <dd>スタイルシート内の指定した位置に新しい規則を挿入する。規則のテキスト表現が与えられます。</dd>
+</dl>
+
+<h2 id="Notes" name="Notes">補記</h2>
+
+<p>一部のブラウザーでは、スタイルシートが異なるドメインから読み込まれている場合、<code>cssRules</code> の呼び出しで <code>SecurityError</code> が発生します。</p>
+
+<p>スタイルシートは、多くても 1 個の {{domxref("Document")}} と関連付けられ、これに適用されます ({{domxref("StyleSheet.disabled", "disabled", "", 1)}} でない限り)。与えられた document の <code>CSSStyleSheet</code> オブジェクトのリストは、{{domxref("document.styleSheets")}} プロパティを使用して取得できます。特定のスタイルシートは、もしあれば、その <em>owner</em> オブジェクト (<code>Node</code> または <code>CSSImportRule</code>) からもアクセスできます。</p>
+
+<p><code>CSSStyleSheet</code> オブジェクトは、document のスタイルシートが読み込まれた時に、ブラウザーによって自動的に作成され、その document の <code>styleSheets</code> リストに挿入されます。{{domxref("document.styleSheets")}} リストは直接変更できないため、新しい <code>CSSStyleSheet</code> オブジェクトを手動で作成する手ごろな方法はありません (とはいえ、<a href="http://tabatkins.github.io/specs/construct-stylesheets/">Constructable Stylesheet Objects</a> が Web API のどこかに追加される可能性があります)。新しいスタイルシートを作成するには、{{HTMLElement("style")}} 要素か {{HTMLElement("link")}} 要素を document に挿入してください。</p>
+
+<p>スタイルシートを document と関連付ける方法のリスト (おそらく未完成) は次のとおり:</p>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">スタイルシートが document と関連付けられる理由</th>
+ <th scope="col"><code>document<br>
+ .styleSheets</code> リストに現れる</th>
+ <th scope="col">スタイルシートオブジェクトを与える owner 要素または規則の取得</th>
+ <th scope="col">owner オブジェクトのインターフェイス</th>
+ <th scope="col">CSSStyleSheet オブジェクトを owner から取得</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>document 内の {{HTMLElement("style")}} 要素と {{HTMLElement("link")}} 要素</td>
+ <td>はい</td>
+ <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
+ <td>{{domxref("HTMLLinkElement")}} または<br>
+ {{domxref("HTMLStyleElement")}}、<br>
+ {{domxref("SVGStyleElement")}}</td>
+ <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
+ </tr>
+ <tr>
+ <td>document に適用される他のスタイルシート内の CSS {{cssxref("@import")}} 規則</td>
+ <td>はい</td>
+ <td>{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}</td>
+ <td>{{domxref("CSSImportRule")}}</td>
+ <td>{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}</td>
+ </tr>
+ <tr>
+ <td>(HTML でない) document 内の <code>&lt;?xml-stylesheet ?&gt;</code> 処理命令</td>
+ <td>はい</td>
+ <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
+ <td>{{domxref("ProcessingInstruction")}}</td>
+ <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
+ </tr>
+ <tr>
+ <td>HTTP Link Header</td>
+ <td>はい</td>
+ <td><em>N/A</em></td>
+ <td>N/A</td>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <td>ユーザーエージェントの (既定の) スタイルシート</td>
+ <td>いいえ</td>
+ <td>N/A</td>
+ <td>N/A</td>
+ <td>N/A</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th>仕様書</th>
+ <th>策定状況</th>
+ <th>備考</th>
+ </tr>
+ <tr>
+ <td>{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}</td>
+ <td>{{Spec2("CSSOM")}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}</td>
+ <td>{{Spec2("DOM2 Style")}}</td>
+ <td>初期定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2>
+
+<p>{{Compat("api.CSSStyleSheet")}}</p>
+
+
+<h2 id="See also" name="See also">関連情報</h2>
+
+<ul>
+ <li><a href="/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">動的なスタイル情報の利用</a></li>
+</ul>