ほんっとにはじめてのHTML5とCSS3：【5】CSSの値の継承（Inheritance）のルール

【5】CSSの値の継承（Inheritance）のルール

最終更新日：2017年11月13日　（初回投稿日：2015年08月14日）

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

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

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

本日のINDEX

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) の右上の検索フォームでプロパティ名で検索。

該当ページで、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、便利ですね。
親とまったく同じ値にしたい子のプロパティに、親にした指定と同じこともう１度ツラツラ書かなくても、値を 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のプロパティには「ディスプレイ用」「音声用」「印刷用」のプロパティがありますが、この「ほんっとに...」では「ディスプレイ用」を中心に話を進めていきます。

関連記事

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

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

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2017-11-13（Mon）│
投稿日：2015-08-14（Fri）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