説明
clip: clip; C2- ie4- N4-
| 値: | <形> | auto | inherit |
デフォルトの見える範囲は、ボックスと同じ大きさ、形ですが、clipプロパティでは見える範囲を修正することができます。
clipプロパティは、はみ出し部分の表示方法を指定する「overflow:visible;」以外の値を持つブロック要素および、置換要素の見える範囲を指定するのに用いられます。(*1 *2)
*1 IE、Firefox(Gecko)、Operaなどの既存のブラウザでは、ボックスの上辺と左辺を基準とした位置を指定する仕様となっています。現状において、W3CのCSS2におけるclipプロパティの仕様は、多くのブラウザにおいてサポートされていません。
*2 CSS2.1において、clipプロパティの仕様は既存のブラウザの実装に合わせる形で変更が行われました。適用要素を絶対配置(position:absolute)された要素とし、ボックスの上辺と左辺を基準とした見える範囲(表示域)を長さを用いて「rect(上,右,下,左)」という矩形で指定するよう変更されました。
clipプロパティは、はみ出し部分の表示方法を指定する「overflow:visible;」以外の値を持つブロック要素および、置換要素の見える範囲を指定するのに用いられます。(*1 *2)
*1 IE、Firefox(Gecko)、Operaなどの既存のブラウザでは、ボックスの上辺と左辺を基準とした位置を指定する仕様となっています。現状において、W3CのCSS2におけるclipプロパティの仕様は、多くのブラウザにおいてサポートされていません。
*2 CSS2.1において、clipプロパティの仕様は既存のブラウザの実装に合わせる形で変更が行われました。適用要素を絶対配置(position:absolute)された要素とし、ボックスの上辺と左辺を基準とした見える範囲(表示域)を長さを用いて「rect(上,右,下,左)」という矩形で指定するよう変更されました。
使用例 (C2)
<p style="overflow:auto; clip:rect(5px, 10px, 10px, 5px)">
子供の頃は舞台というものが嫌いだった。だから、舞台の幕が開くときなんかは、いつだって緊張のあまり呼吸が浅くなった。
- グルーチョ・マルクス
</p>
clip プロパティの値 |
|
既存のブラウザにおける見える範囲の指定 C21- ie4- N4-
既存のブラウザでは、適用要素を絶対配置(position:absolute)された要素とし、ボックスの上辺と左辺を基準とした見える範囲(表示域)を長さを用いて「rect(上,右,下,左)」という矩形で指定します。負の値を指定することもできます。値に「auto」を指定した場合には、その値は「0」となります(*3)。
*3 この仕様はCSS2.1から正式に採用されました。 文字方向が左→右の場合左辺からの長さ、右→左の場合右辺からの長さとなります。また、絶対配置のボックスにもマージンは存在しますが、CSS2.1の仕様書の「clipプロパティ」におけるボックスにマージンは含まれません。
指定方法もCSS2のものとは大きく異なり、それぞれボックスの、上辺から表示域までの空白域、左辺からの表示域、上辺からの表示域、左辺から表示域までの空白域、の順序で値を指定します。「overflow」の値も関係ありません。
下の2つのルールは、点線で描かれた矩形の表示域を生成します(p要素は「position:absolute」であるものとします)。実線で描かれた矩形はボーダー、パディングを含むボックスを表します(「clipプロパティ」におけるボックスにマージンは含まれません)。
*3 この仕様はCSS2.1から正式に採用されました。 文字方向が左→右の場合左辺からの長さ、右→左の場合右辺からの長さとなります。また、絶対配置のボックスにもマージンは存在しますが、CSS2.1の仕様書の「clipプロパティ」におけるボックスにマージンは含まれません。
指定方法もCSS2のものとは大きく異なり、それぞれボックスの、上辺から表示域までの空白域、左辺からの表示域、上辺からの表示域、左辺から表示域までの空白域、の順序で値を指定します。「overflow」の値も関係ありません。
下の2つのルールは、点線で描かれた矩形の表示域を生成します(p要素は「position:absolute」であるものとします)。実線で描かれた矩形はボーダー、パディングを含むボックスを表します(「clipプロパティ」におけるボックスにマージンは含まれません)。
p { clip: rect(5px, 40px, 45px, 5px); }
p { clip: rect(5px, 55px, 45px, 5px); }
