はじめに

CSSでスタイリングを行う際、「親要素に設定した文字色が子要素にも適用されている」「なぜかmarginが0になっている」といった現象に遭遇することがあります。これらの挙動を理解するためには、CSSの継承と初期値の仕組みを把握することが不可欠です。

本記事では、CSSの継承メカニズムと初期値について、以下の内容を解説します。

  • 継承されるプロパティと継承されないプロパティの違い
  • CSS初期値の定義と確認方法
  • inherit・initial・unset・revertキーワードの使い分け
  • ブラウザデフォルトスタイル（User Agent Stylesheet）の仕組み
  • リセットCSSとNormalize.cssの役割と選び方

CSSの継承と初期値を理解することで、効率的なスタイル設計ができるようになり、予期しないスタイルの挙動に悩まされることが減ります。

前提条件

本記事を読み進めるにあたり、以下の知識があることを前提としています。

  • HTMLの基本的なタグ構造
  • CSSの基本構文（セレクタ・プロパティ・値の関係）
  • CSSの詳細度（Specificity）とカスケードの基本概念

動作確認環境

  • Google Chrome 131以降
  • Firefox 133以降
  • Safari 18以降
  • Microsoft Edge 131以降

CSSの継承とは

CSSの継承とは、親要素に設定されたプロパティの値が、子要素に自動的に引き継がれる仕組みです。すべてのプロパティが継承されるわけではなく、継承されるプロパティと継承されないプロパティが明確に分かれています。

MDN Web Docsでは、継承を次のように説明しています。

CSSにおいて、継承は要素のプロパティに値が指定されていない場合に何が起こるかを制御します。

継承されるプロパティ（Inherited Properties）

継承されるプロパティとは、親要素で設定した値が、明示的な指定がなくても子孫要素に自動的に伝播するプロパティです。主にテキスト関連のプロパティが該当します。

代表的な継承されるプロパティを以下に示します。

カテゴリ プロパティ
フォント関連 font-family, font-size, font-weight, font-style
テキスト関連 color, text-align, text-indent, text-transform
行・文字間隔 line-height, letter-spacing, word-spacing
リスト関連 list-style, list-style-type, list-style-position
その他 visibility, cursor, direction

以下の例で、継承の動作を確認してみましょう。

1

<p>この段落には<em>強調されたテキスト</em>が含まれています。</p>

1
2
3

p {
  color: green;
}

この例では、<p>要素にcolor: greenを設定しています。colorプロパティは継承されるため、<em>要素にも緑色が適用されます。<em>要素にはcolorを明示的に指定していませんが、親要素である<p>の値を継承しています。

継承されないプロパティ（Non-inherited Properties）

継承されないプロパティとは、親要素で設定した値が子孫要素に伝播しないプロパティです。主にレイアウトや装飾に関連するプロパティが該当します。

代表的な継承されないプロパティを以下に示します。

カテゴリ プロパティ
ボックスモデル margin, padding, border, width, height
背景関連 background, background-color, background-image
配置関連 position, top, right, bottom, left, z-index
表示関連 display, overflow, float, clear
Flexbox/Grid flex, grid, align-items, justify-content

以下の例で、非継承の動作を確認してみましょう。

1

<p>この段落には<em>強調されたテキスト</em>が含まれています。</p>

1
2
3

p {
  border: 2px solid blue;
}

この例では、<p>要素にborderを設定しています。borderは継承されないプロパティのため、<em>要素には枠線が適用されません。<em>要素のborderは初期値であるnoneとなります。

継承の確認方法

あるプロパティが継承されるかどうかは、MDN Web Docsの各プロパティのリファレンスページで確認できます。「Formal definition（形式的定義）」セクションに「Inherited: yes」または「Inherited: no」と記載されています。

たとえば、colorプロパティのページには「Inherited: yes」と記載されており、継承されるプロパティであることがわかります。一方、borderプロパティのページには「Inherited: no」と記載されています。

CSSの初期値とは

