From b2f3739dab3e0e353604bb0b55b081eb8c920775 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 20 Feb 2022 19:41:31 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/initial/index.md | 103 +++++++++++++--------------- files/ja/web/css/unset/index.md | 137 ++++++++++++++++---------------------- 2 files changed, 103 insertions(+), 137 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/initial/index.md b/files/ja/web/css/initial/index.md index b474d464b1..fc65838b25 100644 --- a/files/ja/web/css/initial/index.md +++ b/files/ja/web/css/initial/index.md @@ -3,77 +3,64 @@ title: initial slug: Web/CSS/initial tags: - CSS - - CSS カスケードと継承 + - CSS カスケード - CSS 値 - - Reference - - initial + - 既定の状態 + - 初期状態 + - キーワード - レイアウト - - 初期値 + - リファレンス + - initial +browser-compat: css.types.global_keywords.initial translation_of: Web/CSS/initial --- -
{{CSSRef}}
+{{CSSRef}} + +**`initial`** は CSS のキーワードで、要素にプロパティの[初期値（または既定値）](/ja/docs/Web/CSS/initial_value)を設定します。どの CSS プロパティにも適用できます。これは CSS の一括指定である {{cssxref("all")}} を含み、 `initial` を指定して、すべての CSS プロパティを初期値に戻すために使用することができます。 -

initial は CSS のキーワードで、要素にプロパティの初期値 (または既定値) を設定します。どの CSS プロパティにも適用できます。これは CSS の一括指定 {{cssxref("all")}} を含み、 initial を指定して、すべての CSS プロパティを初期値に戻すために使用することができます。

+[継承プロパティ](/ja/docs/Web/CSS/inheritance#inherited_properties)では、初期値は予期せぬ値になるかもしれません。代わりに {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}} キーワードを使用することを検討してください。 -
-

注: 継承プロパティでは、初期値は期待されない値かもしれません。代わりに {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}} キーワードを使用することを検討してください。

-
+## 例 -

例

+### initial を使用して要素の色を初期化 -

HTML

+#### HTML -
<p>
-  <span>このテキストは赤です。</span>
-  <em>このテキストは初期値 (ふつうは黒) です。</em>
-  <span>これは再び赤です。</span>
-</p>
+```html +

+ このテキストは赤です。 + このテキストは初期値（ふつうは黒）です。 + これは再び赤です。 +

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   color: red;
 }
 
 em {
   color: initial;
-}
- -

{{EmbedLiveSample('Example')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS4 Cascade', '#initial', 'initial') }}{{Spec2('CSS4 Cascade')}}Level 3 から変更なし。
{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}{{Spec2('CSS3 Cascade')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.types.global_keywords.initial")}}

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample('Using_initial_to_reset_color_for_an_element')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("unset")}} を使用すると、継承プロパティは継承値に、それ以外は初期値に設定します。 +- {{cssxref("revert")}} を使用すると、プロパティをユーザーエージェントのスタイルシート（またはもしあれば、ユーザーのスタイル）で設定された値に初期化します。 +- {{cssxref("inherit")}} を使用すると、要素のプロパティを親と同じ値にします。 +- {{cssxref("all")}} プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。 diff --git a/files/ja/web/css/unset/index.md b/files/ja/web/css/unset/index.md index 492735707c..3393f5be26 100644 --- a/files/ja/web/css/unset/index.md +++ b/files/ja/web/css/unset/index.md @@ -3,41 +3,42 @@ title: unset slug: Web/CSS/unset tags: - CSS - - CSS カスケードと継承 + - CSS カスケード - CSS 値 - - Keyword - - Layout - - Reference - - Style - - unset - - スタイル + - キーワード - レイアウト + - リファレンス + - スタイル + - unset +browser-compat: css.types.global_keywords.unset translation_of: Web/CSS/unset --- -
{{CSSRef}}
+{{CSSRef}} -

unset は CSS のキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の継承プロパティの場合は {{cssxref("inherit")}} キーワードのように動作し、後者の非継承プロパティの場合は {{cssxref("initial")}} キーワードのように動作します。

+**`unset`** は CSS のキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ[初期値](/ja/docs/Web/CSS/initial_value)を設定します。言い換えれば、前者の[継承プロパティ](/ja/docs/Web/CSS/inheritance#inherited_properties)の場合は {{cssxref("inherit")}} キーワードのように動作し、後者の[非継承プロパティ](/ja/docs/Web/CSS/inheritance#non-inherited_properties)の場合は {{cssxref("initial")}} キーワードのように動作します。 -

unset はあらゆる CSS プロパティに対して、一括指定の {{cssxref("all")}} を含み、適用することができます。

+**`unset`** は一括指定の {{cssxref("all")}} を含む、あらゆる CSS プロパティに対して適用することができます。 -

例

+## 例 -

色

+### 色 -

HTML

+#### HTML -
<p>このテキストは赤です。</p>
-<div class="foo">
-  <p>このテキストも赤です。</p>
-</div>
-<div class="bar">
-  <p>このテキストは緑色 (既定の継承値) です。</p>
-</div>
-
+```html +

このテキストは赤です。

+
+

このテキストも赤です。

+
+
+

このテキストは緑色（既定の継承値）です。

+
+``` -

CSS

+#### CSS -
.foo {
+```css
+.foo {
   color: blue;
 }
 .bar {
@@ -50,28 +51,30 @@ p {
 .bar p {
   color: unset;
 }
-
+``` -

結果

+#### 結果 -

{{ EmbedLiveSample('Color') }}

+{{ EmbedLiveSample('Color') }} -

境界線

+### 境界線 -

HTML

+#### HTML -
<p>This text has a red border.</p>
-<div>
-  <p>This text has a red border.</p>
-</div>
-<div class="bar">
-  <p>This text has a black border (initial default, not inherited).</p>
-</div>
-
+```html +

このテキストには赤い境界線があります。

+
+

このテキストには赤い境界線があります。

+
+
+

このテキストには黒い境界線があります（既定値、継承なし）。

+
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   border: 1px solid green;
 }
 
@@ -82,47 +85,23 @@ p {
 .bar p {
   border-color: unset;
 }
-
- -

結果

- -

{{ EmbedLiveSample('Border', 'auto', 200) }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS4 Cascade', '#inherit-initial', 'unset') }}{{ Spec2('CSS4 Cascade') }}Level 3 から変更なし。
{{ SpecName('CSS3 Cascade', '#inherit-initial', 'unset') }}{{ Spec2('CSS3 Cascade') }}初回定義。
- -

ブラウザーの互換性

+``` -
-

{{Compat("css.types.global_keywords.unset")}}

-
+#### 結果 + +{{ EmbedLiveSample('Border', 'auto', 200) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -

関連情報

+## 関連情報 - +- {{cssxref("initial")}} を使用すると、プロパティを初期値に設定します。 +- {{cssxref("revert")}} を使用すると、プロパティをユーザーエージェントのスタイルシート（またはもしあれば、ユーザーのスタイル）で設定された値に初期化します。 +- {{cssxref("inherit")}} を使用すると、要素のプロパティを親と同じ値にします。 +- {{cssxref("all")}} プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。 -- cgit v1.2.3-54-g00ecf