【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

Webサイトにおいて、画像をさまざまな形で表示することがありますよね。
本日は、その際にとっても便利な「clip-path」というプロパティについてご紹介したいと思います。

「clip-path」とは

「clip-path」とは、要素のどの部分を表示するかを設定するクリッピング領域を作るもので、具体的には、領域の内部の部分は表示され、外側の部分は非表示になるものです。
▼ 参考サイト
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

今回は、このプロパティを使って、画像の切り抜きを行いたいと思います！

まずは円形に切り抜いてみる

まずは、こちらの画像を用いて「clip-path」プロパティを使ってみます。

See the Pen clip-path by spiqa design (@spiqa_design) on CodePen.

上記の例を見ていただくとわかるように、imgに「clip-path」を指定して、画像を円形にできています。

ただ、このプロパティは、IEなどのブラウザに対応していません。
▼ 参考
https://caniuse.com/css-clip-path

そのため今回は、IEにも対応しつつ、また、より複雑な形が表現できるSVGを用いた方法を紹介します。

SVGを用いた画像の切り抜き方法

以下、順を追ってご説明いたします！

STEP1 くり抜く形（外枠）のSVGを作成する

SVGの作成方法として、いくつかご紹介します。

① SVG形式でダウンロードできるサイトを活用する

今回ご紹介する例では、こちらのサイトの星形を使っています。
https://tinyurl.com/yyahzqsw

② SVG作成ジェネレーター

SVGをブラウザ上で作成できるジェネレーターも色々な種類があるので、ぜひ調べてみてください！

③ Illustratorのアセットの書き出し機能で書き出す

Illustratorで作成したものをSVG形式で書き出すこともできます。

Illustratorからアセットの書き出しを行う際に「SVG」を選択すればOKです

STEP2 SVGファイルから必要なものを抽出する

SVGファイルを「テキストエディタ」で開いてみてください。

See the Pen abBdwLK by spiqa design (@spiqa_design) on CodePen.

こちらは、実際に https://tinyurl.com/yyahzqsw からダウンロードした星形をテキストエディタで開いたものです。

このうち、今回必要なのは、

<svg><path ~~~（略）~~~></svg>

の部分です。このコード（パス）が星形の外枠の線を表しています。

STEP3 切り抜く線（パス）を記述する

ここからは実際に、画像を出力させたいファイルに書き込んでいくことになります。

まず、先ほどSTEP2で整理したSVGを活用して、切り抜く線（パス）を記述します。

See the Pen xxRZrWa by spiqa design (@spiqa_design) on CodePen.

これは、あくまで「星形の外枠（線）」を読み込ませるものなので、【width=”0″ height=”0″】を指定しています。

指定を忘れると星形の分スペースが開いてしまって、意図しない表示になってしまうので、気をつけてください。

STEP4 【STEP3】で記述した線（パス）を使用して画像を切り抜く

STEP3で用意した切り抜く線（パス）の下に読み込ませたい画像の記述を追記します。今回追記する内容はこちらです。

<svg width="250" height="250" viewBox="0 0 250 250">
  <image xlink:href="https://note.spiqa.design/wp-content/uploads/2021/02/img01.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#clip01)"/>
</svg>

上記のように、読み込ませたい画像を「href=” “」部分に記述してください。IEなどのブラウザにも対応させるためSVGを用いて画像読み込んでいます。

See the Pen XWNXgYq by spiqa design (@spiqa_design) on CodePen.

先ほど記述した星形の外枠（パス）を活用して、画像を星形に切り抜くことができました！

星形のPNG画像を使うのとどう違うのか

今回は、長方形の画像をそのまま用いて、星形にくり抜きましたが、実際は、デザインツールを用いて画像自体を星形に（PNG形式として関係ない部分を透過）することもできます。

どちらの方が良いのか..？というのは、様々な状況によると思われますが、今回のclip-pathを用いた方法のメリットのひとつとして、画像の差し替えが簡単という点が挙げられます。

先ほどの画像を、他の画像に変えたくなった場合、以下のように画像のURLを書き替えるだけで対応できます。

See the Pen mdOVwzy by spiqa design (@spiqa_design) on CodePen.

これは、デザインツールでもう一度くり抜きを行うよりも簡単に対応できると思います！

まとめ

今日は、clip-pathとSVGを用いた画像の切り抜きについてご紹介いたしました。
今回は星形を用いましたが、SVGを用いることで、複雑な形を表現することもできるので、ぜひ活用してみてくださいね！