表示・配置
「clip」プロパティ
「clip」プロパティは、要素の切り抜き領域を指定するCSSプロパティです。
要素の切り抜き領域を指定する値は、「上辺」「右辺」「下辺」「左辺」などの指定ができます。
本記事の内容
「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距離 */
表示例
要素の切り抜き領域(auto)
要素の切り抜き領域(rect(5px, 500px, 300px, 0px))
要素の切り抜き領域(rect(0em, 160em, 20em, 10em))