「CSSのスタイルの継承ってよく耳にするけどよくわからない」

こう思う方も多いのではないでしょうか。

本記事をお読みいただくと以下が分かります。

CSSに少しずつ慣れてくると耳にする「継承」。でも、概念がよくわからないですよね。是非本記事をお読みいただき理解を深めてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

CSSの継承とは

プログラミングの世界で「継承」とは、既存のクラスから新しく作ったクラスに「変数定義」や「メソッド」などを引き継ぐことを指します。

CSSで言うと、親要素に指定したスタイル（文字の色等）を子要素に引き継げることを意味します。

CSSのスタイルの継承について

それでは、基本的なCSSのスタイルの継承の例を見ていきましょう。

継承されるもの

実はCSSの継承においては、親要素に指定した値が子要素に継承されるものと継承されないものがあります。

具体的には文字色や文字サイズは継承されますので、まずはその例を見ていきましょう。

以下のように文字色を指定した場合、子要素にわざわざ文字色を指定しなくても親要素から継承されることで青色に表示されます。

<div class="sample">
1文目（文字が青くなります）
<p>2文目（この文字も青くなります）</p>
</div>

div.sample{color:blue;}

継承されないもの

一方、ボーダーや背景画像などは継承されません。その例も紹介します。

<div class="sample-2">
1文目（ボーダーで囲まれます）
<p>2文目（ここはボーダーで囲まれません）</p>
</div>

div.sample-2 {border:1px solid #008000;}

コピーアンドペーストでいいので試してみてください、継承されていないことが理解いただけると思います。

強制的に継承させる

では、ボーダーや背景画像を継承させることはできないのでしょうか。

もちろんできます。ほぼすべてのプロパティは、親要素の値を強制的に継承するinheritという値を指定することができます。

<div class="sample-3">
ボーダーで囲まれます
<p class="sample-4">継承されて、この部分もボーダーで囲まれます</p>
</div>

div.sample-3 {border:1px solid #008000;}
p.sample-4 {border:inherit;}

上記のようにinheritをcssで指定することで親要素のスタイルを継承することができます。

まとめ

いかがでしたでしょうか。いきなり複雑な説明をされても初心者は分からないと思うので具体的な例をもとに継承について紹介しました。

是非本記事をきっかけに、プログラミングのレベルアップを目指してください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP