Your Search Results

    clip

    概要

    CSS の clip プロパティは、要素のどの部分が可視であるかを定義します。clip プロパティは position:absolute を持った要素にだけ適用されます。

    • 初期値auto
    • 適用対象絶対位置指定された要素
    • 継承しない
    • メディアvisual
    • 計算値auto 指定されていれば auto、それ以外は 4 つの値をともなう矩形。矩形の場合、各値は auto 指定されていれば auto、それ以外では計算値
    • アニメーションの可否矩形として可能
    • 正規順序形式文法で定義される一意のあいまいでない順序

    構文

    形式文法: <shape> | auto
    
    clip: rect(1px, 10em, 3rem, 2ch)
    clip: auto
    
    clip: inherit

    <shape>
    クリップの形状を示す矩形 <形状>
    rect(<top>, <right>, <bottom>, <left>)   /* 標準的な構文 */
    
    もしくは
    rect(<top> <right> <bottom> <left>)      /* 後方互換の構文 */
    <top><bottom> でボックス境界の上辺からのオフセットを指定し、<right><left> でボックス境界の左辺からのオフセットを指定します。
    <top>、<right>、<bottom>、<left><length> 値または auto のいずれかです。
    auto
    要素はクリップされません(デフォルト値)

    p { border:dotted;  position:relative; }
    
    #img2 {
      position:absolute;  left:263px;
    
      clip: rect(40px, 200px, 150px, 30px); 
      /* 標準的な構文。Internet Explorer の4-7 では非サポート */
    }
    
    #img3 {
      position: absolute; left:526px;
    
      clip: rect(40px  200px  150px  30px);
      /* 非標準的な構文。Firefox と IE を含む主要ブラウザすべてでサポートされています */
    }

    hut.jpg hut.jpg hut.jpg

    仕様書

    仕様書 策定状況 コメント
    CSS Transitions 草案 clip をアニメーション可能に定義
    CSS Level 2 (Revision 1) 勧告  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本サポート 1.0 1.0 (1.0) 4.0 7.0 1.0 (85)
    8.0
    このバージョンで正確なカンマ式の構文をサポート
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート ? ? ? ? ?

    関連情報

    添付ファイル

    ファイル サイズ 日時 添付者:
    hut.jpg
    18558 バイト 2009-06-05 14:20:11 Jürgen Jeka
    example.png
    17512 バイト 2012-02-12 00:34:27 syssgx

    Document Tags and Contributors

    Contributors to this page: sosleepy, ethertank
    最終更新者: ethertank,
    サイドバーを隠す