<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="継承（Inheritance）とは、(X)HTML文書はすべて樹形図のような構造（木構造）になっていることから、記述するスタイル情報を軽量化し、合理化を図るためにプロパティの値が親要素から子要素へ、子要素から孫要素へと引き継がれていく仕組みのことです。" />
<meta name="keywords" content="継承,Inheritance,木構造,軽量化,合理化,親要素,子要素,孫要素,inherit,算出値,指定値" />
<title>継承（Inheritance） CSS 前提知識</title>
<link rel="stylesheet" type="text/css" href="http://w3g.jp/style/default" /><link rel="alternate" type="application/rss+xml" href="http://w3g.jp/index.xml" title="RSS update information" />
<link rel="alternate" type="application/rss+xml" title="SiteMap" href="http://w3g.jp/sitemap.xml" />
<link rel="start" href="http://w3g.jp/" title="World Wide Web Guide" />
<link rel="contents" href="http://w3g.jp/css/" title="CSS" />
<link rel="index" href="http://w3g.jp/css/guide/" title="前提知識" />
<link rel="prev" href="http://w3g.jp/css/guide/units" title="CSSの単位" />
<link rel="next" href="http://w3g.jp/css/guide/box_model" title="ボックスモデル" />
<link rev="made" href="mailto:ryo.ueda@gmail.com" />
<script src="/script/jquery" type="text/javascript"></script>
</head>
<body>
<p id="skip"><a href="#information">Go to information</a></p>
<h1>継承（Inheritance）</h1>
<script type="text/javascript" src="/script/adsense"></script>
<p>Cascading Style Sheets（カスケーディングスタイルシート）の Cascade（カスケード）とは順序立てられたリストのスタイルシートという意味から名付けられたもので、<strong>スタイルシートが段階的に継承していく</strong>働きを表しています。<strong>継承</strong>（Inheritance）とは、<abbr title="(eXtensible) HyperText Markup Language">(X)HTML</abbr>文書はすべて樹形図のような構造（木構造）になっていることから、記述するスタイル情報を軽量化し、合理化を図るためにプロパティの値が親要素から子要素へ、子要素から孫要素へと引き継がれていく仕組みのことを言います。ただし、プロパティのもつスタイル効果によっては継承性がない方が好ましい場合もあるということで、一部のプロパティは継承性を持たないように設計されており、<a href="../color_background/">背景</a>や<a href="../box/">ボックス</a>などに関するプロパティには継承性がありません。</p>
<p>文書のデフォルトとなるスタイルを設定するには <code>html</code>要素、または <code>body</code>要素といった木構造のルート部にプロパティを指定します。なお、HTML4 の規格では <code>body</code>要素の開始タグと終了タグをともに省略可能であり、文書から <code>body</code>タグの記述自体が省かれていても、文書を解析する <a href="../../others/data/user_agent"><abbr title="User Agent">UA</abbr></a> は <code>body</code>タグの存在を推測することで、文書のデフォルトとなるスタイルの効果は通常通り反映されることに注意してください。</p>
<dl class="sample">
<dt>継承される値が絶対値の例</dt>
<dd><pre>
body { color : gray ; }
......
&lt;body&gt;
&lt;h1&gt;The headline is &lt;em&gt;important&lt;/em&gt;&lt;/h1&gt;
&lt;/body&gt;
</pre></dd>
</dl>
<p>この例では、<code>body</code>要素に <a href="../color_background/color"><code>color</code>プロパティ</a>で <code>gray</code> の前景色が指定されています。しかし、子要素の <code>h1</code>要素、その孫要素の <code>em</code>要素には個別に <code>color</code>プロパティの指定がないので、<code>body</code>要素から <code>h1</code>要素へ、そして <code>h1</code>要素から <code>em</code>要素へと、両要素には前景色 <code>gray</code> の指定が継承されます。</p>
<dl class="sample">
<dt>継承される値が相対値の例</dt>
<dd><pre>
body { font-size : 10pt ; }
h1   { font-size : 120% ; }
......
&lt;body&gt;
&lt;h1&gt;A &lt;em&gt;large&lt;/em&gt; heading&lt;/h1&gt;
&lt;/body&gt;
</pre></dd>
</dl>
<p>継承される値がパーセント値などの相対値の場合、指定値ではなく算出値が継承されます。つまり、この例では <code>h1</code>要素のフォントサイズは<code>12pt</code>（親要素の値<code>10pt</code> の<code>120%</code>分）という算出値になり、<a href="../font/font-size"><code>font-size</code>プロパティ</a>は算出値を継承するので、<code>em</code>要素も <code>h1</code>要素と同樣に<code>12pt</code> という算出値になります。たとえば、もし継承されるのが算出値ではなく指定値であると、親要素から子孫要素へと継承されるほどフォントサイズが大きくなってしまいます。つまり、<code>em</code>要素が指定値を継承すると、その親要素である <code>h1</code>要素の <code>12pt</code> の<code>120%</code>分の大きさとなり、その算出値は <code>14.4pt</code> となってしまいます。繰り返しますが、継承される値がパーセント値などの相対値の場合は、指定値ではなく算出値が継承されます。</p>
<h2 id="inherit">強制的に継承させる｢inherit｣</h2>
<p>継承性をもたないプロパティであっても、明示的に &quot;<code>inherit</code>&quot; を指定することで、そのプロパティの値を強制的に継承させられます。CSS2 ではすべてのプロパティに <code>inherit</code> の値を指定することができ、そのプロパティが、親要素と同じ算出値をとることを意味します。</p>
<pre>
body {
color      : black !important;
background : white !important;
}
* {
color      : <em>inherit</em> !important;
background : transparent;
}
</pre>
<p>この例では <code>body</code>要素に <code>color</code>プロパティと <code>background</code>プロパティが設定されています。そして、<a href="selector#Universal">全称セレクタ</a>により他のすべての要素に対して <code>color</code>プロパティの値が継承され、背景が透過することになります。もしこのルールセットをユーザースタイルシートに用いれば、制作スタイルシートによる前景色と背景の指定を無効化して、文書全体を通じて背景色は白に、前景色は黒になるでしょう。</p>
<script type="text/javascript" src="/script/adsense2"></script>
<ul class="link">
<li class="prev"><a href="http://w3g.jp/css/guide/units" rel="prev" accesskey="P">CSSの単位</a><kbd>P</kbd></li>
<li class="gotop"><a href="#skip">Go to top</a></li>
<li class="next"><kbd>N</kbd><a href="http://w3g.jp/css/guide/box_model" rel="next" accesskey="N">ボックスモデル</a></li>
</ul>
<dl id="information">
<dt>現在位置</dt>
<dd id="location"><ol>
<li class="first"><a href="http://w3g.jp/"><abbr title="World Wide Web Guide">W3G</abbr></a></li>
<li><a href="http://w3g.jp/css/">CSS</a></li>
<li><a href="http://w3g.jp/css/guide/">前提知識</a></li>
<li>継承（Inheritance）</li>
</ol></dd>
<dt>ナビゲーション</dt>
<dd id="nav"><ul><li><a href="/xhtml/">XHTML</a></li><li><a href="/css/" class="selected">CSS</a></li><li><a href="/javascript/">JavaScript</a></li><li><a href="/webstandards/">Web標準</a></li><li><a href="/seo/">SEO</a></li><li><a href="/others/">Others</a></li><li><a href="/blog/">Blog</a></li></ul><address><a href="http://w3g.jp/">World Wide Web Guide</a></address></dd>
<dt class="status">ステータス情報</dt>
<dd><dl>
<dt>作者</dt><dd><a href="/author">上田 遼</a></dd>
<dt>公開</dt><dd><span class="date">2006-01-30T00:56:04+09:00</span></dd>
<dt>更新</dt><dd><span class="date">2008-12-29T04:30:36+09:00</span></dd>
<dt><abbr title="Uniform Resource Identifier">URI</abbr></dt><dd><code class="URI">http://w3g.jp/css/guide/inheritance</code></dd>
</dl></dd>
<dt>検索</dt>
<dd id="search">
<form action="/srch/msearch.cgi" accept-charset="utf-8"><p>
<input type="text" size="35" name="query" value="" tabindex="1" accesskey="I" />
<kbd>I</kbd>
<input type="submit" value="Search" tabindex="2" accesskey="S" />
<kbd>S</kbd>
<input type="hidden" name="hint" value="ひらがな" />
<input type="hidden" name="index" value="" />
<input type="hidden" name="config" value="" />
</p></form>
</dd>
</dl>
<p class="promotion">直近の制作実績等：<a href="http://www.ohs.ac.jp/">大阪人間科学大学</a> <strong>New!</strong> / <a href="http://www.kun-ei.ac.jp/">大阪薫英女子短期大学</a> <strong>New!</strong> / <a href="https://www.816photo.jp/okuni/">セキスイハイム みんなのお国じまん</a> <strong>New!</strong></p>
<script type="text/javascript" src="/script/count" charset="utf-8"></script>
<script type="text/javascript">
var bid = 3;
var title = 'W3G'
var oid = '202';
var at = 'entry';
</script>
<script type="text/javascript" src="http://w3g.jp/tracking.js"></script>
<noscript>
<img src="http://w3g.jp/tracking/access.php?bid=3&amp;oid=202&amp;at=entry&amp;title=W3G" width="1" height="1" alt="" />
</noscript>
</body>
</html>
