Edit

Page

Page title:

Page body:

[2]
> [[CSS 2.1]] では、[[箱]]の[[位置]]や[[大きさ]]の多くは[DFN[[RUBYB[包含ブロック]@en[containing block]]]]と呼ばれる[[矩形]]の[[箱]]の[[辺]]に対して計算します。通常、生成された[[箱]]は[[子孫]]の[[箱]]の[[包含ブロック]]として働きます。これを、[[箱]]がその[[子孫]]の[[包含ブロック]]を[DFN[[RUBY[確立][かくりつ]@en[establish]]]]するといいます。[Q[[[箱]]の[[包含ブロック]]]]という言葉は、[Q[その[[箱]]が存在する[[包含ブロック]]]]を意味します (その[[箱]]が生成する[[包含ブロック]]ではありません)。
> 各[[箱]]はその[[包含ブロック]]に対しての[[位置]]が与えられますが、[[包含ブロック]]によってその[[位置]]が制限されるわけではありません。[[溢れ]]ることがあります。

[SRC@en[[[CSS 2.1]] 9.1.2]]

* 仕様書

-[1] [[CSS 2.1]]
-- [CSECTION@en[9.1.2 Containing blocks]]
<http://www.w3.org/TR/2007/CR-CSS21-20070719/visuren.html#containing-block>
--[CSECTION@en[10.1 Definition of "containing block"]]
<http://www.w3.org/TR/2007/CR-CSS21-20070719/visudet.html#containing-block-details>

* 定義

[15] [[包含ブロック]]は次の通り定められています。 [SRC@en[[[CSS 2.1]] 10.1]]

- [[根要素]]の属する[[包含ブロック]]は[[初期包含ブロック]]です。
- それ以外の[[要素]]は、
-- [CODE(CSS)@en[[[position]]]] が [CODE(CSS)@en[[[relative]]]] や [CODE(CSS)@en[[[static]]]]
の場合、[[包含ブロック]]は[[ブロック水準箱]]、
[[表こま箱]]、[[行内ブロック箱]]のいずれか直近の[[祖先]]の[[内容辺]]により形成されます。
-- [CODE(CSS)@en[[[position]]]] が [CODE(CSS)@en[[[fixed]]]] の場合、
--- [[連続媒体]]の場合、[[包含ブロック]]は [[viewport]] です。
--- [[頁媒体]]の場合、[[包含ブロック]]は[[頁領域]]です。
-- [CODE(CSS)@en[[[position]]]] が [CODE(CSS)@en[[[absolute]]]] の場合、
[CODE(CSS)@en[[[position]]]] が [CODE(CSS)@en[[[absolute]]]]、
[CODE(CSS)@en[[[relative]]]]、[CODE(CSS)@en[[[fixed]]]] のいずれかである直近の[[祖先]]です。
--- [[祖先]]が[[行内水準]]の場合、[[包含ブロック]]はその [CODE(CSS)@en[[[direction]]]]
[[特性]]に依存し、
---- [CODE(CSS)@en[[[ltr]]]] の場合、[[包含ブロック]]の[[上辺]]・[[左辺]]はその[[祖先]]が生成した最初の[[箱]]、[[下辺]]・[[右辺]]は最後の[[箱]]の[[padding辺]]です。
---- [CODE(CSS)@en[[[rtl]]]] の場合、[[包含ブロック]]の[[上辺]]・[[右辺]]はその[[祖先]]が生成した最初の[[箱]]、[[下辺]]・[[左辺]]は最後の[[箱]]の[[padding辺]]です。
---- なお、[[包含ブロック]]の[[幅]]が[[負]]になることもあります。
--- [[祖先]]がそれ以外の場合、[[包含ブロック]]はその[[祖先]]の [[padding辺]]です。
--- そのような[[祖先]]が存在しない場合、[[包含ブロック]]は[[初期包含ブロック]]です。

[16] 逆の見方では、

