Articles
CSS入門
CSSにおける継承

CSSにおける継承

この記事ではCSSにおける継承について説明します。

代表的な継承されるプロパティと継承されないプロパティについて確認できます。

YouTube Video

プレビュー用のHTML

css-inheritance.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Inheritance</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-inheritance.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Inheritance</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header><h2>CSS Inheritance</h2></header>
19        <article>
20            <h3>Example of Inheritance</h3>
21            <section>
22                <p>
23                    Example of P Element.<br>
24                    <span>Example of Span Element</span>
25                </p>
26            </section>
27            <div>
28                Example of Div Element
29            </div>
30            <ul>
31                <li>List Item 1</li>
32                <li>List Item 2</li>
33                <li>List Item 3</li>
34            </ul>
35        </article>
36        <article>
37            <h3>all</h3>
38            <section>
39                <h4>Initial</h4>
40                <div class="all-initial">This is an initial element</div>
41            </section>
42            <section>
43                <h4>Inherit</h4>
44                <div class="parent-inherit">
45                    <div class="all-inherit">This is an inherited element</div>
46                </div>
47            </section>
48            <section>
49                <h4>Unset All</h4>
50                <div class="parent-unset">
51                    <div class="all-unset">This is an unset element</div>
52                </div>
53            </section>
54            <section>
55                <h4>all and !important</h4>
56                <div class="important-style">
57                    <div class="all-with-important">
58                        This is an initial element with !important
59                    </div>
60                </div>
61            </section>
62        </article>
63    </main>
64</body>
65</html>

CSSにおける継承

CSSにおいて、いくつかのプロパティは親要素から子要素へと自動的に継承されます。これは、特定のプロパティを一度設定すれば、子要素も同じスタイルを持つため、繰り返し設定する必要がなくなるという便利な仕組みです。ただし、すべてのプロパティが継承されるわけではなく、継承されるプロパティとされないプロパティが存在します。例えば、colorやfont-familyは継承されますが、marginやpaddingなどのボックスモデル関連のプロパティは継承されません。

継承されるプロパティ

継承されるプロパティは主にテキストやフォントに関連するプロパティです。

代表的な継承されるプロパティ

  1. color: テキストの色
1body {
2    color: black;
3}
  • この場合、body内のすべての子要素が黒いテキストカラーになります。
  1. font-family: フォントの種類
1body {
2    font-family: "Times New Roman", cursive;
3}
  • すべての子要素がArialフォントを使用します。
  1. font-size: テキストの大きさ
1body {
2    font-size: 16px;
3}
  • body内のすべてのテキストがデフォルトで16pxになります。
  1. line-height: 行間のスペース
1p {
2    line-height: 1.5;
3}
  • <p>要素内のテキストは行間1.5倍の高さで表示され、<p>の子要素にも影響します。
  1. text-align: テキストの整列
1div {
2    text-align: center;
3}
  • div要素内のテキストやインライン要素は中央揃えで表示されます。
  1. visibility: 要素の表示・非表示
1div {
2    visibility: hidden;
3}
  • visibilityは、要素の表示・非表示を制御するプロパティです。hiddenに設定されると、要素は非表示になります。
  • この場合、div要素内の子要素も非表示となります。
  1. list-style: リストのスタイル（<ul> や <ol> のリストマーカー）
1ul {
2    list-style: square;
3}
  • この場合、ulタグ内のリストアイテムは四角いマーカーで表示されます。

例：

継承されないプロパティ

レイアウトやボックスモデルに関連するプロパティは通常継承されません。これらのプロパティは、要素ごとに個別に設定する必要があります。

代表的な継承されないプロパティ

  1. margin, padding: 要素の外側の余白と内側の余白
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • div要素に外側の余白や内側の余白を設定しても、その中の子要素には影響を与えません。
  1. border: 要素の境界線
1div {
2    border: 1px solid black;
3}
  • 親要素にボーダーが設定されていても、子要素には反映されません。
  1. width, height: 要素の幅と高さ
1div {
2    width: 100px;
3    height: 50px;
4}
  • 親要素の幅や高さは、子要素に自動的には影響しません。
  1. background: 背景スタイル
1body {
2    background-color: lightblue;
3}
  • bodyに設定された背景色は、子要素には直接影響しません。ただし、子要素が透明な背景を持っている場合、親要素の背景色が透過して見えることがあります。

例：

継承の制御

継承は、inheritキーワード、initialまたはunsetキーワードを使って制御することができます。

  • 継承させたい場合: inherit キーワードを使って、明示的に継承を強制できます。
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • 継承させたくない場合: initialまたはunsetキーワードを使って、プロパティを初期値に戻せます。
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

