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独自) 

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img