前   次   目次   プロパティ   索引  

11 視覚効果

目次

11.1 オーバーフローとクリッピング

一般的に、ブロックボックスの内容はボックスの内容エッジに制限されます。ただし、場合によってはボックスがオーバーフローし、その内容が部分的または完全にボックスの外側にあることがあります。例:

オーバーフローが発生する場合、'overflow'プロパティは、ボックスがパディングエッジにクリッピングされるかどうか、またクリッピングされた内容にアクセスするためのスクロール機構が提供されるかどうかを指定します。

11.1.1 オーバーフロー: 'overflow' プロパティ

名前: overflow
値: visible | hidden | scroll | auto | inherit
初期値: visible
適用対象: ブロックコンテナおよびフォーマットコンテキストを確立するボックス
継承: いいえ
パーセンテージ: N/A
メディア: 視覚
計算値: 指定通り

このプロパティは、ブロックコンテナ要素の内容が要素のボックスを超えた場合にクリッピングされるかどうかを指定します。これは、ビューポートや要素の祖先が含む子孫要素（およびそれらの内容および子孫）を除いた、要素のすべての内容のクリッピングに影響します。 値の意味は以下の通りです:

visible
この値は、内容がクリッピングされないことを示します。つまり、ブロックボックス外に描画される可能性があります。
hidden
この値は、内容がクリッピングされ、クリッピング領域外の内容を表示するスクロールユーザーインターフェースが提供されないことを示します。
scroll
この値は、内容がクリッピングされ、ユーザーエージェントが画面上に表示されるスクロール機構（スクロールバーやパンナーなど）を使用する場合、その機構が内容がクリッピングされているかどうかに関係なくボックスに対して表示されることを示します。これにより、動的環境でスクロールバーが表示されたり非表示になったりする問題を回避できます。 この値が指定され、対象となるメディアが「印刷」の場合、オーバーフローした内容が印刷されることがあります。 テーブルボックスに使用される場合、この値は 'visible' と同じ意味を持ちます。
auto
'auto' 値の動作はユーザーエージェント依存ですが、オーバーフローボックスにはスクロール機構が提供されるべきです。 テーブルボックスに使用される場合、この値は 'visible' と同じ意味を持ちます。

'overflow' が 'visible' に設定されていても、内容はネイティブのオペレーティング環境によってUAのドキュメントウィンドウにクリッピングされることがあります。

テーブル要素（'display: table'）では、'overflow' はテーブルボックスに適用されます （つまり、テーブルラッパーボックスではありません）し、'hidden' 以外のすべての値は 'visible' として扱われます。

ユーザーエージェントはルート要素に設定された 'overflow' プロパティをビューポートに適用する必要があります。 ルート要素がHTMLの "HTML" 要素またはXHTMLの "html" 要素であり、その要素がHTMLの "BODY" 要素またはXHTMLの "body" 要素を子として持つ場合、ユーザーエージェントは代わりに、ルート要素の値が 'visible' の場合に最初のそのような子要素からの 'overflow' プロパティをビューポートに適用する必要があります。 ビューポートで使用される 'visible' 値は 'auto' として解釈されなければなりません。この値が伝播される要素は、使用される 'overflow' の値が 'visible' でなければなりません。

要素のボックスの端にスクロールバーが配置される場合、それは内側のボーダーエッジと外側のパディングエッジの間に挿入されるべきです。スクロールバーが占めるスペースは、スクロールバーを持つ要素によって形成されるコンテナブロックの寸法から差し引かれるべきです。

例:

次の例では、含むブロック（<div>）に対して大きすぎるブロック引用（<blockquote>）を考えます。以下はソースコードです:


<div>
<blockquote>
<p>劇が好きではありませんでしたが、不利な条件で見ました - カーテンが上がっていました。</p>
<cite>- グルーチョ・マルクス</cite>
</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
      }

cite { display: block;
       text-align : right; 
       border: none
       }

'overflow' の初期値は 'visible' なので、 <blockquote> はクリッピングされず次のようにフォーマットされます:

Rendered overflow   [D]

一方、<div> に'overflow' を 'hidden' に設定すると、 <blockquote> は含む <div> によってクリッピングされます:

Clipped overflow   [D]

'scroll' の値を設定すると、クリッピングされた内容にユーザーがアクセスできるように、可視スクロール機構をサポートするユーザーエージェントがそれを表示することを示します。

最後に、絶対位置要素がオーバーフローペアレントと混在する場合を考えます。

スタイルシート: 


  container { position: relative; border: solid; }
  scroller { overflow: scroll; height: 5em; margin: 5em; }
  satellite { position: absolute; top: 0; }
  body { height: 10em; }

ドキュメントの断片: 


  <container>
   <scroller>
    <satellite/>
    <body/>
   </scroller>
  </container>

この例では、「scroller」要素は「satellite」要素をスクロールしません。なぜなら後者のコンテナブロックがクリッピングおよびスクロールされている要素の外側にあるためです。

11.1.2 クリッピング: 'clip' プロパティ

クリッピング領域は要素の ボーダーボックスのどの部分が表示されるかを定義します。 デフォルトでは、要素はクリッピングされません。ただし、'clip' プロパティを使用してクリッピング領域を明示的に設定できます。