CSS初期値とは、プロパティに値が指定されていない場合にブラウザが使用するデフォルト値です。すべてのCSSプロパティには、CSS仕様で定義された初期値が存在します。

初期値の適用ルール

初期値が適用されるタイミングは、プロパティが継承されるかどうかによって異なります。

継承されるプロパティの場合、以下のルールで値が決定されます。

  1. 明示的に値が指定されている場合は、その値が適用される
  2. 値が指定されていない場合は、親要素の計算値（Computed Value）を継承する
  3. ルート要素（<html>）で値が指定されていない場合のみ、初期値が適用される

継承されないプロパティの場合、以下のルールで値が決定されます。

  1. 明示的に値が指定されている場合は、その値が適用される
  2. 値が指定されていない場合は、初期値が適用される

代表的なプロパティの初期値

主要なプロパティの初期値を以下に示します。

プロパティ 初期値 継承
color canvastext（ブラウザ依存、通常は黒） あり
font-size medium（ブラウザ依存、通常は16px） あり
font-weight normal（400相当） あり
display inline なし
margin 0 なし
padding 0 なし
border medium none currentcolor なし
background-color transparent なし
position static なし
width auto なし

初期値はCSS仕様で定義された値であり、ブラウザのデフォルトスタイルシート（User Agent Stylesheet）で設定される値とは異なる点に注意してください。たとえば、<h1>要素のfont-sizeの初期値はmediumですが、ブラウザのデフォルトスタイルシートでは2em程度に設定されています。

継承制御キーワード

CSSには、継承や初期値を明示的に制御するための4つのグローバルキーワードがあります。これらのキーワードは、すべてのCSSプロパティに対して使用できます。

inherit - 親要素の値を強制継承

inheritキーワードは、通常は継承されないプロパティでも、親要素の値を強制的に継承させます。

1
2
3

<div class="parent">
  <p>この段落は親要素の枠線を継承します。</p>
</div>

1
2
3
4
5
6
7

.parent {
  border: 2px solid blue;
}

.parent p {
  border: inherit;
}

この例では、borderは通常継承されないプロパティですが、inheritを指定することで親要素のborder値を継承しています。結果として、<p>要素にも青い枠線が適用されます。

inheritは、継承されるプロパティに対しても使用できます。この場合、他のスタイルルールで上書きされた値を無効にして、親要素の値を再度継承させることができます。

1
2
3
4

/* サイドバー内のh2は親要素の色を継承 */
#sidebar h2 {
  color: inherit;
}

initial - 初期値にリセット

initialキーワードは、プロパティをCSS仕様で定義された初期値にリセットします。

1
2
3
4
5

<p>
  <span>このテキストは赤色です。</span>
  <em>このテキストは初期値の色（通常は黒）です。</em>
  <span>このテキストも赤色です。</span>
</p>

1
2
3
4
5
6
7

p {
  color: red;
}

em {
  color: initial;
}

この例では、<em>要素のcolorをinitialに設定しています。colorの初期値はcanvastext（通常は黒）のため、<em>要素のテキストは黒色で表示されます。

initialを使用する際は、初期値がブラウザのデフォルトスタイルとは異なる場合があることに注意してください。たとえば、displayの初期値はinlineですが、<div>要素のブラウザデフォルトはblockです。<div>要素にdisplay: initialを適用すると、インライン要素として表示されます。

unset - 継承可否に応じて動作を切り替え

unsetキーワードは、プロパティが継承されるかどうかによって動作が変わります。

  • 継承されるプロパティの場合：inheritと同じ動作（親要素の値を継承）
  • 継承されないプロパティの場合：initialと同じ動作（初期値にリセット）
1
2
3

<div class="parent">
  <p>このテキストは緑色です（colorは継承される）。</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.parent {
  color: green;
}

p {
  color: red;
}

.parent p {
  color: unset;
}

この例では、colorは継承されるプロパティのため、unsetはinheritと同じ動作をします。.parent pのcolorは親要素の緑色を継承します。

