CSSの親要素と子孫要素や継承について理解する

CSSを覚える際に親要素と子孫要素という概念を理解する必要があります。

<body>
<div id="main">
<p>ここに文章が入ります。</p>
<p>ここに文章が入ります。</p>
</div>
<div id="sub">
<p>ここに文章が入ります。</p>
<p>ここに文章が入ります。</p>
</div>
</body>

例えばこのようなHTMLがある場合、pタグから見るとdiv id="main"やbodyが親要素ということになります。divから見るとbodyが親要素ということですね。

bodyから見るとdivが子要素、pが孫要素ということになります。

body {
    font-size: 16px;
    }

例えばこのようにbodyに対してフォントサイズを指定した場合、body内の全てのフォントサイズが16pxになりますので、子孫要素にあたる#mainやpに対してもこの設定が効いてきます。親要素に設定したプロパティは子要素や孫要素にも引き継がれます。

#sub内のpタグのみのフォントサイズを変更したい場合は以下の様なCSSになります。

#sub p {
    font-size: 16px;
    }

subというidのdiv内のpタグを指定していますので、あくまでsub内のpタグのみにCSSが効いてきます。

このようにそのCSSをどの範囲まで反映させたいのかということを考え、どの要素に対してCSSを設定するのかが決まります。

後に書かれたCSSが優先される

CSSでは後に書かれたものが優先されますので、たとえば以下のように書くこともできます。

body {
    font-size: 14px;
    }

p {
    font-size: 16px;
    }

こうすることで、サイト全体のフォントサイズは14pxになりますが、pタグ内のフォントについては16pxになります。CSSを記述する時には、親要素から書いていくのが一般的です。

後から書かれた物によって上書きされていくような形になりますので、たとえば、h3のデザインをCSSで行い、サイト内の特定のh3については、他のデザインにするという事も可能です。

#main-contents h3{
    background-image: url(../../../img/05.jpg);
    background-repeat: no-repeat;
    border: 1px solid #666;
    padding-top: 8px;
    padding-bottom: 10px;
    padding-left: 25px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    width: 585px;
    height: 28px;
    color: #fff;
}

#main-contents h3.rank {
    background-image: url(../../../img/rank01.jpg);
    background-repeat: no-repeat;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    padding-left: 55px;
    padding-top: 2px;
    padding-bottom: 7px;
    font-size: 24px;
    color: #000;
    }

サイト全体の設定としてh3に対してCSSを設定し、ページ内で特定のh3に対して異なるデザインを設定したい場合には、そのh3にクラス名を振って、そのクラスに対してCSSを設定します。

h3に対してボーダーを設定していますので、そのままではh3.rankに対してもボーダー設定が効いてしまいますが、「none」を指定することでボーダーを無くす設定になっています。

h3

h3.rank

どちらもh3タグですが、このようにデザインを変えることもできます。(サンプルで提示したCSSとは異なるプロパティになっています)

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーでは無料SSLが利用できます。Googleはhttpsのサイトを評価する傾向があり、今後はSSL化が必須になってくるでしょう。無料SSLは簡単に導入できるのでとても助かっています。

エックスサーバーの公式サイトへ

サブコンテンツ

このページの先頭へ