【初心者向け】CSSのスタイルの継承の基礎を解説

2022.11.08
CSSのスタイルの継承の基礎を解説

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

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

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

  • CSSのスタイルの継承の基礎がわかる

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

CSSの継承とは

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

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

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

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

継承されるもの

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

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

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

html
<div class="sample">
1文目(文字が青くなります)
<p>2文目(この文字も青くなります)</p>
</div>
css
div.sample{color:blue;}

継承されないもの

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

html
<div class="sample-2">
1文目(ボーダーで囲まれます)
<p>2文目(ここはボーダーで囲まれません)</p>
</div>
css
div.sample-2 {border:1px solid #008000;}

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

強制的に継承させる

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

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

html
<div class="sample-3">
ボーダーで囲まれます
<p class="sample-4">継承されて、この部分もボーダーで囲まれます</p>
</div>
css
div.sample-3 {border:1px solid #008000;}
p.sample-4 {border:inherit;}

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

まとめ

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

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5