「clip」プロパティ

表示・配置

「clip」プロパティは、要素の切り抜き領域を指定するCSSプロパティです。
要素の切り抜き領域を指定する値は、「上辺」「右辺」「下辺」「左辺」などの指定ができます。

本記事の内容

「clip」プロパティの値
「clip」プロパティの指定方法

「clip」プロパティの値

要素の切り抜き領域を指定する単位は「auto」「px」「%」「em」「rem」などの値を指定することができます。
※「clip」の指定は、「position」プロパティで「absolute」または「fixed」を指定している場合に有効です。
※長さには、上辺、右辺、下辺、左辺の順で4つ値を指定します。それぞれの値は、カンマ（ , ）または半角スペースで区切って記述します。

「clip」プロパティの指定方法

要素の切り抜き領域を指定する場合は、「clip」プロパティを使い適応する値を指定することで実装できます。

「clip」プロパティ

セレクタ{
clip:要素の切り抜き領域;
}

値例

/* 基本値 */
clip: auto;

/* px値 */
clip: rect(20px 100px 300px 200px);/* 上辺の20px距離 右辺の100px距離 下辺の300px距離 左辺の200px距離 */

/* %値 */
clip: rect(5% 10% 30% 20%);/* 上辺の5%距離 右辺の10%距離 下辺の30%距離 左辺の20%距離 */

/* em値 */
clip: rect(5em 10em 30em 20em);/* 上辺の5em距離 右辺の10em距離 下辺の30em距離 左辺の20em距離 */