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

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

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

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

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

clip-pathを指定してみよう

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

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

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]