clip-pathでCSSのトリミング。画像や要素にマスクをかけよう。



こんなデザインどのようにして作りますか








clip-pathプロパティを使用すると、内部のコンテンツは表示され、外部のコンテンツは非表示になるクリッピング領域を作成します。 デザインソフトでいうところの、マスク機能のようなものがCSSで実現できます。




もともと要素があった場合、その要素に対して何らかの形でくり抜くことができます。 例えば画像を円形にくり抜いたり、星型にくり抜いたりすることができます。
手作業ではなかなか難しいのですが、ペイントソフトなどを使ってパスを書き出せば、複雑な形のマスクも簡単に作ることができます。




頂点はCSSで自由に変更ができるので、Javascriptなどと組み合わせて動的に形を動かすことができ、おもしろいアニメーションが簡単に作れます。




うまく使えば、見たこともないような面白い効果のデザインやアニメーションが簡単に作れるので、ぜひclip-pathをマスターして、おしゃれでかっこいいデザインのサイトを作ってみましょう。




clip-pathを指定してみよう




clip-pathの指定方法はとても簡単です




属性値の部分で、さまざまな形を指定していきます。
値の指定は細かくたくさんあるのですが、まずは以下の基本的な形を覚えましょう




clip-path
  • inset():内部の長方形を定義します。
  • circle():半径と中心位置を使用して円を定義します。
  • ellipse():2つの半径と位置を指定して楕円を定義します。
  • polygon():頂点のセットを用いて多角形を定義します。




clip-pathでは他にも様々な指定があります。
その他の細かい属性値はこちらを参照してください




clip-pathのサンプル




具体的にどのようになるのか見てみましょう。




See the Pen
clip-path
by Yoshimune (@hachidaime)
on CodePen.




属性値の指定の仕方




clip-pathの属性値の具体的な指定方法は以下の通りです。
各形状に必要なパラメータを考えると覚えやすいと思います。







clip-path:inset(上 右 下 左 round 半径);




上下左右のマージンはmargin属性と同じ書き方、 roundでは角丸が表現できますが、こちらはborder-radiusと同じ書き方が使えます。







clip-path:circle(半径);




半径を指定するだけで円が描けます。







clip-path:ellipse(横半径 縦半径);




楕円を描くため、横と縦のそれぞれの半径を指定できます。







clip-path:polygon(x1 y1, x2 y2, x3 y3, x4 y4);




x, y(左上を0とする座標系)を複数指定して、それぞれをつなぐ形のシェイプが描かれます。










どうでしたか、ここでは代表的なものにとどめて紹介しましたが、
ここに掲載していない属性値もまだまだあります。
アニメーションと組み合わせると面白い表現がたくさんできますので、ぜひ覚えておきましょう。

[RelService] [Service]