C-2. CSS スタイルの継承

2021.12.15

スタイルの継承を知っておこう

親要素で指定した内容が子要素にも継承されるものがあります。
すべての要素に対してスタイルを適用するのは非効率であるため、スタイルの継承を生かして作成します。

親要素と子要素とは

外側の要素を親要素、内包された要素を子要素と呼びます

XHTML
1
2
3
4
<div id="parent">　⬅外要素
  <div id="child">　⬅子要素
  </div>
</div>

継承するもの、継承されないもの

borderプロパティなどはスタイルが継承されません。

自身で試して、継承されない形式がでたら、CSS②を試してください。

CSS①

1
2
3
4
5
6
7
#parent {
  border: solid 2px black;
}
 
#child {
  border: solid 2px black;
}

CSS②

1
2
3
4
5
6
7
8
#parent {
  border: solid 2px black;
}
 
#child {
  border: inherit;
}
 

継承の確認を記述して理解しておこう

CSSのスタイルの継承のサンプル記述例をもとに記述してみてください。

実際どんな表示になっているか？変更して確認してみましょう。

XHTML
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
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .parent_1 {
        background: green;
        width: 200px;
        border: solid 2px black;
        padding: 10px;
      }
 
      .child_1 {
        background: lightgreen;
        width: 200px;
        border: solid 2px black;
        padding: 10px;
      }
      
      .parent_2 {
        background: green;
        width: 200px;
        border: solid 2px black;
        padding: 10px;
      }
 
      .child_2 {
        border : inherit ;
      }
    </style>
  </head>
  <body>
    <div class="parent_1">
      1の親要素です
      <div class="child_1">１の子要素です</div>
   </div>
   <hr>
    
   <div class="parent_2">
      ２の親要素です
      <div class="child_2">２の子要素です</div>
    </div>
 
  </body>
</html>

ブラウザでの実行結果

基本的なCSSセレクタを理解しておこう。

タグ名のセレクタ指定

html、body、h1、p、a、img、table、ul、li、など、HTMLのタグ名を直接セレクタに指定する方法です。CSSにはタグ名をそのまま記述します。

XHTML
1
2
3
4
5
6
7
8
9
<style>
h1{
color: #000000;
}
</style>
 
<body
<h1>見出し</h1>
</body>

#id名によるセレクタ指定

CSSのid名の先頭にはシャープ（#）を付けて記述します。

XHTML
1
2
3
4
5
6
7
<style>
#heading {font-size:24px;}
</style>
 
<body>
<h1 id="heading">見出し</h1>
</body>

.class名によるセレクタ指定

CSSのclass名の先頭にはドット（.）を付けて記述します。

XHTML
1
2
3
4
5
6
7
8
<style>
.heading {
font-size:20px;}
</style>
 
<body>
<h1 class="heading">見出し</h1>
</body>

子孫セレクタ指定

セレクタを半角スペースで区切って、複数のセレクタを繋げて記述します。

XHTML
1
2
3
4
5
6
7
8
9
10
<style>
#main .lead span{
font-weight: bold;}
</style>
 
<body>
<div id="main">
　　<p class="lead">テキスト<span>太字</span>です。</p>
</div>
</body>

セレクタは、いくつでも繋げて指定することができます。タグ名、id名、class名を混ぜて繋げてることも可能です。

1
2
3
4
5
6
7
8
9
h1, h2, h3, p {//共通部分は、「,」でまとめることができます。
　color: #666;
　font-weight: normal;
　line-height: 1.5;
}
h1 {font-size: 24px;}　//まとめないものは、別々に指定する。
h2 {font-size: 20px;}
h3 {font-size: 18px;}
p {font-size: 14px;}

MDNのページ

MDN Web Docsは、オープンウェブプラットフォームを文書化した無料のリソースです。
これらには、さまざまさサンプルが記載されています。こうしたサイトを利用して必要なCSSサンプルを活用しましょう。

課題

スタイルの継承を利用して、以下のスタイルを作成してください。

作成したファイル名をindex_2_12.htmlにして送ってください。

実行結果

ヒント

以下要素を利用して表示してみよう。

1
2
border: solid サイズpx 色　：枠のスタイル
margin　：余白の指定

課題・復習用検索キーワード

検索例
🔍CSS　セレクタ
🔍CSS　margin
🔍CSS　boreder　指定の仕方