clip

画像等を切り抜き表示する際に使用します。尚、切り抜き表示する対象の配置は、positonプロパティのabsoluteを指定する必要があるようです。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N6 / N7 / O6 / O7 / Fx1 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ clip : 値; }

▲PageTop

指定できる値

値 初期値 意味
rect 矩形(長方形・直角形)に切り抜きます。大きさの指定は次のような書式になります。
rec(上 右 下 左);
auto ○ 切り抜かれた領域は、指定された要素と同じ形・大きさになります。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
        #sample1 {
          position : absolute ;
          clip : rect(70px 100px 95px 0px) ;
        }
        a:hover #sample1 {
          background:transparent;
          clip : rect(0px 200px 220px 0px) ;
        }
    </style>
  </head>
  <body>
    <p>clipプロパティで一部を表示しています。</p>
    <div style="height:250px">
      <a href="#"><img src="../../../../images/development/htmlcss/image.gif"
             id="sample1" width="117" heghit="198" border="0" alt="clipサンプル画像"></a>
    </div>
    <p>マウスをのせると全体表示します。</p>
  </body>
</html>

表示結果

clipプロパティで一部を表示しています。

clipサンプル画像

マウスをのせると全体表示します。

▲PageTop

関連項目

CSS

position / overflow

▲PageTop

▲