名前: clip
値: <shape> | auto | inherit
初期値: auto
適用対象: 絶対位置指定された要素
継承: いいえ
パーセンテージ: N/A
メディア: 視覚
計算値: 'auto' が指定された場合は 'auto'、それ以外の場合は4つの値を持つ矩形。それぞれの値は 'auto' が指定された場合は 'auto'、それ以外は計算された長さ

'clip' プロパティは絶対位置指定された要素にのみ適用されます。 値の意味は以下の通りです。

auto
要素はクリッピングされません。
<shape>
CSS 2.2 では、有効な <shape> 値は次の通りです: rect(<top>, <right>, <bottom>, <left>) ここで <top> と <bottom> はボックスの上ボーダーエッジからのオフセットを指定し、<right>, と <left> はボックスの左ボーダーエッジからのオフセットを指定します。著者はオフセット値をコンマで区切るべきです。ユーザーエージェントはコンマでの区切りをサポートしなければなりませんが、コンマなしの区切りもサポートする場合があります（ただし、組み合わせは不可）。これは以前の仕様のリビジョンで曖昧だったためです。

<top>, <right>, <bottom>, および <left> は <length> 値または 'auto' を持つことができます。負の長さも許可されています。値 'auto' は、クリッピング領域の特定のエッジが要素の生成されたボーダーボックスのエッジと同じになることを意味します（つまり、'auto' は <top> と <left> に対しては '0' と同じ、<bottom> に対しては高さの使用値と垂直パディングおよびボーダー幅の合計と同じ、<right> に対しては幅の使用値と水平パディングおよびボーダー幅の合計と同じ意味になります）。これにより、4つの 'auto' 値が要素のボーダーボックスと同じクリッピング領域を生成します。

座標がピクセル座標に丸められる場合、<left> と <right> が同じ値を持つ場合（または <top> と <bottom> が同じ値を持つ場合）にピクセルが可視のままにならないように、逆にそれらの値が 'auto' の場合に要素のボーダーボックス内のピクセルが隠れないように注意する必要があります。

要素のクリッピング領域は、クリッピング領域外の要素のあらゆる側面（例：内容、子孫、背景、ボーダー、テキスト装飾、アウトライン、および可視スクロール機構など）をクリップします。 クリップされた内容はオーバーフローを引き起こしません。

要素の祖先も（自身の 'clip' プロパティや、 'overflow' プロパティが 'visible' でない場合により）内容の一部をクリップすることがあります。レンダリングされるのは累積的な交差部分です。

クリッピング領域がUAの ドキュメントウィンドウの境界を超える場合、内容はネイティブオペレーティング環境によってそのウィンドウにクリップされることがあります。

例:

例: 以下の2つのルール:

p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }

両方の P がそれぞれ 50x55 px だと仮定すると、それぞれ次の図に示す点線で区切られた矩形のクリッピング領域を生成します:

2つのクリッピング領域   [D]

注意。 CSS 2.2 では、すべてのクリッピング領域は矩形です。将来的には非矩形クリッピングを許可する拡張が行われることを期待しています。また、将来の更新では各エッジからのオフセットではなく、点からのオフセットとして形状をオフセットする構文が再導入される可能性もあります。

11.2 可視性: 'visibility' プロパティ

名前: visibility
値: visible | hidden | collapse | inherit
初期値: visible
適用対象: すべての要素
継承: はい
パーセンテージ: N/A
メディア: 視覚
計算値: 指定通り

'visibility' プロパティは、 要素によって生成されるボックスがレンダリングされるかどうかを指定します。不可視のボックスもレイアウトに影響を与えます（ボックスの生成を完全に抑制するには、'display' プロパティを 'none' に設定してください）。値の意味は以下の通りです:

visible
生成されたボックスは可視です。
hidden
生成されたボックスは不可視（完全に透明で何も描画されない）ですが、レイアウトには影響を与えます。また、要素の子孫は 'visibility: visible' の場合、可視になります。
collapse
テーブル内の 動的な行や列の効果に関するセクションを参照してください。行、行グループ、列、または列グループ以外の要素に使用される場合、'collapse' は 'hidden' と同じ意味を持ちます。

このプロパティはスクリプトと組み合わせて動的効果を作成するために使用されることがあります。

以下の例では、いずれかのフォームボタンを押すと、対応するボックスが可視になり、もう一方が不可視になるように、著者定義のスクリプト関数が呼び出されます。これらのボックスは同じサイズと位置を持つため、効果としては一方がもう一方に置き換わるように見えます。（スクリプトコードは仮想スクリプト言語で記述されています。CSS対応UAでは効果がある場合とない場合があります。） 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD><TITLE>動的可視性の例</TITLE>
<META 
 http-equiv="Content-Script-Type"
 content="application/x-hypothetical-scripting-language">
<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>容疑者を選択してください:</P>
<DIV id="container1">
   <IMG alt="アル・カポネ" 
        width="100" height="100" 
        src="suspect1.png">
   <P>名前: アル・カポネ</P>
   <P>居住地: シカゴ</P>
</DIV>

<DIV id="container2">
   <IMG alt="ラッキー・ルチアーノ" 
        width="100" height="100" 
        src="suspect2.png">
   <P>名前: ラッキー・ルチアーノ</P>
   <P>居住地: ニューヨーク</P>
</DIV>

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

前   次   目次   プロパティ   索引