clip

CSSでは、要素の表示する領域を指定することができます。

本ページでは、clipプロパティについて説明します。

clipプロパティとは

clipプロパティは、指定した四角形の中だけコンテンツを表示することができます。

写真の一部だけを表示させることができる。

clipの定義は、以下のとおりです。

【clipの定義】
rect() | auto
初期値 auto
適用対象 positionがabsoluteかfixedに指定された要素
継承 しない

なお、clipプロパティは非推奨になって、clip-pathが推奨されています。clip-pathの方が、細かな指定ができます。

値の説明

以下は、clipで使える値と説明です。

rect()
rect(上,右,下,左)で、四角形の各辺の位置を指定します。その中が、見える範囲になります。上と下は上からの位置、右と左は左からの位置で指定します。値は、lengthとautoが使えます。
auto
表示領域を指定しません(切り取りません)。

利用例

clipの利用例です。

なお、利用している画像のデフォルトの表示は、以下です。

木の上の家が横幅300pxで表示されています。
【clip-sourceの利用例】
.test {
  position: absolute;
  clip: rect(10px, 200px, 100px, 50px);
}

HTMLは、以下とします。

【clipの利用を示すためのHTML】
<img src="images/image1.png" alt="説明" class="test">

上記は、以下のように表示されます。

木の家の画像が、指定した領域だけ表示されています。

上が上から10px、右が左から200px、下が上から100px、左が左から50pxを四辺として見える範囲になっています。

なお、positionがabsoluteのため、次の要素は上に詰めて表示されます。画像の下に表示したい場合は、img要素をdivなどで囲み、heightで高さを指定するなどが必要です。

テキストでの利用

画像に対する表示領域だけでなく、テキストに対しても利用できます。例えば、以下のHTMLがあったとします。

【テキストに対するclip利用を示すためのHTML】
<p class="test">春になると木漏れ日が差し、草花は土の中から顔を出します。夏になると、太陽は草花に喜びを与えます。秋になると、草花は実をなして恵を与えます。冬になると雪が降り、草花は種となって土の中で眠ります。</p>

CSSは、以下とします。

【テキストに対するclip利用を示すためのCSS】
.test {
  position: absolute;
  clip: rect(2em, 20em, 4em, 3em);
}

上記は、以下のように表示されます。

段落の文章が、指定した領域だけ表示されています。

なお、emで指定しているのに文字の途中で途切れています。これは、line-heightが関係しています。line-height: 100%にすると、文字の途中で途切れません。

また、ボーダー(枠線)やパディング領域にも影響されます。clipは、ボーダー領域の左上を基点とするためです。

例えば、padding-top:10pxとclip:rect(10px, 20em, 4em, 3em)を指定しても、上は切り取られません。上にパディングが10pxあって、上10pxを切り取っても表示される内容は変わらないためです。

border-top: solid 20px、clip:rect(10px, auto, auto, auto)で指定すると、上の枠線は10pxになります。上の枠線が20pxあって、上10pxを切り取ると枠線は10pxになるためです。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
clip
【スマートフォン】
項目 Sa An Op Ch Fx Sm
clip
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る