Visual effects

一般に, ブロックボックスの内容はボックスの内容辺の内部にある。ボックスがオーバフローする, すなわち，その内容の一部又は全部がボックスからはみ出す場合もある。その例を次に示す。

オーバフローが発生する場合は, 'overflow'特性がボックスをどのように切り取るか，及びボックスを切り取るかどうかを指定する。'clip'特性は切取り領域のサイズ及び形状を指定する。切取り領域を小さく指定すると，本来見えるはずの内容が切り取られることもある。

11.1.1 オーバフロー( 'overflow' 特性)

この特性は，内容の包含ブロックとして動作している要素のボックスをオーバフローする場合に，ブロックレベル要素の内容が切り取られるかどうかを指定する。値には次の意味がある。

'overflow' が'visible'に設定されても，基本操作環境によっては，内容は利用者エージェントの文書ウィンドウの大きさに切り取られることがある。

ブロック引用(BLOCKQUOTE)がDIVにより設定された内容ブロックにおさまらない例を考慮する。ソース文書を次に示す。

<DIV>
<BLOCKQUOTE>
<P>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.
<DIV class="attributed-to">- Groucho Marx</DIV>
</BLOCKQUOTE>
</DIV>

ここでは，スタイルシートが生成されるボックスのサイズ及びスタイルを制御している。

DIV { width : 100px; height: 100px;
      border: thin solid red;
      }

BLOCKQUOTE   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px; 
      border: thin dashed black
      }

DIV.attributed-to { text-align : right; }

'overflow'の初期値は'visible'であるため, BLOCKQUOTEは，切取りなしでフォーマットされることになる。この場合の図を次に示す。

Rendered overflow [D]

一方で，DIV要素について'overflow'を 'hidden'に設定すると， BLOCKQUOTEは包含ブロックにより切り取られることになる。

Clipped overflow [D]

'scroll'という値は，可視スクロール機構をサポートする利用者エージェントに，スクロール機構を表示することによって, 利用者が切り取られた内容にアクセスできることを知らせる。

11.1.2 切取り( 'clip'特性)

切取り領域は，要素のレンダリングされる内容のどの部分が見えるかを定義する。デフォルトの場合は, 切取り領域のサイズ及び形状は要素のボックスと同じである。しかし，切取り領域は 'clip'特性によって変更されることもある。

'clip'特性は'visible'以外の値をもつ'overflow'特性をもつ要素に適用される。値には次の意味がある。

'overflow' 特性が'visible'でない場合，要素の先祖も切取り領域をもつことがある。すなわち，様々な切取り領域の共通部分がレンダリングされる。

切取り領域が利用者エージェントの文書ウィンドウの境界を越える場合は，原操作環境によっては，内容はそのウィンドウのサイズに切り取られる。

次の二つの規則を考慮する。

P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }

これらは破線で区切られた長方形の切取り領域を生成する。それを次に図示する。

Two clipping regions [D]

11.2 可視性( 'visibility'特性)

'visibility'特性は，要素が生成するボックスがレンダリングされるかどうかを指定する。不可視のボックスもレイアウトに影響する。例えば，'display'特性が 'none'に設定されると，ボックスの生成も抑制される。値には次の意味がある。

この特性をスクリプトと組み合わせて使用することによって，動的な効果が生成される。

次の例では, いずれかのフォームボタンを押すと，利用者定義のスクリプト機能が呼び出され，対応するボックスを可視にし，その他のボックスを隠蔽する。これらのボックスのサイズ及び位置は同じであるため，一方のボックスが他方のボックスを置換する効果がある。スクリプトのコードは仮想的なスクリプト言語である。CSSを利用できる利用者エージェントが，必ず何らかの効果を得られるわけではない。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
   #container1 { position: absolute; 
                 top: 2in; left: 2in; width: 2in }
   #container2 { position: absolute; 
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="container1">
   <IMG alt="Al Capone" 
        width="100" height="100" 
        src="suspect1.jpg">
   <P>Name: Al Capone</P>
   <P>Residence: Chicago</P>
</DIV>

<DIV id="container2">
   <IMG alt="Lucky Luciano" 
        width="100" height="100" 
        src="suspect2.jpg">
   <P>Name: Lucky Luciano</P>
   <P>Residence: New York</P>
</DIV>

<FORM method="post" 
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button" 
          value="Capone" 
          onclick='show("container1");hide("container2")'>
   <INPUT name="Luciano" type="button" 
          value="Luciano" 
          onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>

値:	visible \| hidden \| scroll \| auto \| inherit
初期値:	visible
適用対象:	ブロックレベル要素及び置換要素
継承:	しない
パーセント:	N/A
メディア:	視覚メディア

値:	<shape> \| auto \| inherit
初期値:	auto
適用対象:	ブロックレベル要素及び置換要素
継承:	しない
パーセント:	N/A
メディア:	視覚メディア

値:	visible \| hidden \| collapse \| inherit
初期値:	inherit
適用対象:	すべての要素
継承:	しない
パーセント:	N/A
メディア:	視覚メディア

11 視覚効果

11.1 オーバフロー及び切取り

11.1.1 オーバフロー( 'overflow' 特性)

11.1.2 切取り( 'clip'特性)

11.2 可視性( 'visibility'特性)