- [[Viewport]] は [CODE(CSS)@en[[[fixed]]]] な[[箱]]の[[包含ブロック]]となります。
- [[初期包含ブロック]]はその[[子孫]]の[[箱]]や[[生成内容]]の[[包含ブロック]]となります。
- [[頁領域]]は[[包含ブロック]]となります。
-[11] [[絶対配置]]される[[箱]]は新しい[[包含ブロック]]を[[確立]]します。
[SRC@en[[[CSS 2.1]] 9.6]]
- [CODE(CSS)@en[[[position]]: [[fixed]]]] な[[箱]]は新しい[[包含ブロック]]を確立します。
- [CODE(CSS)@en[[[position]]: [[relative]]]] な[[要素]]が生成する[[箱]]全体を包み込む[[箱]]は新しい[[包含ブロック]]を[[確立]]します。
- [4] ほとんどの[[ブロック水準要素]]が生成する[[主要ブロック箱]]は、その[[子孫]]の[[箱]]や[[生成内容]]の[[包含ブロック]]となります。
[SRC@en[[[CSS 2.1]] 9.2.1]]
- [[表こま箱]]、[[行内ブロック箱]]は新しい[[包含ブロック]]を[[確立]]します。

* 包含ブロックに対する相対指定

:[3] [CODE(CSS)@en[[[<margin-width>]]]], [CODE(CSS)@en[[[<padding-width>]]]] の値 [CODE(CSS)@en[[[<percentage>]]]]:
[[包含ブロック]]の''[[幅]]'' 
[WEAK[([CODE(CSS)@en[[[margin-top]]]], [CODE(CSS)@en[[[padding-bottom]]]] でも。)]]
に対する値です。ただし、[[包含ブロック]]の幅がその[[要素]]自身に依存する場合の[[配置]]は未定義です。
[SRC@en[[[CSS 2.1]] 8.3, 8.4]]
:[5] [[絶対配置]]:[[絶対配置モデル]]ではその[[要素]]の[[箱]]の位置が[[包含ブロック]]に対して定められます。
[SRC@en[[[CSS 2.1]] 9.3, 9.3.1, 9.7]]
[CODE(CSS)@en[[[<percentage>]]]] は[[包含ブロック]]の[[高さ]]
[WEAK[([CODE(CSS)@en[[[top]]]], [CODE(CSS)@en[[[bottom]]]])]]
や[[幅]] [WEAK[([CODE(CSS)@en[[[right]]]], [CODE(CSS)@en[[[left]]]])]] に対する値です。
[SRC@en[[[CSS 2.1]] 9.3.2]]
[CODE(CSS)@en[[[top]]]] などの[[包含ブロック]]が[[ブロック水準要素]]に由来する場合、
[[padding辺]]からの距離とみなされます。
[SRC@en[[[CSS 2.1]] 9.3.2 Note]]
:[17] [CODE(CSS)@en[[[width]]]], [CODE(CSS)@en[[[min-width]]]], [CODE(CSS)@en[[[max-width]]]] の値 [CODE(CSS)@en[[[<percentage>]]]]:
[[包含ブロック]]の[[幅]]に対する値です。
[[包含ブロック]]の[[幅]]がその[[要素]]自身に依存する場合の[[配置]]は未定義です。
[SRC@en[[[CSS 2.1]] 10.2, 10.4]]
[CODE(CSS)@en[[[min-width]]]], [CODE(CSS)@en[[[max-width]]]] で[[包含ブロック]]の[[幅]]が[[負]]の時は、
[[使用値]]は [[0]] です。 [SRC@en[[[CSS 2.1]] 10.4]]
[[包含ブロック]]が[[ブロック水準要素]]に由来する場合、
[[padding箱]]の[[幅]]を使って計算します。 [[CSS1]] では[[内容箱]]でした。
[SRC@en[[[CSS 2.1]] 10.2 Note]]
:[20] [CODE(CSS)@en[[[height]]]], [CODE(CSS)@en[[[min-height]]]], [CODE(CSS)@en[[[max-height]]]] の値 [CODE(CSS)@en[[[<percentage>]]]]:
[[包含ブロック]]の[[高さ]]に対する値です。ただし[[包含ブロック]]の[[高さ]]が[[内容]]によって決まる非[[絶対配置]]の時は、
[CODE(CSS)@en[[[auto]]]]/[CODE(CSS)@en[[[none]]]]/[CODE(CSS)[[[0]]]] が[[算出値]]です。
[SRC@en[[[CSS 2.1]] 10.5, 10.7]]
:[22] [CODE(CSS)@en[[[text-indent]]]] の値 [CODE(CSS)@en[[[<percentage>]]]]:
[[包含ブロック]]の[[幅]]に対する値です。
[SRC@en[[[CSS 2.1]] 16.1]]

