<?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="包含ブロックとは、祖先要素のうち、もっとも近い祖先の要素にあたるブロック要素の内容領域を指します。つまり、当該要素の親要素をさかのぼっていっていってブロック要素があれば、そのブロック要素の内容領域が包含ブロックということになります。" />
<meta name="keywords" content="包含ブロック,containing block,祖先要素,ブロック要素,内容領域,初期包含ブロック" />
<title>包含ブロック 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/box_model" title="ボックスモデル" />
<link rel="next" href="http://w3g.jp/css/guide/property_pronunciation" 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>包含ブロック</h1>
<script type="text/javascript" src="/script/adsense"></script>
<p>包含ブロックとは、祖先要素のうち、もっとも近い祖先の要素にあたるブロック要素の内容領域を指します。つまり、当該要素の親要素をさかのぼっていっていってブロック要素があれば、そのブロック要素の内容領域が包含ブロックということになります。</p>
<p>CSS2.1 の仕様において包含ブロックは次のように定義されています。</p>
<ol>
<li><a href="target#root">ルート要素</a>が存在する包含ブロックは、<a href="../../others/data/user_agent">User Agnet（ユーザーエージェント）</a>によって選択される（表示域と関連付けられる可能性がある）。この包含ブロックを初期包含ブロック（initial contining block）と呼ぶ。</li>
<li>他の要素では、当該要素の <a href="../display_position/position"><code>position</code>プロパティ</a>の値が &quot;<code>relative</code> | <code>static</code>&quot; のどちらかである場合、包含ブロックはブロックレベル（<a href="target#block">ブロック要素</a>、または <a href="../display_position/display"><code>display : block ;</code></a> を指定された要素）, セル要素（<code>td</code>要素, <code>th</code>要素）, インラインブロック（<a href="../display_position/display"><code>display : inline-block ;</code></a> を指定された要素）の最も近い祖先要素のボックスの内容辺（content edge）で形成される。</li>
<li>もし当該要素が &quot;<code>position : fixed ;</code>&quot; と指定されている場合、包含ブロックは連続メディアの表示域によって設定される。ページ付けメディアの場合はページボックスの表示域になる。</li>
<li>もし当該要素が &quot;<code>position : absolute ;</code>&quot; と指定されている場合、包含ブロックは、初期包含ブロック（initial contining block）を包含ブロックとする。ただし、祖先要素に <code>position</code>プロパティの値が &quot;<code>absolute</code> | <code>relative</code> | <code>fixed</code>&quot; のいずれかである要素を持つ場合は、次の方法によって包含ブロックが決まる。<ol>
<li>その祖先要素がインラインレベルの要素（<a href="target#inline">インライン要素</a>、または <a href="../display_position/display"><code>display : inline ;</code></a> を指定された要素）である場合、包含ブロックはその祖先要素の <a href="../display_position/direction"><code>direction</code>プロパティ</a>の値に依存する。<ol>
<li>もし、<code>direction</code>プロパティの値が、&quot;<code>ltr</code>&quot;（left to right）である場合、包含ブロックの左上端は、祖先要素に生成される最初のボックスの左上端になり、右下端は、祖先要素の最後のボックスの内容辺の右下端に一致する。</li>
<li>もし、<code>direction</code>プロパティの値が &quot;<code>rtl</code>&quot;（right to left）である場合、右上端は祖先要素に生成される最初のボックスの右上端になり、左下端は、祖先要素の最後のボックスの内容辺の右下端になる。</li>
</ol></li>
<li>その他の場合は、包含ブロックは祖先要素の <a href="../box/padding"><code>padding</code>（パッディング）</a>辺によって形成される。</li>
</ol></li>
</ol>
<p><img src="../../img/containing_block.gif" width="389" height="324" alt="包含ブロックの関係を示した図" style="float:right;" />この定義を図に当てはめると、<a href="../../xhtml/dic/a"><code>a</code>要素</a>や <a href="../../xhtml/dic/strong"><code>strong</code>要素</a>の包含ブロックは <a href="../../xhtml/dic/p"><code>p</code>要素</a>の内容領域であり、その <code>p</code>要素の包含ブロックは <a href="../../xhtml/dic/div"><code>div</code>要素</a>の内容領域、その <code>div</code>要素の包含ブロックは <a href="../../xhtml/dic/body"><code>body</code>要素</a>の内容領域ということになります。</p>
<p>また、<code>body</code>要素はルート要素である <code>html</code>要素の矩形領域を包含ブロックとする初期包含ブロック（initial contining block）として機能します。通常、<code>html</code>要素, <code>body</code>要素に、ボックス関連プロパティの指定がなければ、<abbr title="User Agnet">UA</abbr> のデフォルトスタイルシートによる <code>body</code>要素の初期値である余白分（パディングとマージン）を除いて、UA が表示するスクロール分も含めたページ全体が <code>body</code>要素の内容領域となります。しかし、<code>html</code>要素に対して <code>width</code>プロパティ, <code>height</code>プロパティに &quot;<code>auto</code>&quot; 以外を指定すれば、UA の表示する初期値ではなくなり、初期包含ブロック（<code>html</code>要素の矩形領域）の横幅・高さが指定されたことになり、<code>body</code>要素の内容領域もこれに準ずることになります。</p>
<p>なお、<code>div</code>要素に &quot;<code>div { position : absolute ; }</code>&quot; の指定があり、<code>div</code>要素の親要素である <code>body</code>要素に対しては位置指定がされていないと仮定した場合、<code>div</code>要素は <code>body</code>要素の内容領域を包含ブロックに設定するのではなく、<code>html</code>要素の矩形領域である初期包含ブロックを包含ブロックとして設定します。これは、先の定義の「もし当該要素が &quot;<code>position : absolute ;</code>&quot; と指定されている場合、包含ブロックは、初期包含ブロック（initial contining block）を包含ブロックとする」に当てはまります。</p>
<p>このように各要素に設定された包含ブロックは、各要素の生成するボックスの位置やサイズの多くの設定の基準値として参照されることになります。そもそも、包含ブロックは <abbr title="Cascading Style Sheets, level 2">CSS2</abbr> の規格から <code>position</code>プロパティが導入されたことにより、各設定の基準値の参照が複雑化し、内容を整理する為に定義されたものです。複雑な仕様ですが、CSS を使いこなす上ではしっかりとその概念を理解しておかれることをお奨めします。</p>
<script type="text/javascript" src="/script/adsense2"></script>
<ul class="link">
<li class="prev"><a href="http://w3g.jp/css/guide/box_model" rel="prev" accesskey="P">ボックスモデル</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/property_pronunciation" 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>包含ブロック</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-02-01T11:26:33+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/contining_block</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 = '204';
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=204&amp;at=entry&amp;title=W3G" width="1" height="1" alt="" />
</noscript>
</body>
</html>
