11.1. ~overflowと切抜き
一般に、`塊~box$の内容は，~boxの内容~辺に閉込められるが、ある種の事例では，内容が~boxを `~overflow@ する — すなわち、内容が~boxの外側にはみ出すこともある。 例えば： ◎ Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:
- `塊~box$の中の`行l~box$は、行lを分断できないことより，塊~boxより幅広になり得る。 ◎ A line cannot be broken, causing the line box to be wider than the block box.
- 要素の `width$p ~propの値により、それが生成する`塊level~box$の横幅が，その`包含塊$より大きくされたとき。 ◎ A block-level box is too wide for the containing block. This may happen when an element's 'width' property has a value that causes the generated block box to spill over sides of the containing block.
- 要素の縦幅が，`包含塊$に明示的にあてがわれている縦幅を超過するとき（包含塊の縦幅は，内容による縦幅ではなく `height$p ~propから決定されているときなど）。 ◎ An element's height exceeds an explicit height assigned to the containing block (i.e., the containing block's height is determined by the 'height' property, not by content height).
- `絶対位置され$た~boxの一部が その先祖~boxの外側にはみ出るとき。 はみ出ている部分が，先祖~上の `overflow$p ~propにより切取られる場合、より遠い先祖においては，はみ出なくなり得る。 ◎ A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block
- ~boxの外側に位置させるような， ~marginが負にされた 子孫~boxがあるとき。 ◎ A descendant box has negative margins, causing it to be positioned partly outside the box.
- `text-indent^p ~propにより、`塊~box$の 左端／右端 辺より外へずらされた`行内~box$があるとき。 ◎ The 'text-indent' property causes an inline box to hang off either the left or right edge of the block box.
~boxの内容が~overflowするときは、 `overflow$p ~propが，［ 内容が~boxの~padding辺で切取られるかどうか ］, および その場合に［ 切取られた内容に~accessするための~scroll-UIが供されるかどうか ］を指定する。 ◎ Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.
11.1.1. ~overflow： `overflow^p ~prop
◎名 `overflow@p ◎値 `visible$v | `hidden$v | `scroll$v | `auto$v ◎初 `visible$v ◎適 `塊~容器$ ◎継 されない ◎百 受容しない ◎媒 `視覚的$ ◎算 指定値 ◎表終この~propは、次の二つを指定する：
- 塊~容器~要素の内容が，自身の~boxを~overflowするときに、~overflowした内容が切取られるかどうか。 これは、［ 要素の子孫のうち，その`包含塊$が［ 表示域または要素の先祖であるもの ］（および，その内容） ］を除く，要素の内容すべての切取りに影響する。
- 【連続的~媒体の下で、画面~上に】 要素に対し、~scroll-UIが（~scrollbar等として）供されるかどうか。
- `visible@v
- この値は、内容は切取られないことを指示する。 すなわち、`塊~box$の外側にも，内容は描画され得る。 ~scroll-UIは，供されないことになる。 ◎ This value indicates that content is not clipped, i.e., it may be rendered outside the block box.
- `hidden@v
- この値は、内容は切取られること, および［ 切抜き領域の外側の内容を見れるようにする~scroll-UIは，供されるべきでない ］ことを指示する。 ◎ This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.
- `scroll@v
- この値は、内容は切取られること, および［ 内容が切取られたかどうかの有無に関わらず、~scroll-UIを供する~UAは，それを表示するべきである ］ことを指示する。 これは、動的~環境にて~scrollbarが現れたり消えたりする問題を避ける。 ◎ This value indicates that the content is clipped and that if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment.＼
- 印刷~媒体に対しては、~overflowしている内容が印刷されてもよい。 ◎ When this value is specified and the target medium is 'print', overflowing content may be printed.
- `auto@v
- `auto$v 値の挙動は~UAに依存するが、~overflowしている~boxに対しては，~scroll-UIが供されるべきである。 ◎ The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.
`overflow$p が `visible$v に設定されたとしても、~UAの文書~windowからはみ出る内容は，~OS環境により切取られ得る。 【通常は、下に述べるように表示域に~scrollbarが示されることになるであろうが。】 ◎ Even if 'overflow' is set to 'visible', content may be clipped to a UA's document window by the native operating environment.
~UAは、次に与える要素 %E 上に設定された `overflow$p ~propについては，それを表示域に適用し~MUST：
-
次の条件すべてが満たされるならば…：
- 現在の文書は HTML ／ XHTML 文書である, かつ
- 根~要素である `html^e 要素~上の値は `visible$v である, かつ
- 根~要素の子に `body^e 要素がある
…ならば、 %E は，上述の `body^e 要素のうち，最初のもの。
- 他の場合の %E は、根~要素。
表示域に対する `visible$v 値は、 `auto^v として解釈され~MUST — その場合でも、値を伝播させた要素 %E の `overflow$p の使用値は， `visible$v のままにされ~MUST。
◎ UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.要素の~boxの辺~上に~scrollbarを配置する場合、それは［ ~borderの内縁と~paddingの外縁 ］の合間（~padding辺）に挿入されるべきである。 ~scrollbarが占める空間は、その~scrollbarを伴う要素により形成される`包含塊$から差し引かれる（その寸法から減算される）べきである。 ◎ In the case of a scrollbar being placed on an edge of the element's box, it should be inserted between the inner border edge and the outer padding edge. Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.
【 それに伴い、内容~boxの~size（ `width$p ／ `height$p の使用値）は変化し、包含塊に相対的な百分率による長さは，~scrollbarの有無により異なることになる。 】
次の HTML による引用文の例を考える： ◎ Consider the following example of a block quotation (<blockquote>) that is too big for its containing block (established by a <div>). Here is the source:
<div>
<blockquote>
I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.
<cite>— Groucho Marx</cite>
</blockquote>
</div>
生成される~boxの~sizeと~styleを制御する CSS 片は： ◎ Here is the style sheet controlling the sizes and style of the generated boxes:
div {
background: silver;
width : 8em;
height: 8em;
border: thin solid red;
}
blockquote {
width : 11em;
height: auto;
margin: 4em;
border: thin dashed black;
}
cite {
display: block;
text-align: right;
}
`p^e ~boxは，その`包含塊$（外側の `div^e により確立される）より大きくされている。 その呈示は、 `div^e 上の `overflow$p 値に応じて，次の様になる：
| `overflow$p | 説明 | 利用中の~UAによる呈示 |
|---|---|---|
| `visible$v （初期値） | ~overflowする内容は 切取られずに整形され、周囲と重なることになる。 |
I didn't like the play, but then I saw it under adverse conditions - the curtain was up. — Groucho Marx |
| `hidden$v | ~overflowする内容は 切取られ、~scrollbarも示されない。 | |
| `scroll$v | ~UAが可視~scroll-UIを~supportするならば、常に~scrollbarが示される。 |
I didn't like the play, but then I saw it under adverse conditions - the curtain was up. — Groucho Marx |
| `auto$v | ~scrollbarは、~overflowするときに限り， `scroll$v のときと同様に示されるであろう。 | |
包含塊に相対的な~sizeにされた~boxの~sizeが，~scrollbarの有無に応じて変化する例：
| `overflow^p: `visible$v | `overflow^p: `scroll$v |
|---|---|
|
|
|
図左, 図右のいずれの HTML も、 `overflow$p を除いて，次の様な~styleにされている：
<div style="width:10em; height:4em; border:solid black 1px;"> <div style="width:50%; height:50%; background:pink;"></div> </div>
~~最後に、`絶対位置され$た要素の親に， `overflow$p が設定されている例を考える。 ~stylesheetは： ◎ Finally, consider this case where an absolutely positioned element is mixed with an overflow parent. ◎ Style sheet:
container { position: relative; border: solid; }
scroller { overflow: scroll; height: 5em; margin: 5em; }
satellite { position: absolute; top: 0; }
body { height: 10em; }
文書~片（ XML ）は： ◎ Document fragment:
<container> <scroller> <satellite/> <body/> </scroller> </container>
この例の `scroller^e 要素は，~overflowする内容を切取って~scrollするが、 `satellite^e 要素は~scrollされない — `satellite^e の`包含塊$は， `scroller^e の外側にある `container^e 要素により形成されるので。 ◎ In this example, the "scroller" element will not scroll the "satellite" element, because the latter's containing block is outside the element whose overflow is being clipped and scrolled.
11.1.2. 切抜き領域： `clip^p ~prop
`切抜き領域@ は、要素の~border~boxのどの部位が可視になるかを定義する。 既定では，要素は切抜かれないが、 `clip$p ~propで 明示的に切抜き領域を設定できる。 ◎ A clipping region defines what portion of an element's border box is visible. By default, the element is not clipped. However, the clipping region may be explicitly set with the 'clip' property.
◎名 `clip@p ◎値 `shape$t | `auto$v ◎初 `auto$v ◎適 `絶対位置され$た要素 ◎継 されない ◎百 受容しない ◎媒 `視覚的$ ◎算 指定値（ `shape$t の中の `auto^v 値も含め） ◎ 'auto' if specified as 'auto', otherwise a rectangle with four values, each of which is 'auto' if specified as 'auto' and the computed length otherwise ◎表終`clip$p ~propは、`絶対位置され$た要素のみに適用される。 各種 値の意味は： ◎ The 'clip' property applies only to absolutely positioned elements. Values have the following meanings:
- `auto@v
- 要素は切抜かれない。 ◎ The element does not clip.
- `shape@t = rect( `top$t, `right$t, `bottom$t, `left$t )
- ~CSS_2では、この構文による `shape^t 値のみが妥当である。 引数の［ `top$t ／ `right$t ／ `left$t ／ `bottom$t ］は、~boxの［ 上端／左端／上端／左端 ］~border辺から，切抜き領域の［ 上端／右端／下端／左端 ］辺までの~offsetを指定する。 ◎ In CSS 2, the only valid <shape> value is: rect(<top>, <right>, <bottom>, <left>) where <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box.＼
- 作者は、各~offset引数を~commaで区切るべきである。 ~UAは、~commaによる区切りを~supportし~MUST。 また、~commaなしの（空白）区切りを~supportしてもよい（ただし，~commaとの組み合せは不可とする） — この仕様の以前の改訂では、これに関して多義的であったので。 ◎ Authors should separate offset values with commas. User agents must support separation with commas, but may also support separation without commas (but not a combination), because a previous revision of this specification was ambiguous in this respect.
-
［ `top@t ／ `right@t ／ `bottom@t ／ `left@t ］は、 `length$t 値または `auto$v をとり得る。 `length$t に対する負の値も許可される。 値 `auto$v は、切抜き領域の対応する辺を，要素により生成される~border~boxの辺と同じにすることを意味する — すなわち `auto$v は：
- `top$t, `left$t に対しては： `0^v と同じになる。
- `bottom$t に対しては： ~boxの［ `width$p の使用値, 縦方向の［ ~padding幅, ~border幅 ］］の総和と同じになる。
- `right$t に対しては： ~boxの［ `height$p の使用値, 横方向の［ ~padding幅, ~border幅 ］］の総和と同じになる。
-
座標を画素~~単位に丸めるときは、次について配慮されるべきである：
- ［ `left^t, `right^t の値が同じとき ］, または［ `top^t, `bottom^t の値が同じとき ］には、可視になる画素は無いようにすること。
- これらの値がすべて `auto$v のときは、要素の~border~box内の全~画素が可視になるようにすること。
要素の切抜き領域の外側に来るような，要素のあらゆるものは、切取られる — 例えば，要素の［ 内容, 子孫, 背景, ~border, ~text装飾, 外形線, ~scrollbar ］など。 切取られた内容は~overflowを生じさせない。 ◎ An element's clipping region clips out any aspect of the element (e.g., content, children, background, borders, text decoration, outline and visible scrolling mechanism — if any) that is outside the clipping region. Content that has been clipped does not cause overflow.
要素の先祖も，その内容のある部位を切取るかもしれない（例えば， 先祖~自身の `clip$p ~propや，先祖の `overflow$p ~propが `visible$v でない場合）。 描画されるものは、それらの共通部分になる。 ◎ The element's ancestors may also clip portions of their content (e.g., via their own 'clip' property and/or if their 'overflow' property is not 'visible'); what is rendered is the cumulative intersection.
切抜き領域の中の，~UAの文書~window境界を超過する部分は、~OS環境により切取られ得る。 ◎ If the clipping region exceeds the bounds of the UA's document window, content may be clipped to that window by the native operating environment.
次の規則は： ◎ Example: The following two rules:
div {
clip: rect(1em, 11em, 9em, 1em);
}
`div^e の~border辺の外縁［ 横幅 × 縦幅 ］が［ 10em × 11em ］ならば、次の図に示される破線で囲まれた，矩形の切抜き領域を作成することになる： ◎ and assuming both Ps are 50 by 55 px, will create, respectively, the rectangular clipping regions delimited by the dashed lines in the following illustrations:
| `clip^css の適用前 | 切抜き領域（黄色） | `clip^css の適用後 |
|---|---|---|
|
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
らりるれろ
わをん
|
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
らりるれろ
わをん
|
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
らりるれろ
わをん
|
~CSS_2においては、切抜き領域は矩形状に限られることに注意。 将来の拡張では、矩形でない切抜きも許可されるものと見込まれている。 また，将来の更新では、上端／左端 のみからの~offsetに代わって，各~辺からの~offsetで図形を与えるための構文が再~導入されるかもしれない。 ◎ Note. In CSS 2, all clipping regions are rectangular. We anticipate future extensions to permit non-rectangular clipping. Future updates may also reintroduce a syntax for offsetting shapes from each edge instead of offsetting from a point.
11.2. 可視性： `visibility^p ~prop
◎名 `visibility@p ◎値 `visible$v | `hidden$v | `collapse$v ◎初 `visible$v ◎適 すべての要素 ◎継 される ◎百 受容しない ◎媒 `視覚的$ ◎算 指定値 ◎表終`visibility$p ~propは、要素が生成する~box（たち）を描画する（可視にする）かどうかを指定する。 ~boxは、不可視にされても，依然として~layoutには影響する（対して、 `display$p ~propに対する `none^v は，~box生成を抑止する）。 各種 値の意味は： ◎ The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether). Values have the following meanings:
- `visible@v
- 生成される~boxは可視になる。 ◎ The generated box is visible.
- `hidden@v
- 生成される~boxは不可視になる（全部的に透明, かつ 何も描かれない）が、依然として ~layoutには影響する。 加えて、要素の子孫であっても， `visibility$p が `visible$v にされたものは可視になる。 ◎ The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.
- `collapse@v
- ~tableにおける ~row／~colに対する動的な効果 節にあたられたし。 この値は、［ ~row ／ ~row~group ／ ~col ／ ~col~group ］以外の要素で利用された場合には， `hidden$v と同じ意味になる。 ◎ Please consult the section on dynamic row and column effects in tables. If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'.
- 【 この値は、~tableの~colや~rowを まるごと消す（空間も占めなくなる）が、~table他の~layout（~cell幅など）は，消されないときと同じに保たせる。 】【 ~row ／ ~row~group に対しては、消すだけなら `display$p: `none^v で代用できる。 】【 特に， ~col／~col~group に対しては、正しく機能しない~UAもある。 あるいは，~tableの `border-collapse^p が `collapse^v にされている場合も。 】
この~propは、~scriptその他の動的な効果と一緒に利用できる。 ◎ This property may be used in conjunction with scripts to create dynamic effects.
次の例では、 "選択肢３" を選んだときだけ，追加の~~入力欄が示される。
HTML は次の様になっている。
<fieldset>
<label><input type="radio" name="options">選択肢１</label>
<label><input type="radio" name="options">選択肢２</label>
<input type="radio" name="options" id="option3">
<label for="option3">選択肢３…</label>
<div id="more-options">
<label>パスワード：<input type="password"></label>
</div>
</fieldset>
CSS は次の様になっている。 `div id="more-options"^e 要素は，普段は隠されているが（ `hidden$v ）、選択肢３（ `input id="option3^e ）が選ばれたときだけ，（ `:checked^css 疑似類 と 後続~同胞 結合子 を通して）可視になる（ `visible$v ）：
#more-options {
visibility: hidden;
padding-left: 2em;
}
#option3:checked ~ #more-options {
visibility: visible;
}
`collapse$v の用例。 次の 3 行, 3 列の HTML ~tableが与えられた下で：
| 行1, 列1 | 行1, 列2 ＋α | 行1, 列3 |
| 行2, 列1 ＋α | 行2, 列2 ＋α | 行2, 列3 ＋α |
| 行3, 列1 | 行3, 列2 ＋α | 行3, 列3 |
2 行目, 2 列目（の `tr^e, `col^e 要素）に `visibility^p: `collapse^v をあてがったとき、利用中の~UAによる呈示は，次の様になる：
| 行1, 列1 | 行1, 列2 ＋α | 行1, 列3 |
| 行2, 列1 ＋α | 行2, 列2 ＋α | 行2, 列3 ＋α |
| 行3, 列1 | 行3, 列2 ＋α | 行3, 列3 |