1
2
3

<div class="parent">
  <p>この段落の枠線は初期値（none）になります。</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.parent {
  border: 2px solid green;
}

p {
  border: 1px solid red;
}

.parent p {
  border-color: unset;
}

この例では、border-colorは継承されないプロパティのため、unsetはinitialと同じ動作をします。結果として、枠線の色は初期値であるcurrentcolor（テキスト色と同じ）になります。

revert - ブラウザデフォルトに戻す

revertキーワードは、プロパティの値をユーザーエージェント（ブラウザ）のデフォルトスタイルに戻します。initialとの違いは、initialがCSS仕様の初期値を適用するのに対し、revertはブラウザのデフォルトスタイルシートで定義された値を適用する点です。

1
2
3
4
5
6

<h3 style="font-weight: revert; color: revert;">
  このh3は元のスタイル（太字）に戻ります
</h3>
<h3 style="font-weight: unset; color: unset;">
  このh3はfont-weight: normalのままです
</h3>

1
2
3
4

h3 {
  font-weight: normal;
  color: blue;
}

この例の違いを整理します。

キーワード font-weight color
revert bold（ブラウザデフォルト） black（ブラウザデフォルト）
unset normal（継承プロパティのためbodyから継承） 継承された値

revertは、特定のスタイルをブラウザデフォルトに戻したい場合に有効です。all: revertを使用すると、すべてのプロパティをブラウザデフォルトに戻すことができます。

1
2
3

.reset-to-default {
  all: revert;
}

キーワードの比較表

4つのキーワードの違いを以下の表にまとめます。

キーワード 継承されるプロパティ 継承されないプロパティ
inherit 親要素の値を継承 親要素の値を継承
initial CSS仕様の初期値 CSS仕様の初期値
unset 親要素の値を継承（inheritと同じ） CSS仕様の初期値（initialと同じ）
revert ブラウザデフォルト値 ブラウザデフォルト値

キーワードの動作フロー

以下のフローチャートで、各キーワードがどのように値を決定するかを視覚的に理解できます。

flowchart TD
    A[継承制御キーワード] --> B{どのキーワード?}
    B -->|inherit| C[親要素の計算値を継承]
    B -->|initial| D[CSS仕様の初期値を適用]
    B -->|unset| E{継承されるプロパティ?}
    E -->|はい| C
    E -->|いいえ| D
    B -->|revert| F[ブラウザデフォルトを適用]

ブラウザデフォルトスタイルとは

ブラウザデフォルトスタイル（User Agent Stylesheet）とは、ブラウザが標準で持っているスタイルシートです。CSSを一切記述しなくても、<h1>が大きく太字で表示されたり、<a>が青色で下線付きになったりするのは、このブラウザデフォルトスタイルが適用されているためです。

ブラウザデフォルトスタイルの例

主要な要素に対するブラウザデフォルトスタイルの例を以下に示します。（Chrome基準）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/* 見出し要素 */
h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
}

/* 段落要素 */
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

/* リンク要素 */
a {
  color: -webkit-link;
  text-decoration: underline;
  cursor: pointer;
}

/* リスト要素 */
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

ブラウザ間の差異

ブラウザデフォルトスタイルは、ブラウザごとに微妙に異なります。たとえば、<body>要素のマージンはChromeとFirefoxでは8pxですが、古いブラウザでは異なる値が設定されていることがあります。

このブラウザ間の差異が、クロスブラウザ対応における課題となります。この問題を解決するために、リセットCSSやNormalize.cssが使用されます。

デベロッパーツールでの確認方法

ブラウザのデベロッパーツールを使用すると、要素に適用されているブラウザデフォルトスタイルを確認できます。

  1. 確認したい要素を右クリックし、「検証」または「要素を調査」を選択
  2. 「Styles」パネルを確認
  3. 「user agent stylesheet」と表示されているルールがブラウザデフォルトスタイル