* 包含ブロックに対する位置決定

-[6] [[ブロック書式付け文脈]]では、[[箱]]は[[包含ブロック]]の[RUBYB[先頭]@en[top]]から順に垂直方向に配置されます。
[[箱]]の[[左外辺]]は[[包含ブロック]]の[[左辺]]に揃えて配置されます。
([[rtl]] なら[[右外辺]]、[[右辺]]。)
[SRC@en[[[CSS 2.1]] 9.4.1]]
-[7] [[行内書式付け文脈]]では、[[箱]]は[[包含ブロック]]の[RUBYB[先頭]@en[top]]から順に水平方向に配置されます。
(この[[箱]]が配置される矩形領域を[[行箱]]といいます。)
[SRC@en[[[CSS 2.1]] 9.4.2]]
-[8] [[行箱]]の[[幅]]は[[包含ブロック]]と丁度[[内接]]するように決まります。
ただし[[浮動]]の存在により縮まることがあります。
[SRC@en[[[CSS 2.1]] 9.4.2, 10.2]]
-[9] [[相対配置]]で [CODE(CSS)@en[[[left]]]] と [CODE(CSS)@en[[[right]]]] の両方が指定されていて矛盾する時
(「[RUBYB[制約が強すぎる]@en[over-constrained]]時」)、どちらが使われるかは
[[包含ブロック]]の [CODE(CSS)@en[[[direction]]]] により決まります
([CODE(CSS)@en[[[ltr]]]] なら [CODE(CSS)@en[[[left]]]] が勝ちます)。
[SRC@en[[[CSS 2.1]] 9.4.3]]
-[10] [[浮動箱]]は[[包含ブロック]]または他の[[浮動箱]]の[[外辺]]に自らの[[外辺]]が接する位置まで[[左]]または[[右]]に移動されます。
[SRC@en[[[CSS 2.1]] 9.5, 9.5.1]]
[[浮動箱]]の[[上外辺]]が[[包含ブロック]]の[[上辺]]より上にいってはなりません。
[SRC@en[[[CSS 2.1]] 9.5.1]]
-[14] [[段落埋め込み水準]]は[[包含ブロック]]の [CODE(CSS)@en[[[direction]]]]
により決めます。 [SRC@en[[[CSS 2.1]] 9.10]]
-[18] (1) [[行内置換要素]]で、 (2) [CODE(CSS)@en[[[height]]]] と
[CODE(CSS)@en[[[width]]]] の[[算出値]]が共に [CODE(CSS)@en[[[auto]]]] で、
(3) [[要素]]が[[内在比率]]を持ち、 (4) [[内在高]]や[[内在幅]]は持たず、
(5) [[包含ブロック]]の[[幅]]がその[[要素]]の[[幅]]に依存しない場合、
[CODE(CSS)@en[[[width]]]] の[[使用値]]は[[通常フロー]]の[[ブロック水準非置換要素]]と同じ[[等式]]により決定します。
[SRC@en[[[CSS 2.1]] 10.3.2]]
-[19] [[行内置換要素]]で[[内在幅]]が[[百分率値]]の場合、
[[包含ブロック]]の[[幅]]に対する比率として扱います。
ただし、[[包含ブロック]]の[[幅]]がその[[要素]]に依存する場合は[[内在幅]]はないものとします。
[SRC@en[[[CSS 2.1]] 10.3.2]]
- その他の場合の[[幅]]、[[高さ]]決定も[[包含ブロック]]に依存します。

* 関連

[13] [[スタック付け文脈]]と[[包含ブロック]]は必ずしも一致しません
[SRC@en[[[CSS 2.1]] 9.9.1]]。

[21] ある[[要素]]に対する [CODE(CSS)@en[[[overflow]]]] によってくりぬかれる対象となるのはその[[要素]]の[[子孫]]ですが、
[[子孫]]であっても、
- [[包含ブロック]]が [[viewport]] であるもの
- [[包含ブロック]]がその[[要素]]の[[祖先]]であるもの

は対象外となります。
[SRC@en[[[CSS 2.1]] 11.1.1]]

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)