clip:要素を切り抜いて可視化する範囲を指定する
初期値 | auto |
適用対象 | position で絶対位置を指定された要素 |
継承 | しない |
アニメーション | rect() |
対応ブラウザ | caniuseで確認 |
clipプロパティの説明
clip
は、要素を切り抜いて可視化する範囲を指定します。この機能は、position
で絶対位置を指定された要素に対してのみ有効です。
切り抜く範囲はボックスと同じ大きさになり、top
、right
、bottom
、left
という4つの値によって、ボックスの各辺からの距離を指定します。切り抜かれた部分の外側については、overflowで表示方法を指定します。
clip
の役目は終了しました。新しく作成するページには、より新しいclip-path
を採用して下さい。
clipに指定できる値
- auto
- 切り抜きを行いません。自動的にボックスの境界で切り抜く
rect(auto, auto, auto, auto)
とは異なることに注意して下さい。これが初期値です。 - <shape>
rect()
で表す短形の値です。top
とbottom
は、ボックスの範囲において上辺からのオフセットを表します。right
とleft
は、ボックスの範囲において左辺からのオフセットを表します。
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 | 要素を右または左へ寄せて配置する |
image-orientation | 横向きや逆さまに撮影された写真を正しい向きに回転させる |
image-rendering | 画像を拡大縮小するアルゴリズムを設定する |
left | 位置指定で配置された要素の左辺からの距離を指定する |
object-fit | 画像や動画などの置換要素をボックスに収める方法を指定する |
object-position | ボックスの中に配置されるオブジェクトの位置を指定する |
overflow | 要素からはみ出した内容の表示方法をまとめて指定する |
overflow-wrap | インライン要素に対して溢れる単語の折り返し方法を指定する |
overflow-x | 要素から水平方向にはみ出す内容の表示方法を指定する |
overflow-y | 要素から垂直方向にはみ出す内容の表示方法を指定する |
position | 要素の位置指定の種類を変更する |
right | 位置指定で配置された要素の右辺からの距離を指定する |
vertical-align | インライン要素や表のセルに対して縦方向の揃える位置を指定する |
visibility | 要素の領域を残したまま表示・非表示を切り替える |
z-index | 要素の重なり順序を指定する |