【CSS】clip-pathをビジュアルで編集できるツール『Clippy』とは？

テクノロジー

2023.05.03

みなさんこんにちは！おさかなです！

今回は『Clippy』について、書いていこうと思います！

それでは、レッツゴー！！！！！

『Clippy』って何？
実際に使ってみよう！

『Clippy』って何？

『Clippy』とは、CSSのclip-pathプロパティをビジュアルで編集できるツールのことです。要素の切り抜きや作図など、実際の画像を使用しながらチェックできるため便利！

三角や星、吹き出しの実装などをしたい方におすすめです✨(いいね！)

Clippy — CSS clip-path maker

【無料】マウス操作で、CSSの三角形が作れるジェネレーター・ツール

みなさんこんにちは！おさかなです！今回は「CSS三角形作成ツール」について、書いていこうと思います！それでは、レッツゴー！！！！！「CSS三角形作成ツール」とは？「CSS三角形作成ツール」とは、マウス操作（...

実際に使ってみよう！

図形をカスタマイズ！

それでは早速サイトにアクセスしましょう！

右側のメニューでは「図形」を選択できます。

台形にするとこんな感じ～。(富士山！笑)

ほかにも、角に切り込みのあるものや……。

矢印マーク！

星型なんかも選択できます！(使いやすそう🌟)

「Demo Size」の値を変更すると……？

こんな感じで、図形の大きさを変えられます。

(なんか芸術作品に見えてきたぞ！笑)

自分で描いたイラスト・棒人間が動き出す!? 『Draw a Stickma』とは

みなさんこんにちは！おさかなです！今回は『Draw a Stickma』について、書いていこうと思います！それでは、レッツゴー！！！！！『Draw a Stickma』って何？『Draw a Stickma...

切り抜き表示をチェック！

「Demo Background」では、使用する画像を変更できます。(ふむふむ…。)

サンプル画像は全部で4つあるため、それぞれの図形で画像がどのように見えるのかをチェックしましょう！

「Show outside clip-path」を押すと……？

こんな感じで、非表示になっている領域もわかるようになります。(この部分大事！)

ちなみに「Custom URL」を入力すると、オリジナル画像を指定することも。

サーバーにアップロードされている「画像URL」をコピーして、

貼り付けるだけで、かんたんに表示できます！(ハロー🚩)

(斜に構える、おさかな君。←違う。笑)

(ひと休み🍀)

「clip-path」を実装しよう！

実装するときは、下記に生成されたコードをコピーします。

生成されたコード

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

実装するときの基本形は、こんな感じ！<style>以下のコードは、別にCSSファイルを作成して、そのなかに記述したほうが編集しやすいのでおすすめです。

<img class="クラス名" src="画像URL" alt="画像の内容">

<style>
.クラス名 {
　<!-- コピーしたもの -->
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
</style>

実装例

<img class="cp-00" src="https://osakanav.com/wp-content/uploads/2020/01/20-01-12-15-57-51-366_deco.jpg" alt="船に乗った人のイラスト">

<style>
.cp-00 {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
</style>

↓実際に作成したものがこちら（吹き出し💭