CSS初学者の最初の壁「スタイルの継承」をしっかり理解する

2017年09月01日　15時08分更新

文●Asha Laxmi

ツイートする

CSSの初学者が最初につまづくのが「継承」ではないでしょうか。無駄なコードや無効なコードを書かないように、CSSの継承をしっかり理解しましょう。

両親の背が高ければ子どもも背が高くなるという具合に、「継承」は現実の世界でも見られます。CSSも同じことが言えます。

包含ブロックに緑色を指定すれば、色が上書きされない限り内側のブロックもすべて緑色になります。特定のプロパティ値が親要素から子要素にそのまま引き継がれる、「継承」という仕組みです。

継承のいろいろな面を取り上げて、それぞれの要素に対してどういった影響が及ぶのか、解説します。

CSSの継承はどれぐらい便利なのか

CSSの継承で、Webサイト制作の時間と労力を軽減できます。body要素のすべての子要素に対して色を指定すると、時間がかかり、エラーが起こりやすくなり、保守も大変です。ブロック内の子要素すべてにfont-familyとfont-sizeを指定するのも悪夢です。

以下のデモを見てください。

この例ではbody要素でfont-family、font-size、line-height要素を指定していますが、それぞれの値はbody内にネストされている別の要素に継承されています。レイアウトを統一するために別々の要素に対して同じプロパティを指定する必要はないのです。

特定のプロパティだけ継承する

現実でも親の特性のすべてが子供に引き継がれるわけではありません。CSSもデフォルトではすべてのCSSプロパティが子要素に継承されません。すべてのプロパティが継承されると、都度CSSが上書きすることになり、継承されない場合と同じです。

たとえばborderプロパティが継承されると、ある要素に指定したborder値が内側の子要素すべてに適用されます。同じように、background-imageプロパティを親要素から継承すると見た目が壊れます。次のCodePenによるデモでは、この次の段落で取り上げるCSSキーワードで、border要素が継承されるとどうなるかを確認できます。

強制的に継承する

一般的に継承するプロパティは状況で変わります。先ほどの例で、親要素のpadding値は子要素に継承させずに、文字の色やフォントの種類は子要素でも同じにする場合を考えます。

継承されないプロパティを、親要素から継承するには、子要素にinheritプロパティを指定します。

.some-child {
  color: inherit;
}

Webサイトのリンク要素を、親要素で定義したのと同じ色にするには2つの方法があります。リンクを別のクラスで囲んで色を指定する方法か、inheritプロパティを使う方法です。inheritプロパティはスマートに実現できます。

リンク要素のcolorプロパティをinheritに指定すると、親要素の色を継承します。

p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}

デモです。

ショートハンドを使ったCSSの継承

ショートハンドプロパティとinheritキーワードを一緒に使うと、特定のサブプロパティだけではなく、すべてのサブプロパティに継承されます。

次のCSSを見ると、solidで1pxのborderを指定して、親要素からcolorだけを継承しているように見えますが、この書き方は無効です。

.example {
  /* Invalid CSS */
  border: 1px solid inherit;
}

paddingやmarginも、ショートハンドを使っている部分に値を指定しても、値を継承できません。次の書き方も無効です。

.example {
  /* Invalid CSS */
  margin: 10px inherit 20px 15px;
}

継承したいプロパティに任意の値を指定して、対応するプロパティを省略せずにinheritで記述すればうまくいきます。

.example {
  margin : 10px 0 20px 15px;
  margin-right: inherit;
}

ショートハンドで値を省略した場合

ショートハンドは、宣言されていないサブプロパティの値にデフォルトの値を指定します。次のCSSを見てください。

.container-a {
  font: italic 1.2em/1.75 Lato;
}

.container-a p {
  font: bold 1em Lato;
}

段落内の文章にcontainerのfont-styleが継承されません。font-styleはリセットされ、デフォルトの値の「normal」が入ります。親要素のショートハンドのfontを継承しながら段落の文章にboldを指定するなら、省略せずにfont-weightプロパティを使います。

デベロッパーツールを使って継承された値を確認する

デベロッパーツールで、親要素やほかのDOM要素から継承したプロパティを確認できます。すべてのプロパティが親要素から継承されるわけではありません。また、別のCSSに上書きされていないプロパティが子要素、孫要素と継承されることもありません。デベロッパーツールは、簡単にプロパティを見分けられます。SitePointのCSSを撮ったスクリーンショットを見てください。

Viewing CSS inheritance in DevTools