視覚効果

Revised: Jun./22nd/2004

overflow

プロパティ 'overflow' は、ブロックレベルの要素と 置換要素(img, input, textarea, select, object)に指定可能です。セレクタにマッチした対象のブロックが、包含ブロックのボックスからはみ出す場合の視覚効果を指定します。

プロパティ 'overflow'
プロパティ名
overflowvisible | hidden | scroll | auto | inherit

'overflow' は子要素に継承されません。'overflow' のデフォルトの値は visiblke です。inherit は、親要素の値を明示的に継承する指定です。

visible
包含ブロックのボックスにはみ出して表示。
hidden
トリミング(切り取り)された範囲外を表示せず、スクロール機構も提供しない。
scroll
トリミングされ、切り取られた範囲外へアクセスするためのスクロール機構が提供される。スクロール機構が提供されないメディア(printprojection)の場合は、オーバーフローした内容を印刷する。
auto
ユーザエージェントに依存する。オーバーフローする場合は、可能であればスクロール機構が提供されることが期待される。

擬似的なインラインフレームのような視覚効果が得られます。本文書では、pre 要素に対して、'overflow: auto' が指定してあります。ウィンドウの幅を狭くして、コード部分の表示形式が変更されるかどうか、確認してみてください。

clip

プロパティ 'clip' は、ブロックレベルの要素と 置換要素(img, input, textarea, select, object)に指定可能です。セレクタにマッチした対象の、トリミングされる領域を指定します。

プロパティ 'clip'
プロパティ名
clip<shape> | auto | inherit

'clip' は子要素に継承されません。'clip' のデフォルトの値は auto です。inherit は、親要素の値を明示的に継承する指定です。負の値が許されます。

auto
トリミングしない。要素のボックスサイズと同じだけ表示される。
<shape>
矩形領域を、ボックスの四辺からの <length> で指定する。指定する形式は次のようになる:rect(<top> <right> <bottom> <right>)<top>, <right>, <bottom>, <right> の値は、<length>auto の何れかで、auto が 0 と等価となる。

親要素が clip 領域を指定されている場合に、子要素でも clip 領域を指定していると、各々の共通部分だけがレンダリングされます。

clipプロパティの継承例
図:clip 領域の表示範囲

visibility

プロパティ 'visibility' は、任意の要素に指定可能です。セレクタにマッチした対象のボックスの、可視性を指定します。非可視化されても、ボックスは生成されるので、後続のレンダリングに影響します。

プロパティ 'visibility'
プロパティ名
visibilityvisible | hidden | collapse | inherit

'visibility' は子要素に継承されません。'visibility' のデフォルトの値は inherit です。inherit は、親要素の値を明示的に継承する指定です。負の値が許されます。

visible
ボックスが可視化される。
hidden
ボックスが非可視化される。透明にはなるが、ボックスは生成されるので、後続のレンダリングに影響する。
collapse
列の 'visibility' の値が 'collapse' に指定する場合、 列のセルは非可視化され、他の列にまたがるセルはトリミングされる。さらに、表の幅は切り取られた列の幅だけ狭くなる。その他の要素に指定した場合は、hidden と等価。

スクリプトと組み合わせて、動的な効果を得ることが期待されています。

div#dynamic { visibility : hidden }
function showDiv(idName){ 

  if(document.getElementById)
    document.getElementById(idName).style.visibility
                                           = 'visible' 
  else if(document.all)
    document.all(idName).style.visibility   = 'visible' 
}
<a href="javascript:showDiv('dynamic')">クリックすると <code>id="dynamic"</code> の
<code>div</code> 要素が表示されます。</a>
<div id="dynamic"><p>ここはデフォルトでは隠されています。</p></div>
クリックすると id="dynamic"div 要素が表示されます。

ここはデフォルトでは隠されています。

Copyright © 2004 SUGAI, Manabu. All rights reserved.
2004-06-22 published.
SEO [PR] ܂Ƃ߃[ Windows7 ₦΍ f ^T[o[ Cu`bg SEO