例：

allプロパティ

allプロパティは、指定した要素に対して、継承可能なものも含むほぼすべてのCSSプロパティを一度にリセットできるプロパティです。具体的には、次の3つのキーワードを使って、要素のプロパティを設定できます。

  • initial: すべてのプロパティを初期値にリセットします。
  • inherit: 親要素からすべてのプロパティを継承します。
  • unset: プロパティが継承可能であれば継承し、そうでなければ初期値にリセットします。

allは特定のプロパティだけを個別に設定するのではなく、複数のプロパティを一括してリセットまたは設定したい場合に非常に便利です。

初期値にリセットする例 

1.all-initial {
2    all: initial;
3    background-color: lightskyblue;
4}

  • ある特定の要素に対して、以前に設定されたスタイルをすべてリセットして初期状態に戻したい場合は、このようにall: initialを使用します。

  • この例では、.all-initialクラスが適用された<div>要素のすべてのプロパティが、ブラウザのデフォルトの初期値にリセットされます。

継承する例 

 1.parent-inherit {
 2    color: blue;
 3    font-size: 20px;
 4    border: 1px solid blue;
 5}
 6
 7.all-inherit {
 8    all: inherit;
 9    background-color: lightskyblue;
10}
  • all: inheritを使うと、すべてのプロパティが親要素から継承されます。
  • この例では、.all-inheritクラスを持つ要素は、colorやfont-sizeなどのプロパティをすべて親要素から継承します。

条件に応じて初期値か継承かを決定する例 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • all: unsetを使用すると、プロパティが継承可能であれば継承し、そうでなければ初期値にリセットされます。
  • ここでは、colorは継承され、font-weightは初期値（通常はnormal）にリセットされます。

スペシフィシティ（優先度）との関係 

1.all-with-important {
2    color: red !important;
3    background-color: lightskyblue;
4}
5
6.all-with-important {
7    all: initial;
8}

  • allプロパティは、強力なリセット手段ですが、CSSの優先度の影響を受けます。特定の要素に対して強いスタイル指定が行われている場合、allプロパティで指定しても、そのスタイルを上書きできない場合があります。例えば、!importantが指定されたプロパティには影響を与えることができません。

  • この例では、all: initialでスタイルをリセットしようとしても、color: red !importantの指定があるため、colorプロパティはリセットされません。

ブロックレベル要素とインライン要素

ブロックレベル要素

  • 例: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • 特性:
    • 常に新しい行に表示され、幅が親要素いっぱいに広がります。
    • 幅（width）や高さ（height）を自由に設定可能です。
    • マージン（margin）やパディング（padding）を上下左右に設定でき、全方向に影響します。
1div {
2    width: 80%;  /* Set the width to 80% of its parent element's width */
3    padding: 20px;  /* Add a padding of 20 pixels on all sides */
4    margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}

インライン要素

  • 例: <span>, <a>, <strong>, <em>, <img>, <label>
  • 特性:
    • 同じ行に他のインライン要素と並んで表示されます。
    • 幅（width）や高さ（height）は直接設定できません（ただし、display: blockなどを適用すれば変更可能）。
    • マージン（margin）やパディング（padding）を上下に設定しても、その影響は限定的です（左右のマージンやパディングは有効）。
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

ブロックレベル要素とインライン要素の違い

  • 幅・高さの設定:

    • ブロックレベル要素: 幅と高さの設定が可能。
    • インライン要素: 基本的には幅や高さの設定が無効。

  • マージン・パディング:

    • ブロックレベル要素: 上下左右のマージン・パディングが反映される。
    • インライン要素: 上下のマージン・パディングは無効、または限定的な効果。

  • 配置方法:

    • ブロックレベル要素: 自動で新しい行に配置されます。
    • インライン要素: 他のインライン要素と同じ行に並びます。

このように、ブロックレベル要素とインライン要素ではCSSでのスタイル適用に違いがあります。ブロックレベル要素では、幅や高さ、マージンやパディングなどのレイアウト関連のCSSプロパティが設定した通りに適用されます。一方、インライン要素では、幅や高さ、マージンやパディングなどのレイアウト関連のCSSプロパティを設定しても、適用されなかったり、限定的な適用になる場合があります。

ブロックレベル要素とインライン要素のCSSでの扱い 

1span {
2    display: block;  /* Display the span element as a block-level element */
3    width: 100px;
4    height: 50px;
5}

ただし、displayプロパティにblockやinline-blockを指定することで、インライン要素でも幅や高さなどのブロック要素のようなスタイルの調整が可能です。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

CSSの基本CSSにおける属性セレクタの詳細