この方法で、特定の要素にどのようなデフォルトスタイルが適用されているかを把握できます。

リセットCSSとNormalize.css

ブラウザデフォルトスタイルの差異を解消し、一貫したスタイリングの基盤を作るために、リセットCSSやNormalize.cssが広く使用されています。

リセットCSSとは

リセットCSSは、ブラウザデフォルトスタイルをすべてリセット（初期化）するアプローチです。margin、padding、font-sizeなどを0やnoneに設定し、すべての要素を同じ状態からスタートさせます。

代表的なリセットCSSであるEric Meyer’s Reset CSSの一部を以下に示します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* Eric Meyer's Reset CSS v2.0 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

リセットCSSのメリットとデメリットは以下のとおりです。

メリット

  • すべての要素が同じ状態からスタートするため、予測しやすい
  • ブラウザ間の差異を完全に排除できる

デメリット

  • 便利なデフォルトスタイル（リストのマーカーなど）もリセットされる
  • 必要なスタイルをすべて自分で定義する必要がある
  • CSSファイルのサイズが大きくなりやすい

Normalize.cssとは

Normalize.cssは、ブラウザデフォルトスタイルを完全にリセットするのではなく、ブラウザ間の差異を正規化（normalize）するアプローチです。有用なデフォルトスタイルは保持しつつ、バグや不整合を修正します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* Normalize.css v8.0.1 の一部 */

/**
 * 1. すべてのブラウザで行の高さを修正
 * 2. iOSでの向き変更後のフォントサイズ調整を防止
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * すべてのブラウザでマージンを削除
 */
body {
  margin: 0;
}

/**
 * ChromeとSafariで`main`要素を正しく表示
 */
main {
  display: block;
}

Normalize.cssのメリットとデメリットは以下のとおりです。

メリット

  • 有用なデフォルトスタイルが保持される
  • 必要最小限の修正のみ行うため、ファイルサイズが小さい
  • バグ修正や一貫性の向上に焦点を当てている

デメリット

  • 一部のデフォルトスタイルが残るため、完全な統一にはならない
  • プロジェクトによっては追加のリセットが必要

現代的なCSS Reset

現代では、従来のリセットCSSとNormalize.cssの良いところを組み合わせた、モダンなCSS Resetが使用されることが増えています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

/* Modern CSS Reset */

/* Box sizingの統一 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* デフォルトマージンの削除 */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* リストスタイルの削除（roleがある場合） */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* html要素のスムーススクロール */
html:focus-within {
  scroll-behavior: smooth;
}

/* bodyのデフォルト設定 */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* 画像の設定 */
img,
picture {
  max-width: 100%;
  display: block;
}

/* フォーム要素のフォント継承 */
input,
button,
textarea,
select {
  font: inherit;
}

/* アニメーション無効化（prefers-reduced-motion） */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

選択のポイント

プロジェクトに適したリセット方法を選択する際のポイントを以下に示します。

条件 推奨されるアプローチ
完全にカスタムなデザインを実装する リセットCSS
ブラウザのデフォルトを活用しつつ一貫性を保ちたい Normalize.css
モダンなベストプラクティスを採用したい Modern CSS Reset
CSSフレームワーク（Tailwind CSS等）を使用する フレームワーク付属のリセットを使用

継承を活用したスタイル設計

CSSの継承を効果的に活用することで、効率的でメンテナンスしやすいスタイル設計が可能になります。

ルート要素でのベーススタイル設定

継承されるプロパティは、ルート要素（<html>または<body>）で設定することで、サイト全体に適用できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

:root {
  /* カスタムプロパティ（CSS変数）も継承される */
  --primary-color: #3498db;
  --font-family-base: 'Noto Sans JP', sans-serif;
}

