★CSSリファレンス

私たちはカジノサイトを独自にレビューしています。当社のリンクを通じてサインアップすると、追加料金なしで当社に手数料が発生する場合があります。

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

Google Chrome

Firefox
Opera
広告



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://www.htmq.com/wp-content/uploads/2024/07/kaeru.gif">
</div>

<h5 class="m">clip-path: inset(20px 30px);</h5>
<div>
<img src="https://www.htmq.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://www.htmq.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://www.htmq.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://www.htmq.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%);

広告



山田 太郎
テック・リード
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

ギャンブルガイド もっと見る

カジノファインダー

どのカジノが自分に最適か分からないですか?

サインアップは必要なく、1 分以内に最適なブックメーカーを簡単に見つけることができます。
カジノを探す
Back
質問
Select one of the following options
{"is_any_tile":true}

どのカジノが自分に最適か分からないですか?

Back
Restart
やったー!
これはあなたの選択に基づいた最高のカジノです...
63 users signed up
もっと表示する