From 3115bfc018f1b43266f825bc8ec43f135f47f93b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 20 Feb 2022 02:12:57 +0900 Subject: 2021/11/19 時点の英語版に基づき新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/csskeyframesrule/appendrule/index.md | 61 ++++++++++++++++++ .../ja/web/api/csskeyframesrule/cssrules/index.md | 57 +++++++++++++++++ .../web/api/csskeyframesrule/deleterule/index.md | 72 ++++++++++++++++++++++ .../ja/web/api/csskeyframesrule/findrule/index.md | 68 ++++++++++++++++++++ files/ja/web/api/csskeyframesrule/name/index.md | 58 +++++++++++++++++ 5 files changed, 316 insertions(+) create mode 100644 files/ja/web/api/csskeyframesrule/appendrule/index.md create mode 100644 files/ja/web/api/csskeyframesrule/cssrules/index.md create mode 100644 files/ja/web/api/csskeyframesrule/deleterule/index.md create mode 100644 files/ja/web/api/csskeyframesrule/findrule/index.md create mode 100644 files/ja/web/api/csskeyframesrule/name/index.md diff --git a/files/ja/web/api/csskeyframesrule/appendrule/index.md b/files/ja/web/api/csskeyframesrule/appendrule/index.md new file mode 100644 index 0000000000..190ca3038a --- /dev/null +++ b/files/ja/web/api/csskeyframesrule/appendrule/index.md @@ -0,0 +1,61 @@ +--- +title: CSSKeyframesRule.appendRule() +slug: Web/API/CSSKeyframesRule/appendRule +tags: + - API + - CSSOM + - CSSKeyframesRule + - CSS アニメーション + - メソッド + - リファレンス +browser-compat: api.CSSKeyframesRule.appendRule +translation_of: Web/API/CSSKeyframesRule/appendRule +--- +{{APIRef("CSSOM") }} + +**`appendRule()`** は {{domxref("CSSKeyframeRule")}} インターフェイスのメソッドで、 {{domxref("CSSKeyFrameRule")}} をルールの末尾に追加します。 + +## 構文 + +```js +CSSKeyframesRule.appendRule(rule); +``` + +### 引数 + +- `rule` + - : keyframe ルールを含む {{domxref("CSSOMString")}} です。 + +### 返値 + +なし。 + +## 例 + +この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の {{domxref("CSSRule")}} になります。 +`myRules[0]` は {{domxref("CSSKeyframesRule")}} オブジェクトを返します。その `cssRules` プロパティは 1 つのルールの入った {{domxref("CSSRuleList")}} を返します。 + +`appendRule` でもう一つのルールを追加すると、 `cssRules` プロパティは 2 つのルールが入った {{domxref("CSSRuleList")}} を返します。 + +```css +@keyframes slidein { + from { + transform: translateX(0%); + } +} +``` + +```js +let myRules = document.styleSheets[0].cssRules; +let keyframes = myRules[0]; // a CSSKeyframesRule +keyframes.appendRule('to {transform: translateX(100%);}'); +console.log(keyframes.cssRules); // 2 つのルールが入った CSSRuleList オブジェクト +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/csskeyframesrule/cssrules/index.md b/files/ja/web/api/csskeyframesrule/cssrules/index.md new file mode 100644 index 0000000000..c4b81f93bb --- /dev/null +++ b/files/ja/web/api/csskeyframesrule/cssrules/index.md @@ -0,0 +1,57 @@ +--- +title: CSSKeyframesRule.cssRules +slug: Web/API/CSSKeyframesRule/cssRules +tags: + - API + - CSSOM + - CSSKeyframesRule + - CSS アニメーション + - プロパティ + - リファレンス +browser-compat: api.CSSKeyframesRule.cssRules +translation_of: Web/API/CSSKeyframesRule/cssRules +--- +{{APIRef("CSSOM") }} + +**`cssRules`** は {{domxref("CSSKeyframeRule")}} インターフェイスの読み取り専用プロパティで、 {{domxref("CSSRuleList")}} で keyframes {{cssxref("at-rule", "アットルール")}}のルールを返します。 + +## 構文 + +```js +var cssRules = CSSKeyframesRule.cssRules; +``` + +### 値 + +{{domxref('CSSRuleList')}} です。 + +## 例 + +この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の {{domxref("CSSRule")}} になります。 +`myRules[0]` は {{domxref("CSSKeyframesRule")}} オブジェクトを返します。 `cssRules` プロパティは 2 つのルールを含む {{domxref("CSSRuleList")}} を返します。 + +```css +@keyframes slidein { + from { + transform: translateX(0%); + } + + to { + transform: translateX(100%); + } +} +``` + +```js +let myRules = document.styleSheets[0].cssRules; +let keyframes = myRules[0]; // CSSKeyframesRule +console.log(keyframes.cssRules); // 2 つのルールを含む CSSRuleList オブジェクト +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/csskeyframesrule/deleterule/index.md b/files/ja/web/api/csskeyframesrule/deleterule/index.md new file mode 100644 index 0000000000..893e7cb828 --- /dev/null +++ b/files/ja/web/api/csskeyframesrule/deleterule/index.md @@ -0,0 +1,72 @@ +--- +title: CSSKeyframesRule.deleteRule() +slug: Web/API/CSSKeyframesRule/deleteRule +tags: + - API + - CSSOM + - CSSKeyframesRule + - CSS アニメーション + - メソッド + - リファレンス +browser-compat: api.CSSKeyframesRule.deleteRule +translation_of: Web/API/CSSKeyframesRule/deleteRule +--- +{{APIRef("CSSOM") }} + +**`deleteRule()`** は {{domxref("CSSKeyframeRule")}} インターフェイスのメソッドで、指定されたキーフレームセレクターに一致する {{domxref("CSSKeyFrameRule")}} を削除します。 + +## 構文 + +```js +CSSKeyframesRule.deleteRule(select); +``` + +### 引数 + +- `select` + + - : {{domxref("CSSOMString")}} で、削除するルールのキーフレームセレクターを指定します。次のうちのいずれかを指令します。 + + - 0% から 100% までのパーセント値をカンマで区切ったリスト + - または `from` か `to` のキーワード + + なお、指定するキーフレームセレクターの値の数と順序は、対象となるキーフレームルールのものと一致していなければなりません。ホワイトスペースは無視されます。 + +### 返値 + +None. + +## 例 + +この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の {{domxref("CSSRule")}} になります。 +`myRules[0]` は {{domxref("CSSKeyframesRule")}} オブジェクトを返します。 `cssRules` プロパティは + 2 つのルールを持った {{domxref("CSSRuleList")}} を返します。 + +`deleteRule()` でルールを 1 つ削除した後は、 `cssRules` プロパティはルールを 1 つ持った {{domxref("CSSRuleList")}} を返します。 + +```css +@keyframes slidein { + from { + transform: translateX(0%); + } + + to { + transform: translateX(100%); + } +} +``` + +```js +let myRules = document.styleSheets[0].cssRules; +let keyframes = myRules[0]; // CSSKeyframesRule +keyframes.deleteRule('to'); +console.log(keyframes.cssRules); // 1 つのルールを持った CSSRuleList を返す +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/csskeyframesrule/findrule/index.md b/files/ja/web/api/csskeyframesrule/findrule/index.md new file mode 100644 index 0000000000..8f6e478484 --- /dev/null +++ b/files/ja/web/api/csskeyframesrule/findrule/index.md @@ -0,0 +1,68 @@ +--- +title: CSSKeyframesRule.findRule() +slug: Web/API/CSSKeyframesRule/findRule +tags: + - API + - CSSOM + - CSSKeyframesRule + - CSS アニメーション + - メソッド + - リファレンス +browser-compat: api.CSSKeyframesRule.findRule +translation_of: Web/API/CSSKeyframesRule/findRule +--- +{{APIRef("CSSOM") }} + +**`findRule()`** は {{domxref("CSSKeyframeRule")}} インターフェイスのメソッドで、して市荒れたキーフレームセレクターに一致する {{domxref("CSSKeyFrameRule")}} を検索します。 + +## 構文 + +```js +CSSKeyframesRule.findRule(select); +``` + +### 引数 + +- `select` + + - : {{domxref("CSSOMString")}} で、見つけるルールのキーフレームセレクターを指定します。次のどちらかになります。 + + - 0% から 100% までのパーセント値をカンマで区切ったリスト + - または `from` か `to` のキーワード + + なお、指定するキーフレームセレクターの値の数と順序は、対象となるキーフレームルールのものと一致していなければなりません。ホワイトスペースは無視されます。 + +### 返値 + +最後にルールに一致した {{domxref("CSSKeyframeRule")}} を返します。ルールが見つからなかった場合は、何も返されません。 + +## 例 + +この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の {{domxref("CSSRule")}} になります。 +`myRules[0]` は {{domxref("CSSKeyframesRule")}} オブジェクト 1 つを返します。 findRule("to") を呼び出すと、 2 番目のルールを表す {{domxref("CSSKeyframeRule")}} が返されます。 + +```css +@keyframes slidein { + from { + transform: translateX(0%); + } + + to { + transform: translateX(100%); + } +} +``` + +```js +let myRules = document.styleSheets[0].cssRules; +let keyframes = myRules[0]; // CSSKeyframesRule +console.log(keyframes.findRule('to')); // CSSKeyframeRule オブジェクト +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/csskeyframesrule/name/index.md b/files/ja/web/api/csskeyframesrule/name/index.md new file mode 100644 index 0000000000..dae3fa694b --- /dev/null +++ b/files/ja/web/api/csskeyframesrule/name/index.md @@ -0,0 +1,58 @@ +--- +title: CSSKeyframesRule.name +slug: Web/API/CSSKeyframesRule/name +tags: + - API + - CSSOM + - CSSKeyframesRule + - CSS アニメーション + - プロパティ + - リファレンス +browser-compat: api.CSSKeyframesRule.name +translation_of: Web/API/CSSKeyframesRule/name +--- +{{APIRef("CSSOM") }} + +**`name`** は {{domxref("CSSKeyframeRule")}} インターフェイスのプロパティで、 {{cssxref("animation-name")}} プロパティで使用されるアニメーションの名前を取得したり設定したりします。 + +## 構文 + +```js +var name = CSSKeyframesRule.name; +CSSKeyframesRule.name = name; +``` + +### 値 + +{{domxref('CSSOMString')}} です。 + +## 例 + +この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の {{domxref("CSSRule")}} になります。 +`myRules[0]` は {{domxref("CSSKeyframesRule")}} オブジェクトを返し、 `name` は "slidein" に設定されます。 + +```css +@keyframes slidein { + from { + transform: translateX(0%); + } + + to { + transform: translateX(100%); + } +} +``` + +```js +let myRules = document.styleSheets[0].cssRules; +let keyframes = myRules[0]; // CSSKeyframesRule +console.log(keyframes.name); // "slidein" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -- cgit v1.2.3-54-g00ecf