HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


要素の一部を切り取って表示する

CSSの書き方

clip:rect(上座標 右座標 下座標 左座標) ;

CSSの詳細情報
プロパティ名 clip 読み方 クリップ
初期値 auto 意味 要素の切り取り
サイズ指定
対象 ブロックレベル要素と置換要素
CSSレベル CSSレベル2 対応ブラウザ Windows MAC
継承 しない IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

一度表示した要素は「clip」プロパティでその一部を切り取ることができます。ただし、「clip」プロパティを指定する要素には同時に「position:absolute;」が指定されていなければなりません。

値の指定の仕方

「clip」プロパティは切り取る部分ではなく、切り取った残りの部分を座標によって指定します。値は「clip:rect(上 右 下 左);」のように、右回り(clockwise)で指定します。基準となる点は、「clip」プロパティを指定する要素の左上です。

切り取った残りの部分を要素の左上を基準に指定しますので、上と左の座標は切り取る長さを、下と右については切り取られて残った長さを指定することになります。

従って、例えば縦横100ピクセルの要素の周囲を10ピクセル削る場合は、「clip:rect(10px 90px 90px 10px);」と記述します。

CSS/HTMLサンプル

p {
width:200px;
height:200px;
background-color:#ffdff9;
position:absolute;
top:50px;
left:50px;
}

p.del { left:300px; clip:rect(20px 180px 180px 20px); }

通常の段落要素と周囲を20ピクセル削った要素を並べて表示 サンプル