clip 【要素を切り抜き表示する】
なし
clipプロパティは、要素を切り抜き表示したい場合に使用します(クリッピング)。 切り抜かれた外側の部分については、overflowプロパティで表示方法を指定します。 CSS2の仕様で指定できる切り抜きの形状は矩形のみです。
尚、clipプロパティによる指定は、positionプロパティでabsoluteが指定されている場合に有効となるようです。
切り抜き領域はボックスと同じ大きさ・形になります。top、right、bottom、leftという四つの値によって、ボックスの各辺からの距離を指定します。
auto
切り抜きは行われません。
rect
ボックスの上右下左それぞれの端から内側への距離を、数値に単位をつけて指定出来ます。※現在、ボックスの左上を基準として上右下左のそれぞれの距離を指定する仕様のブラウザが多いようです。
clipの使用例
CSSファイル
.sample001 {
clip: rect(10px, 20px, 20px, 10px);
width: 100px;
height: 100px;
background-color: #ffcccc;
margin: 10px;
}
.sample002 {
width: 100px;
height: 100px;
background-color: #ffcccc;
margin: 10px;
}
HTMLソース
<div class="sample001">切り抜き表示</div>
<div class="sample002">通常表示</div>
表示すると
切り抜き表示
通常表示
表示・配置関連項目
| overflow(x y) | はみ出た内容の表示方法を指定する |
| position | 要素の配置方法を指定する |
| top | 上からの配置位置(距離)を指定する |
| right | 右からの配置位置(距離)を指定する |
| bottom | 下からの配置位置(距離)を指定する |
| left | 左からの配置位置(距離)を指定する |
| display | 要素の形式(ブロック・インライン)を指定する |
| float | 左寄せ、右寄せ配置の指定 |
| clear | 回り込み(float)を解除する |
| z-index | 重なりの順序を指定する |
| visibility | ボックスの表示・非表示を指定する |
| clip | ボックスを切り抜き表示(クリッピング)する |
| direction | 文字表記の方向(左右)を指定する |
| unicode-bidi | Unicodeの文字表記の方向を上書きする |
| writing-mode | 文字表記の方向(縦横)を指定する(IE独自) |