body {
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

この設定により、サイト内のすべての要素がこれらのスタイルを継承します。個別に変更が必要な要素のみ、上書きすればよいのです。

フォーム要素の継承問題

<input>、<button>、<textarea>などのフォーム要素は、ブラウザのデフォルトスタイルによりfont-familyやfont-sizeを継承しない場合があります。これを解決するには、明示的にinheritを指定します。

1
2
3
4
5
6

button,
input,
select,
textarea {
  font: inherit;
}

font: inheritは、font-family、font-size、font-weightなどのフォント関連プロパティをすべて親要素から継承させます。

継承の活用パターン

以下に、継承を効果的に活用するパターンを示します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* パターン1: 記事コンテンツ全体のスタイル設定 */
.article-content {
  font-family: Georgia, serif;
  line-height: 1.8;
  color: #2c3e50;
}

/* パターン2: テーマカラーの継承 */
.theme-dark {
  color: #ecf0f1;
  background-color: #2c3e50;
}

.theme-dark a {
  color: inherit; /* 親要素のテキスト色を継承 */
  text-decoration: underline;
}

/* パターン3: 引用ブロックのスタイル */
blockquote {
  font-style: italic;
  color: #7f8c8d;
  border-left: 4px solid currentColor; /* currentColorはcolorの値を使用 */
}

よくある問題と解決方法

CSSの継承と初期値に関連してよく発生する問題と、その解決方法を紹介します。

問題1: 意図しないスタイルの継承

リンク要素に親要素のcolorが継承されてほしくない場合があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/* 問題: ナビゲーション内のリンクが青くならない */
.nav {
  color: white;
}

.nav a {
  /* colorがwhiteを継承してしまう */
}

/* 解決策: 明示的に色を指定 */
.nav a {
  color: #3498db;
}

/* または、revertでブラウザデフォルトに戻す */
.nav a {
  color: revert;
}

問題2: フォーム要素のスタイルが適用されない

フォーム要素がサイト全体のフォント設定を継承しない問題があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 問題: inputがbodyのフォントを継承しない */
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
}

/* 解決策: フォーム要素に継承を明示 */
input,
button,
select,
textarea {
  font: inherit;
}

問題3: リセットCSSが強すぎる

リセットCSSによりリストのマーカーが消えてしまう問題があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* リセットCSSで消えたリストマーカーを復活 */
.content ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

.content ol {
  list-style-type: decimal;
  padding-left: 1.5em;
}

問題4: 初期値とブラウザデフォルトの混同

initialとrevertの違いを理解していないことによる問題があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/* 問題: divをブロック表示に戻したいのにinlineになる */
.hidden-div {
  display: none;
}

.visible-div {
  display: initial; /* inlineになってしまう */
}

/* 解決策: revertを使用 */
.visible-div {
  display: revert; /* blockに戻る */
}

/* または明示的にblockを指定 */
.visible-div {
  display: block;
}

まとめ

本記事では、CSSの継承と初期値について詳しく解説しました。重要なポイントを振り返ります。

CSSの継承について理解すべき点は以下のとおりです。

  • 継承されるプロパティ（color、font-familyなど）と継承されないプロパティ（margin、borderなど）がある
  • 継承されるプロパティは親要素の計算値が子孫要素に伝播する
  • 継承されないプロパティは初期値が適用される

CSS初期値について理解すべき点は以下のとおりです。

  • 初期値はCSS仕様で定義されたデフォルト値
  • ブラウザデフォルトスタイル（User Agent Stylesheet）とは異なる

継承制御キーワードについて理解すべき点は以下のとおりです。

  • inherit: 親要素の値を強制継承
  • initial: CSS仕様の初期値にリセット
  • unset: 継承可否に応じてinheritまたはinitialとして動作
  • revert: ブラウザデフォルトスタイルに戻す

リセットCSSについて理解すべき点は以下のとおりです。

  • リセットCSS: すべてのスタイルを初期化
  • Normalize.css: ブラウザ間の差異を正規化
  • Modern CSS Reset: 両者の良いところを組み合わせたアプローチ

これらの知識を活用することで、予期しないスタイルの挙動を防ぎ、効率的なCSSの設計ができるようになります。

参考リンク