diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/cssstylesheet | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/ja/web/api/cssstylesheet')
-rw-r--r-- | files/ja/web/api/cssstylesheet/deleterule/index.html | 124 | ||||
-rw-r--r-- | files/ja/web/api/cssstylesheet/index.html | 136 | ||||
-rw-r--r-- | files/ja/web/api/cssstylesheet/insertrule/index.html | 197 |
3 files changed, 457 insertions, 0 deletions
diff --git a/files/ja/web/api/cssstylesheet/deleterule/index.html b/files/ja/web/api/cssstylesheet/deleterule/index.html new file mode 100644 index 0000000000..9754516cf3 --- /dev/null +++ b/files/ja/web/api/cssstylesheet/deleterule/index.html @@ -0,0 +1,124 @@ +--- +title: CSSStyleSheet.deleteRule() +slug: Web/API/CSSStyleSheet/deleteRule +tags: + - API + - CSSOM + - CSSStyleSheet + - Method + - Reference +translation_of: Web/API/CSSStyleSheet/deleteRule +--- +<p>{{APIRef("CSSOM")}}</p> + +<p><code><strong>CSSStyleSheet.deleteRule()</strong></code> メソッドは、スタイル規則を現在のスタイルシートオブジェクトから削除します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">stylesheet.deleteRule(<em>index</em>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code>index</code> は、規則の位置を表す倍精度整数値。</li> +</ul> + +<h3 id="戻り値">戻り値</h3> + +<p><em>無効。</em></p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js"> myStyles.deleteRule(0); +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>仕様書</th> + <th>策定状況</th> + <th>備考</th> + </tr> + <tr> + <td>{{SpecName("CSSOM", "#dom-cssstylesheet-deleterule", 'CSSStyleSheet.deleteRule()')}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet-deleteRule", "CSSStyleSheet.deleteRule()")}}</td> + <td>{{Spec2("DOM2 Style")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="従来のブラウザーのサポート">従来のブラウザーのサポート</h3> + +<ul> + <li> + <h4 id="Internet_Explorer_-_pre_v9"><strong>Internet Explorer - pre v9</strong></h4> + <strong>removeRule</strong>([<em>index</em>]); -- 例:<code> removeRule(); // 最初の規則を削除</code><br> + <br> + {{domxref("CSSStyleSheet.insertRule","insertRule()")}} と {{domxref("CSSStyleSheet",".cssRules")}} の代わりとなる非標準の <code><a class="external" href="http://www.quirksmode.org/dom/w3c_css.html#change">addRule()</a></code> と <code><a class="external" href="http://www.quirksmode.org/dom/w3c_css.html#access">.rules</a></code> にも注意してください。</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("CSSStyleSheet.insertRule")}}</li> + <li><a class="external" href="http://www-archive.mozilla.org/docs/web-developer/css1technote/css1tojs.html#priority">Cross-Browser CSS-rules ordering (CSS1)</a></li> + <li><a class="external" href="http://www.quirksmode.org/dom/w3c_css.html">Quirksmode - CSS</a></li> +</ul> 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><?xml-stylesheet ?></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> diff --git a/files/ja/web/api/cssstylesheet/insertrule/index.html b/files/ja/web/api/cssstylesheet/insertrule/index.html new file mode 100644 index 0000000000..c4e33cac04 --- /dev/null +++ b/files/ja/web/api/cssstylesheet/insertrule/index.html @@ -0,0 +1,197 @@ +--- +title: CSSStyleSheet.insertRule() +slug: Web/API/CSSStyleSheet/insertRule +tags: + - API + - CSSOM + - CSSStyleSheet + - Method + - Reference +translation_of: Web/API/CSSStyleSheet/insertRule +--- +<p><span class="seoSummary"><strong>CSSStyleSheet.insertRule()</strong> メソッドは、新しい <a href="/ja/docs/Web/API/CSSRule">CSS 規則</a>を<a href="/ja/docs/Web/API/CSSStyleSheet">現在のスタイルシート</a>に挿入しますが、いくつかの<a href="#Restrictions">制限</a>があります。</span></p> + +<div class="note"> +<p><strong>メモ:</strong> <strong>insertRule()</strong> は {{domxref("CSSStyleSheet")}} の排他的なメソッドですが、実際には規則を <code>{{domxref("CSSStyleSheet", "", "", "1")}}.cssRules</code>、内部的には {{domxref("CSSRuleList")}} に挿入します。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>stylesheet</var>.insertRule(<var>rule</var>[, <var>index</var>])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt>rule</dt> + <dd> + <p>挿入される規則が入った {{domxref("DOMString")}} です。どのような規則を挿入するかは、種類に依存します。</p> + + <ul> + <li><strong><a href="/ja/docs/Web/CSS/Syntax#CSS_statements">規則セット</a></strong>の場合、<a href="/ja/docs/Web/Guide/CSS/Getting_Started/Selectors">セレクター</a>とスタイル定義です。</li> + <li><strong><a href="/ja/docs/Web/CSS/At-rule">@-規則</a></strong>の場合、 @-識別子と規則の内容です。</li> + </ul> + </dd> + <dt>index {{optional_inline}}</dt> + <dd><code><var>stylesheet</var>.cssRules.length</code> 以下の正の数で、 <code>{{domxref("CSSStyleSheet", "", "", "1")}}.cssRules</code> の中で新しく挿入される規則の位置を示します。既定値は <code>0</code> です。 (古い実装では、これは必須でした。詳しくは<a href="#Browser_compatibility">ブラウザーの対応</a>を参照してください。)</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>スタイルシートの規則リスト内の、新たに挿入された規則のインデックスです。</p> + +<h3 id="Restrictions" name="Restrictions">制限事項</h3> + +<p>CSS スタイルシート規則のリストには、規則がどのようにどこへ挿入されるかに影響する、いくつかの直感的な、またはそれほど直感的でない <a href="https://drafts.csswg.org/cssom/#insert-a-css-rule">制限</a> があります。これらに違反すると、 {{domxref("DOMException")}} のようなエラーを引き起こす原因になるでしょう。</p> + +<ul> + <li><var>index</var> 値が <code>{{domxref("CSSRuleList", "", "", "1")}}.length</code> を超える場合、 <code>IndexSizeError</code> で処理を中止します。</li> + <li>CSS の制約により <var>rule</var> が <var>index</var> <code>0</code> に挿入できない場合、 <code>HierarchyRequestError</code> で処理を中止します。</li> + <li><var>rule</var> 引数に 2 個以上の規則を与えた場合、 <code>SyntaxError</code> で処理を中止します。</li> + <li>{{domxref("@import")}} @-規則をスタイル規則の後に挿入しようとした場合、 <code>HierarchyRequestError</code> で処理を中止します。</li> + <li><var>rule</var> が {{domxref("@namespace")}} @-規則であり、リストに <code>@import</code> @-規則や <code>@namespace</code> @-規則が含まれている場合、 <code>InvalidStateError</code> で処理を中止します。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Example_1" name="Example_1">例1</h3> + +<pre class="brush: js">// myStyle の先頭に新しい規則を挿入 +myStyle.insertRule("#blanc { color: white }", 0); +</pre> + +<h3 id="Example_2" name="Example_2">例2</h3> + +<pre class="brush: js">/** + * Add a stylesheet rule to the document (it may be better practice + * to dynamically change classes, so style information can be kept in + * genuine stylesheets and avoid adding extra elements to the DOM). + * Note that an array is needed for declarations and rules since ECMAScript does + * not guarantee a predictable object iteration order, and since CSS is + * order-dependent. + * @param {Array} rules Accepts an array of JSON-encoded declarations + * @example +addStylesheetRules([ + ['h2', // Also accepts a second argument as an array of arrays instead + ['color', 'red'], + ['background-color', 'green', true] // 'true' for !important rules + ], + ['.myClass', + ['background-color', 'yellow'] + ] +]); +*/ +function addStylesheetRules (rules) { + var styleEl = document.createElement('style'); + + // Append <style> element to <head> + document.head.appendChild(styleEl); + + // Grab style element's sheet + var styleSheet = styleEl.sheet; + + for (var i = 0; i < rules.length; i++) { + var j = 1, + rule = rules[i], + selector = rule[0], + propStr = ''; + // If the second argument of a rule is an array of arrays, correct our variables. + if (Array.isArray(rule[1][0])) { + rule = rule[1]; + j = 0; + } + + for (var pl = rule.length; j < pl; j++) { + var prop = rule[j]; + propStr += prop[0] + ': ' + prop[1] + (prop[2] ? ' !important' : '') + ';\n'; + } + + // Insert CSS Rule + styleSheet.insertRule(selector + '{' + propStr + '}', styleSheet.cssRules.length); + } +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>仕様書</th> + <th>状態</th> + <th>備考</th> + </tr> + <tr> + <td>{{SpecName('CSSOM', '#dom-cssstylesheet-insertrule', 'CSSStyleSheet.insertRule')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>{{SpecName('DOM2 Style')}} からの変更なし。</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleSheet-insertRule', 'CSSStyleSheet.insertRule')}}</td> + <td>{{Spec2('DOM2 Style')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p>以下のポリフィルは、 Internet Explorer 5–8 において、 <code>insertRule</code> の引数の入力を標準に準拠させるものです。 <code>insertRule</code> を関数で補完し、引数を既定のネイティブの <code>insertRule</code> に送る前に、セレクターを規則から分離します。</p> + +<pre class="brush: js">(function(Sheet_proto){ + var originalInsertRule = Sheet_proto.insertRule; + if (originalInsertRule.length === 2){ // 2 mandatory arguments: (selector, rules) + Sheet_proto.insertRule = function(selectorAndRule){ + // First, separate the selector from the rule + a: for (var i=0, Len=selectorAndRule.length, isEscaped=0, newCharCode=0; i !== Len; ++i) { + newCharCode = selectorAndRule.charCodeAt(i); + if (!isEscaped && (newCharCode === 123)) { // 123 = "{".charCodeAt(0) + // Secondly, find the last closing bracket + var openBracketPos = i, closeBracketPos = -1; + for (; i !== Len; ++i) { + newCharCode = selectorAndRule.charCodeAt(i); + if (!isEscaped && (newCharCode === 125)) { // 125 = "}".charCodeAt(0) + closeBracketPos = i; + } + isEscaped ^= newCharCode===92?1:isEscaped; // 92 = "\\".charCodeAt(0) + } + if (closeBracketPos === -1) break a; // no closing bracket was found! + /*else*/ return originalInsertRule.call( + this, // the sheet to be changed + selectorAndRule.substring(0, openBracketPos), // the selector + selectorAndRule.substring(closeBracketPos), // the rule + arguments[3] // the insert index + ); + } + // works by if the char code is a backslash, then isEscaped gets flipped (XOR-ed by + // 1), and if it is not a backslash then isEscaped gets XORed by itself, zeroing it + isEscaped ^= newCharCode===92?1:isEscaped; // 92 = "\\".charCodeAt(0) + } + // Else, there is no unescaped bracket + return originalInsertRule.call(this, selectorAndRule, "", arguments[2]); + }; + } +})(CSSStyleSheet.prototype); +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.CSSStyleSheet.insertRule")}}</p> + +<h3 id="Legacy_browser_support" name="Legacy_browser_support">古いブラウザーの対応</h3> + +<h4 id="Internet_Explorer_8_and_below" name="Internet_Explorer_8_and_below">Internet Explorer 8 以前</h4> + +<p><strong>addRule</strong>(<var>selector</var>, <var>rule</var> [, <var>index</var>]); — 例: <code>addRule('pre', 'font: 14px verdana'); // 規則を末尾に追加</code></p> + +<p><em>また、標準外の <code><a class="external" href="http://www.quirksmode.org/dom/w3c_css.html#change">removeRule()</a></code> および <code><a class="external" href="http://www.quirksmode.org/dom/w3c_css.html#access">.rules</a></code> が、それぞれ {{domxref("CSSStyleSheet.deleteRule","deleteRule()")}} および {{domxref("CSSStyleSheet",".cssRules")}} の代わりに使用されていることにも注意してください。</em></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("CSSStyleSheet.deleteRule")}}</li> + <li><a class="external" href="http://www-archive.mozilla.org/docs/web-developer/css1technote/css1tojs.html#priority">Cross-Browser CSS-rules ordering (CSS1)</a></li> + <li><a class="external" href="http://www.quirksmode.org/dom/w3c_css.html">Quirksmode - CSS</a></li> +</ul> + +<div>{{APIRef("CSSOM")}}</div> |