CSS 継承のサンプル(inherit)

01. CSSの継承

・CSSの継承とは

・cssのcolorで継承させる例

02. inheritで継承させる例

・marginはデフォルトでは継承されない

・inheritでmarginを強制的に継承させる例

CSSの継承

CSSの継承とは

CSSの継承とは、CSSの効果が親要素から子要素にも反映されることです。
継承されるものと継承されないものがあります。
テキストやフォント関連のプロパティは値が継承されるものが多いです。
マージン(margin)やパディング(padding)などは値が継承されません。
inheritを使用すると強制的に値を継承させることができます。

cssのcolorで継承させる例

<style>
  .div2 {
    color: red;
  }
</style>
<div class="div1">
  テスト1
  <div class="div2">
    テスト2
    <div class="div3">テスト3</div>
  </div>
</div>

3行目でクラスdiv2の文字の色を指定しています。
9行目のクラスdiv2の文字の色は3行目で指定した色になります。
10行目のクラスdiv3の文字の色も親要素から値が継承され3行目で指定した色になります。

上記コードの結果です。

inheritで継承させる例

marginはデフォルトでは継承されない

<style>
    .t5 {
        margin-left: 10px;
        border: solid 3px orange;
    }
    .t6 {
        border: solid 3px blue;
    }
</style>
<div class="t5">
    test5
    <div class="t6">test6</div>
</div>

3,4行目でクラスt5のマージン(margin-left)を10pxに指定しています。
10行目のクラスt5のマージン(margin-left)は3行目で指定した幅になります。
12行目のクラスt6にはマージンの値は継承されません。

上記コードの結果です。
テスト6の左側のマージンに10pxの幅はありません。

test5

test6

inheritでmarginを強制的に継承させる例

<style>
    .t8 {
        margin-left: 10px;
        border: solid 3px orange;
    }
    .t9 {
        margin-left: inherit;
        border: solid 3px blue;
    }
</style>
<div class="t8">
    test8
    <div class="t9">test9</div>
</div>

2,3行目でクラスt8のマージン(margin-left)を10pxに指定しています。
7行目でマージンにinheritを指定しています。
11行目のクラスt8のマージン(margin-left)は3行目で指定した幅になります。
13行目のクラスt9は、7行目のinheritのため親要素のクラスt8のマージン(margin-left)が継承されて適用されます。

上記コードの結果です。
テスト6の左側のマージンに10pxの幅があります。

test8

test9