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/unset/index.md | 137 +++++++++++++++++----------------------- 1 file changed, 58 insertions(+), 79 deletions(-) (limited to 'files/ja/web/css/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