clip-path …… 要素をクリッピング(切り抜き)する





広告
clip-pathプロパティは、要素をクリッピング(切り抜き)する際に使用します。
clip-pathプロパティで要素をクリッピングすると、指定したクリッピング領域の外側が非表示となって内側だけが表示されます。
クリッピング領域の形状には、長方形、円、楕円、多角形を指定することができます。
以下の形状関数で指定します。
- inset() … 内側へのオフセット(通常は長方形となる)
- circle() … 円
- ellipse() … 楕円
- polygon() … 多角形
クリッピング領域を生成する際の対象ボックスは、以下のキーワードで指定します。
- margin-box … マージンボックス
- border-box … ボーダーボックス
- padding-box … パディングボックス
- content-box … コンテントボックス
- fill-box … オブジェクトバウンディングボックス。CSSでは、border-box となる
- stroke-box … ストロークバウンディングボックス。CSSでは、border-box となる
- view-box … 最も近いSVGビューポートボックス。CSSでは、border-box となる
尚、clipプロパティは廃止されました。
代わりに clip-pathプロパティを使用することが推奨されています。
■値
以下の値を1つ、または、組み合わせて指定
- none
- クリッピングパスは生成されない(初期値)
- URL
- クリッピングパスとなる要素をURLで指定
- クリッピング形状を指定する関数
-
inset() … 内側へのオフセット(通常は長方形となる)
circle() … 円
ellipse() … 楕円
polygon() … 多角形 - クリッピング対象ボックスを指定するキーワード
-
margin-box … マージンボックス
border-box … ボーダーボックス
padding-box … パディングボックス
content-box … コンテントボックス
fill-box … オブジェクトバウンディングボックス。CSSでは border-box となる
stroke-box … ストロークバウンディングボックス。CSSでは border-box となる
view-box … 最も近いSVGビューポートボックス。CSSでは border-box となる
■初期値・適用対象・値の継承
- 初期値
- none
- 適用対象
-
すべての要素。
SVGでは、defs要素とすべてのグラフィックス要素を除くコンテナ要素に適用される
- 値の継承
- しない
■使用例
CSSソースは外部ファイル(sample.css)に記述
h5.m { margin-bottom: 0; }
HTMLソース
<h5 class="m">clip-pathプロパティの指定なし</h5> <div> <img src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif"> </div> <h5 class="m">clip-path: inset(20px 30px);</h5> <div> <img src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif" style="clip-path: inset(20px 30px);"></div> <h5 class="m">clip-path: circle(60px at 100px 75px);</h5> <div> <img src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif" style="clip-path: circle(60px at 100px 75px);"> </div> <h5 class="m">clip-path: ellipse(100px 50px at 100px 75px);</h5> <div> <img src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif" style="clip-path: ellipse(100px 50px at 100px 75px);"> </div> <h5 class="m">clip-path: polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);</h5> <div> <img src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif" style="clip-path: polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);"> </div>
↓↓↓
ブラウザ上の表示
clip-pathプロパティの指定なし

clip-path: inset(20px 30px);

clip-path: circle(60px at 100px 75px);

clip-path: ellipse(100px 50px at 100px 75px);

clip-path: polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);

広告