clip:要素を切り抜いて可視化する範囲を指定する

初期値 auto
適用対象 positionで絶対位置を指定された要素
継承 しない
アニメーション rect()
対応ブラウザ caniuseで確認

clipプロパティの説明

clipは、要素を切り抜いて可視化する範囲を指定します。この機能は、positionで絶対位置を指定された要素に対してのみ有効です。

切り抜く範囲はボックスと同じ大きさになり、toprightbottomleftという4つの値によって、ボックスの各辺からの距離を指定します。切り抜かれた部分の外側については、overflowで表示方法を指定します。

clipの役目は終了しました。新しく作成するページには、より新しいclip-pathを採用して下さい。

clipに指定できる値

auto
切り抜きを行いません。自動的にボックスの境界で切り抜くrect(auto, auto, auto, auto)とは異なることに注意して下さい。これが初期値です。
<shape>
rect()で表す短形の値です。topbottomは、ボックスの範囲において上辺からのオフセットを表します。rightleftは、ボックスの範囲において左辺からのオフセットを表します。

clearの使い方とサンプル

clearプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
clip: auto;

/* <shape>値 */
clip: rect(10px 30px 30px 10px);
clip: rect(3em 6em 10em 1em);

/* グローバル値 */
clip: inherit;
clip: initial;
clip: revert;
clip: unset;

clipの実例

それでは実際にclipプロパティの書き方を見ていきましょう。以下の例では、300x200pxの画像をclipでトリミングした場合に、どのように表示されるかを確認します。この効果を期待する要素には、positionで絶対位置の値を指定しなければなりません。

表示確認
CSS
.samp_box {
	margin: 1rem 0 0;
	padding: 0 1rem 1rem 1rem;
}
.samp_box > div {
	position: relative;
	margin-top: 1rem;
}
#clip > img {
	position: absolute;
	top: 1rem;
	left: 0;
	clip: rect(20px, 200px, 100px, 20px);
}
HTML
<section class="samp_box">
	<div>
		<div>元画像です。</div>
		<img src="../images/sample_img300x200.png" alt="参考画像">
	</div>
	<div id="clip">
		<div>clip: rect(20px, 200px, 100px, 20px);</div>
		<img src="../images/sample_img300x200.png" alt="参考画像">
	</div>
</section>

clipに関連するCSSプロパティ

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left 位置指定で配置された要素の左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align ボックス内のインライン要素に縦位置を揃える基準を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する