From 14bfca7d9e1f52854aedaa420991056c51a3534b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 2 Jan 2022 22:54:38 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/inheritance/index.md | 84 +++++++++++++++++++---------------- 1 file changed, 45 insertions(+), 39 deletions(-) (limited to 'files/ja/web/css/inheritance') diff --git a/files/ja/web/css/inheritance/index.md b/files/ja/web/css/inheritance/index.md index 9bf6dfaa86..c942b462cc 100644 --- a/files/ja/web/css/inheritance/index.md +++ b/files/ja/web/css/inheritance/index.md @@ -3,72 +3,78 @@ title: 継承 slug: Web/CSS/inheritance tags: - CSS - - Guide - - Inheritance - - Layout - - Web + - ガイド + - 継承 + - レイアウト + - ウェブ translation_of: Web/CSS/inheritance --- -
{{cssref}}
+{{CSSRef}} -

CSS において、継承 (inheritance) はある要素のあるプロパティに値が指定されなかった場合の挙動を制御します。

+CSS において、**継承** (inheritance) はある要素のあるプロパティに値が指定されなかった場合の挙動を制御します。 -

CSS プロパティは2種類に分類することができます。

+CSS プロパティは 2 種類に分類することができます。 - +- **継承プロパティ**は、既定で親要素の[計算値](/ja/docs/Web/CSS/computed_value)に設定されるものです +- **非継承プロパティ**は、既定でそのプロパティの[初期値](/ja/docs/Web/CSS/initial_value)に設定されるものです -

いずれかの CSS プロパティの定義を参照して、それぞれのプロパティが既定値を継承するか ("継承: あり") しないか ("継承: なし") を確認してください。

+[いずれかの CSS プロパティ](/ja/docs/Web/CSS/Reference#keyword_index)の定義を参照して、それぞれのプロパティが既定値を継承するか ("継承: あり") しないか ("継承: なし") を確認してください。 -

継承プロパティ

+## 継承プロパティ -

要素の継承プロパティに値が指定されなかった場合、要素はその親要素のプロパティの計算値を取得します。文書のルート要素だけは、プロパティの概要で与えられた初期値を取得します。

+要素の**継承プロパティ**に値が指定されなかった場合、要素はその親要素のプロパティの[計算値](/ja/docs/Web/CSS/computed_value)を取得します。文書のルート要素だけは、プロパティの概要で与えられた[初期値](/ja/docs/Web/CSS/initial_value)を取得します。 -

継承プロパティの一般例として {{ Cssxref("color") }} プロパティが挙げられます。次の様なスタイルルールを指定し、

+継承プロパティの一般例として {{ Cssxref("color") }} プロパティが挙げられます。次の様なスタイルルールを指定し、 -
p { color: green; }
+```css +p { color: green; } +``` -

次の様にマークアップしたとします。

+次の様にマークアップしたとします。 -
<p>この段落には<em>強調されたテキスト</em>があります。</p>
+```html +

この段落には強調されたテキストがあります。

+``` -

「強調されたテキスト」という文字列は、 em 要素が p 要素から {{ Cssxref("color") }} プロパティの値を継承する為、プロパティの初期値 (※祖先要素の何れにも color プロパティが指定されていない場合に使用される文字色) ではなく、継承値の緑色となります。

+「強調されたテキスト」という文字列は、 `em` 要素が `p` 要素から {{ Cssxref("color") }} プロパティの値を継承する為、プロパティの初期値 (※祖先要素の何れにも color プロパティが指定されていない場合に使用される文字色) ではなく、継承値の緑色となります。 -

非継承プロパティ

+## 非継承プロパティ -

値を持たない非継承プロパティが要素に指定された場合、要素はプロパティの初期値（※各プロパティのページの「概要」の章に記されています）を取得します。

+値を持たない**非継承プロパティ**が要素に指定された場合、要素はプロパティの[初期値](/ja/docs/Web/CSS/initial_value)（※各プロパティのページの「概要」の節に記されています）を取得します。 -

非継承プロパティの一般的な例としては {{ Cssxref("border") }} プロパティが挙げられます。次の様なスタイルルールを指定し、

+非継承プロパティの一般的な例としては {{ Cssxref("border") }} プロパティが挙げられます。次の様なスタイルルールを指定し、 -
 p { border: medium solid; }
+```css + p { border: medium solid; } +``` -

次の様にマークアップしたとします。

+次の様にマークアップしたとします。 -
<p>この段落には<em>強調されたテキスト</em>があります。</p>
+```html +

この段落には強調されたテキストがあります。

+``` -

この場合、「強調されたテキスト」という文字列は ({{ Cssxref("border-style") }} の初期値が none であるため) ボーダーを持ちません。

+この場合、「強調されたテキスト」という文字列は ({{ Cssxref("border-style") }} の初期値が `none` であるため) 境界がありません。 -

注

+## 注 -

{{ Cssxref("inherit") }} のキーワードで、明示的に継承することを指定することができます。これはこれは継承プロパティでも非継承プロパティでも動作します。

+{{ Cssxref("inherit") }} のキーワードで、明示的に継承することを指定することができます。これはこれは継承プロパティでも非継承プロパティでも動作します。 -

すべてのプロパティに値を適用する {{cssxref("all")}} 一括指定プロパティを使用することで、すべてのプロパティの継承を制御することができます。例えば、

+すべてのプロパティに値を適用する {{cssxref("all")}} 一括指定プロパティを使用することで、すべてのプロパティの継承を制御することができます。例えば、 -
font {
+```css
+p {
   all: revert;
   font-size: 200%;
   font-weight: bold;
-}
+} +``` -

これは、 {{cssxref("font")}} プロパティのスタイルを、ユーザーのスタイルシートがなければユーザーエージェントの既定値に、あればその値に戻します。それからフォントの寸法を倍にして、 {{cssxref("font-weight")}} を "bold" に適用します。

+これは、 {{cssxref("font")}} プロパティのスタイルを、ユーザーのスタイルシートがなければユーザーエージェントの既定値に、あればその値に戻します。それからフォントの寸法を倍にして、 {{cssxref("font-weight")}} に `"bold"` を適用します。 -

関連情報

+## 関連情報 - +- 継承を制御する CSS 値: {{ cssxref("inherit") }}, {{cssxref("initial")}}, {{cssxref("unset")}}, {{cssxref("revert")}} +- [CSS カスケード入門](/ja/docs/Web/CSS/Cascade) +- [カスケードと継承](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +- {{ CSS_key_concepts() }} -- cgit v1.2.3-54-g00ecf