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

最終更新日:2017年09月23日  (初回投稿日: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);}
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 を指定。(7行目)

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

★この場合をもっと詳しく言うと、まず <div> の子の <ul> に 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かチェック

今うんざりした人に朗報です(笑)。
この作業を自分でしなくても、調べて一覧にしてくれているサイトがあります。
そんな素敵なサイトで確認させていただくほうが、早いです。(そのサイトがちゃんと更新されていればね)
2つほどピックアップ。
スタイルシート[CSS]/プロパティ一覧 - TAG index Webサイト
 (↑ CSS2での一覧です。一目瞭然でわかりやすい。いつもお世話になります。)
CSS3プロパティ一覧(ABC順)│HTML5&CSS3リファレンス
 (↑ CSS3を最新の情報に更新されていて、頼りになります。ありがとうございます!)

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);}
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を使っても、その相対性(%とかの割合)を受け継ぐんじゃなく、計算後の実際のサイズを受け継ぐんですね。

上の例だと、<ul>のフォントサイズ「120%」というパーセンテージを継承したんじゃなく、
16px×120%(約19px)のサイズそのものを継承した。

3番目の<li>は、font-size: 120% としたので、継承したサイズを120%に拡大。それでこいつだけ大きくなっちゃったんです。
これで、inherit で受け継いだ値が「120%」じゃないってことがわかりますね。

次回予告

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

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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.