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/cssrule/index.html | |
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/cssrule/index.html')
-rw-r--r-- | files/ja/web/api/cssrule/index.html | 318 |
1 files changed, 318 insertions, 0 deletions
diff --git a/files/ja/web/api/cssrule/index.html b/files/ja/web/api/cssrule/index.html new file mode 100644 index 0000000000..80fcbb63c4 --- /dev/null +++ b/files/ja/web/api/cssrule/index.html @@ -0,0 +1,318 @@ +--- +title: CSSRule +slug: Web/API/CSSRule +tags: + - API + - CSSOM + - Interface + - Reference +translation_of: Web/API/CSSRule +--- +<div>{{APIRef("CSSOM")}}</div> + +<p><strong><code>CSSRule</code></strong> インターフェイスは、1 つの CSS 規則を表します。いくつかある規則の種類は、下記の {{anch("Type constants", "型定数")}} セクションのリストを見てください。</p> + +<p><code>CSSRule</code> インターフェイスは、すべての規則に共通のプロパティを指定します。特定の種類の規則に特有のプロパティは、各種類の規則のための、さらに特別なインターフェース内で指定されています。</p> + +<p><code>CSSRule</code> への参照は、{{domxref("CSSStyleSheet")}} の <code>cssRules</code> のリストから探してください。</p> + +<h2 id="Properties_common_to_all_CSSRule_instances" name="Properties_common_to_all_CSSRule_instances">すべての CSSRule インスタンスに共通のプロパティ</h2> + +<dl> + <dt id="cssText">{{domxref("CSSRule.cssText")}}</dt> + <dd>規則のテキスト表現を表す。例: "<code>h1,h2 { font-size: 16pt }</code>" や "<code>@import 'url'</code>"。規則の部分 (つまり、この例の "font-size" の値) にアクセスまたは変更するには、{{anch("Type constants", "規則の種類の特別なインターフェイス")}} のプロパティ (型定数) を使用してください。</dd> + <dt id="parentRule">{{domxref("CSSRule.parentRule")}} {{readonlyinline}}</dt> + <dd>含まれている規則を返す。規則が含まれていなければ <code>null</code> を返す。つまり、この規則が {{cssxref("@media")}} ブロック内部のスタイル規則の場合、親規則は {{domxref("CSSMediaRule")}} になります。</dd> + <dt id="parentStyleSheet">{{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}</dt> + <dd>この規則を含むスタイルシートの {{domxref("CSSStyleSheet")}} オブジェクトを返す。</dd> + <dt id="type">{{domxref("CSSRule.type")}} {{readonlyinline}}</dt> + <dd>CSS 規則の種類を示すいずれかの {{anch("Type constants", "型定数")}}。</dd> +</dl> + +<h2 id="CSSRule" name="CSSRule">定数</h2> + +<h3 id="Type_constants" name="Type_constants">型定数</h3> + +<p><code>CSSRule</code> インターフェイスは、<code>CSSRule</code> の {{domxref("cssRule/type","type")}} プロパティと組み合わせて使用できる、規則の種類 (さらに、これを実装する特別なインターフェイス) を識別するための整数定数を指定します。これらの定数とインターフェイスの関係は、次のとおりです:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>型</th> + <th>値</th> + <th>規則固有のインターフェイス</th> + <th>備考と使用例</th> + </tr> + <tr> + <td><code>CSSRule.STYLE_RULE</code></td> + <td style="text-align: center;"><code>1</code></td> + <td>{{domxref("CSSStyleRule")}}</td> + <td>もっとも一般的な規則の種類:<br> + <code>selector { prop1: val1; prop2: val2; }</code></td> + </tr> + <tr> + <td><code>CSSRule.IMPORT_RULE</code></td> + <td style="text-align: center;"><code>3</code></td> + <td>{{domxref("CSSImportRule")}}</td> + <td>{{cssxref("@import")}} 規則。(ドキュメントが完成するまで、インターフェイスの定義は Mozilla のソースコードを参照してください: <a href="https://dxr.mozilla.org/mozilla-central/source/dom/interfaces/css/nsIDOMCSSImportRule.idl#9">nsIDOMCSSImportRule</a>.)</td> + </tr> + <tr> + <td><code>CSSRule.MEDIA_RULE</code></td> + <td style="text-align: center;"><code>4</code></td> + <td>{{domxref("CSSMediaRule")}}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.FONT_FACE_RULE</code></td> + <td style="text-align: center;"><code>5</code></td> + <td>{{domxref("CSSFontFaceRule")}}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.PAGE_RULE</code></td> + <td style="text-align: center;"><code>6</code></td> + <td>{{domxref("CSSPageRule")}}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.KEYFRAMES_RULE</code></td> + <td style="text-align: center;"><code>7</code></td> + <td>{{domxref("CSSKeyframesRule")}} {{experimental_inline}}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.KEYFRAME_RULE</code></td> + <td style="text-align: center;"><code>8</code></td> + <td>{{domxref("CSSKeyframeRule")}} {{experimental_inline}}</td> + <td> </td> + </tr> + <tr> + <td><em>将来使用するための予約領域</em></td> + <td style="text-align: center;"><code>9</code></td> + <td> </td> + <td>将来、カラープロファイルの定義に使用されます。</td> + </tr> + <tr> + <td><code>CSSRule.NAMESPACE_RULE</code></td> + <td style="text-align: center;"><code>10</code></td> + <td>{{domxref("CSSNamespaceRule")}} {{experimental_inline}}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.COUNTER_STYLE_RULE</code></td> + <td style="text-align: center;"><code>11</code></td> + <td>{{domxref("CSSCounterStyleRule")}} {{experimental_inline}}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.SUPPORTS_RULE</code></td> + <td style="text-align: center;"><code>12</code></td> + <td>{{domxref("CSSSupportsRule")}}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.DOCUMENT_RULE</code></td> + <td style="text-align: center;"><code>13</code></td> + <td>{{domxref("CSSDocumentRule")}} {{experimental_inline}}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.FONT_FEATURE_VALUES_RULE</code></td> + <td style="text-align: center;"><code>14</code></td> + <td>{{domxref("CSSFontFeatureValuesRule")}}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.VIEWPORT_RULE</code></td> + <td style="text-align: center;"><code>15</code></td> + <td>{{domxref("CSSViewportRule")}} {{experimental_inline}}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.REGION_STYLE_RULE</code></td> + <td style="text-align: center;"><code>16</code></td> + <td>{{domxref("CSSRegionStyleRule")}} {{experimental_inline}}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.UNKNOWN_RULE</code></td> + <td style="text-align: center;"><code>0</code></td> + <td>{{domxref("CSSUnknownRule")}} {{obsolete_inline}}</td> + <td> </td> + </tr> + <tr> + <td><code>CSSRule.CHARSET_RULE</code></td> + <td style="text-align: center;"><code>2</code></td> + <td><code>CSSCharsetRule</code> {{obsolete_inline}}</td> + <td>(ほとんどのブラウザーから削除されました。)</td> + </tr> + </tbody> +</table> + +<p>定数の最新版の非公式リストは <a href="http://wiki.csswg.org/spec/cssom-constants">CSSWG Wiki</a> で確認できます。</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM', '#css-rules', 'CSSRule')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td><code>CHARSET_RULE</code> 値と <code>UNKNOWN_RULE</code> 値を廃止。<code>NAMESPACE_RULE</code> 値を追加。</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Animations",'#interface-cssrule', 'CSSRule')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td><code>KEYFRAMES_RULE</code> 値と <code>KEYFRAME_RULE</code> 値を追加。</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fonts', '#om-fontfeaturevalues', 'CSSRule')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td><code>FONT_FEATURE_VALUES_RULE</code> 値を追加。</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Counter Styles", "#extentions-to-cssrule-interface", 'CSSRule')}}</td> + <td>{{Spec2("CSS3 Counter Styles")}}</td> + <td><code>COUNTER_STYLE_RULE</code> 値を追加。</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Conditional", '#extentions-to-cssrule-interface', 'CSSRule')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td><code>SUPPORTS_RULE</code> 値を追加。(<code>DOCUMENT_RULE</code> は、CSS Conditional Rules Level 4 へ移された)</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSRule', 'CSSRule')}}</td> + <td>{{Spec2('DOM2 Style')}}</td> + <td>初期定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<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</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>CSSKeyframesRule</code></td> + <td>{{CompatUnknown}}</td> + <td>20.0 [4]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>CSSCharsetRule</code></td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}} [3]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>CSSUnknownRule</code></td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>CSSKeyframesRule</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>20.0 [4]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>CSSCharsetRule</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}} [3]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [1]</td> + </tr> + <tr> + <td><code>CSSUnknownRule</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [2]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>CSSCharsetRule</code> は、Chrome 41.0 で削除されました。</p> + +<p>[2] <code>CSSUnknownRule</code> は、Chrome 45.0 で削除されました。</p> + +<p>[3] <code>CSSCharsetRule</code> は、Gecko 40 で削除されました。</p> + +<p>[4] Firefox 19 以前の Gecko において、keyframe 関連の定数は、その接頭辞付きバージョンにのみ存在していました: <code>CSSRule.MOZ_KEYFRAMES_RULE</code> および <code>CSSRule.MOZ_KEYFRAME_RULE</code>。Firefox 20 以降は、接頭辞なしのバージョンも利用可能です。接頭辞付きのバージョンは将来のバージョンで削除されます。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/DOM/Using_dynamic_styling_information">動的なスタイル情報の利用</a></li> +</ul> |