【5】CSSの値の継承(Inheritance)のルール

最終更新日:2017年11月13日  (初回投稿日:2015年08月14日)

CSSには (スタイル)の継承(Inheritance)というルールもあります。
親のスタイルが自動的に子孫にも適用されるルールです。

これ、CSSを使っているうちに、なんとなく気付く現象ですね。
例えば、<body>にフォントサイズを指定すれば、<body>内の子要素は、特に指定をしなければ自動的にそのフォントサイズになりますね。
でも、なんでも親のスタイルのままってわけじゃなく、子要素には効かないものもある。
例えば、<body>に横幅(width)を指定しても、その中の子要素には効きません(効いても困るし)
これはいったい何なのかと、モヤモヤしたことはありませんか?

今回は、この「継承のルール」を知って、モヤモヤを解消しておきましょう。

本日のINDEX
  1. CSSの値の継承(Inheritance)のルール
    1. 継承するかしないかの調べ方(地味にW3Cサイトで検索するのが確実)
  2. inherit という値で、親のスタイルを強制的に継承できる
  3. 相対的な値(%やemなど)の継承のルール

CSSの値の継承(Inheritance)のルール

例えば、文字の太さを指定する font-weight プロパティを例に見てみます。
サンプルはこちらです。

  • リスト1
  • リスト2
  • リスト3
<div id="sample1">
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ul>
</div>
div#sample1 {
	font-weight:bold;
	padding:1em;
	border:solid 1px #ccc;
    background:rgba(191, 255, 0, 0.5);
    margin:1em 0}
div#sample1 ul {margin:0}
div#sample1 ul li:last-child {font-weight:normal}

親の <div> に font-weight: bold で文字の太さをボールドに指定しています。(2行目)
<div> の子孫である <li>要素には何も指定していません。
ただし、<li>要素の最後の( li:last-child )だけは、font-weight: normal を指定。(8行目)

最初と2番目の <li>要素の文字はボールドになっていますね。これが値の継承です。
親の font-weightプロパティの値が、子孫要素にも継承されているんですね。
最後の <li>要素だけは、新しい指定が 先祖の指定を上書きしています。

ただ、継承しているのは文字の太さだけ。親の padding や border は受け継がれてないですね?
これは、プロパティごとに継承するかしないか決まってるから。

font-weight は継承する。padding や border は継承しない...って具合で、プロパティ1つ1つに「継承する・しない」のルールが決まってるんです。(ちょっとめんどくさいですねw)

継承するかしないかの調べ方(地味にW3Cサイトで検索するのが確実)

プロパティはすごい数があります。
これに、1つ1つに継承するかしないかの決まりがあるので、覚えるのは大変。ていうか無理です。
ですので、まあ だいたいのイメージで「継承する・しない」を覚えておこう。

その、だいたいのイメージとはこんなかんじ↓
文字に関するスタイルのプロパティは、ほとんど継承する(継承しないのもあるけど)
●逆に継承しないのは「ボックス」「表示や配置」関連。(継承するものもある。visibilityとか)

スタイルを継承しないプロパティ
ボックスに関するプロパティ(width, height, margin, padding, border, ourline, background など)
表示や配置に関するプロパティ(overflow, display, float, clear, position, z-index など)

CSSを使っていてうまくいかないとき、「そういえば、継承が原因?」などと思い至るネタに。気になったとき、エラーに継承が関わっているか調べればOK。

で、調べ方ですが、地味にW3Cサイトで調べるのがいちばん確実です。

まず、World Wide Web Consortium (W3C) の右上の検索フォームで プロパティ名で検索。
All Standards and Drafts - W3C で検索

該当ページで、Inherited(継承)が yes か no かチェックします。
Inherited がyesかnoかチェック

inherit という値で、親のスタイルを強制的に継承できる

スタイルを継承しないプロパティでも inherit で強制的に継承させることができます。

継承しないはずの borderプロパティを、子に継承させてみます。

  • リスト1
  • リスト2
  • リスト3
<div id="sample2">
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ul>
</div>
div#sample2 {
	font-weight:bold;
	padding:1em;
	border:solid 1px #ccc;
	background:rgba(191, 255, 0, 0.5);
    margin:1em 0}
div#sample2 ul {
	margin:0;
	border:inherit;}

inherit、便利ですね。
親とまったく同じ値にしたい子のプロパティに、親にした指定と同じこともう1度ツラツラ書かなくても、値を inherit とするだけで完了です♪
inheritは、IE8から対応しています。

相対的な値(%やemなど)の継承のルール

わざわざ覚えなくても使っているうちにわかることだけど、一応書いておきますね。
相対的な単位を使ってサイズ指定をする時の継承は、ちょっと毛色が違います。

相対的な単位とは、em(テキストの高さ)といった単位です。CSSの単位については【7】で詳しく取り上げます。

ここでは、「%」でフォントサイズを指定した例を見てみましょう。
サンプルはこちら。まずはソースから。

<div id="sample3">
これはdiv直下のテキスト。サイズは16pxです。
  <ul>
    <li>これはリスト1</li>
    <li id="smpl3_2nd">これはリスト2</li>
    <li id="smpl3_3rd">これはリスト3</li></ul>
</div>
div#sample3 {
	font-size:16px;
	font-weight:bold;
	padding:1em;
	border:solid 1px #ccc;
	background:rgba(191, 255, 0, 0.5);}
div#sample3 ul {
	font-size:120%;
	margin:0;}
div#sample3 ul li {font-size:100%;}
div#sample3 ul li#smpl3_2nd {font-size:inherit;}
div#sample3 ul li#smpl3_3rd {font-size:120%;}

最初に<div>要素に font-size: 16px を指定(2行目)。
<ul>要素に font-size: 120% を指定(8行目)。
<li>要素に font-size: 100% を指定(10行目)。これは特に何も指定していない1番目の<li>に適用されます。
2番目の<li>要素には、font-size: inherit を指定(11行目)。
3番目の<li>要素には、font-size: 120% を指定(12行目)しました。

そして、プレビューはこちら。

これはdiv直下のテキスト。サイズは16pxです。
  • これはリスト1
  • これはリスト2
  • これはリスト3

まず、1行目は、<div>の直下なのでフォントサイズは16pxです。
1番目の<li>は、親の<ul>のフォントサイズの100%です。
2番目の<li>は、font-size: inherit で親の<ul>のフォントサイズを継承。
というわけで 1番目・2番目は、いろいろ書いているけど、何も指定しないのと同じです。親のフォントサイズをそのまま継承している。だから同じフォントサイズ。
親の<ul>は font-size: 120% ですので、16pxの120%のサイズになっています。

相対的な単位の場合は、たとえ inheritを使っても、その相対性(%とかの割合)を受け継ぐんじゃなく、計算後の実際のサイズを受け継ぐんですね。

3番目の<li>は、font-size: 120% としたので、継承したサイズをさらに120%に拡大。144%になっています。

次回予告

モヤモヤは解消したでしょうか?(余計モヤモヤしたとか?)
とにかく、プロパティごとにスタイルを継承する・しないが決まっていることを知っているだけで OKです。

次回は、どんな種類のプロパティがあるかを、ざっと眺めてみましょう。
CSSのプロパティには「ディスプレイ用」「音声用」「印刷用」のプロパティがありますが、この「ほんっとに...」では「ディスプレイ用」を中心に話を進めていきます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
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 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.