css 画像

cssで画像をトリミングする方法。「記述1行で完了」

投稿日:

Pocket

うも、チャーさんです。

 

あなたはcssで画像をトリミングしたい。

そう思っていませんか?

 

photoshopでトリミングするのめんどい、

cssでできんかな?と思ってませんか。

 

 

この記事では、cssで画像をトリミングする、

cssを紹介してます。

 

なので、あなたがこの記事を読めば、

cssで画像をトリミングできるようになります。

画像を色んな形に変えれるようになります。

 

なので、あなたがcssで画像をトリミングしたい場合、

このまま下にスクロールして読んでみてください。

 

 

*注意

Internet Explorerでは動かない(執筆:2019年7月11日時点)

ので、あなたがIEをお使いの場合は、

この記事はあなたの役に立ちませんのでご注意です。

 

 

スポンサードサーチ

cssで画像をトリミングする方法

 

で、まず結論です。

cssで画像をトリミングするには、

clip-pathというcssを使うといいです。

 

これを使えば、画像をあなたの好きな形に、

トリミングすることができます。

 

例えば、以下の画像のように、

 

css 画像 トリミング

 

こんなバッテンの画像にトリミングすることも、

clip-pathというcssを使えば、

実現可能です。

 

 

clip-pathを簡単に使う方法

 

とはいえ、画像のソースコードをみていただいて、

わかる通り、このcss、記述が難しいです。

 

自由に使いこなすには自分で、この%をいじって、

挙動を習得していく、という方法もありますが、

それよりも簡単な方法があります。

 

そちらが、このサイトです。

https://bennettfeely.com/clippy/

 

 

clippyというサイトで、

今紹介した、clip-pathのcss記述を、

自動で作ってくれます。

 

 

また、いろんな形にトリミングされた、

冒頭でお話したバッテンや、星型など、

かなり複雑な形のclip-pathの記述がすでに用意されています。

 

なので、上記のサイトで、

好きな画像の形を選べば、

css記述を吐き出してくれます。

 

 

あとはそれをコピペするだけで、

あなたが用意した画像を、

cssで自由にトリミング可能というわけです。

 

また、サイトで表示されてる、

色の付いた丸い部分をクリックして動かすと、

自由に形も作れるのでそちらもおすすめです。

 

 

というわけで、非常に便利なので、

あなたがcssで画像をトリミングしたい場合、

一度試しに使ってみると良いでしょう。

 

画像をトリミングのために、photoshopを、

起動させてっていうのはなかなか手間なので、

楽にcssで画像をトリミングしたい場合はどうぞ。

 

各ブラウザでの挙動

 

で、ちなみにですが、

こちらは使えるブラウザが限られてます。

 

実際に色々なブラウザでチェックしてみた感じでは、

chrome、firefox、iosでは動きました。

 

が、Internet Explorerでは機能しませんでした。

 

 

なので、あなたのサイトをみるユーザー次第では、

このcssを使うかは選ばないとダメですね。

 

頭に入れておくと良いと思います。

 

 

スポンサードサーチ

まとめ

 

cssで画像をトリミングする方法ですが、

clip-pathというcssを使うと良いです。

 

かなり色々な形に画像をトリミングすることが、

可能なので、便利です。

 

 

ただ記述が難しいので、

clip-pathの記述を作ってくれる、

 

https://bennettfeely.com/clippy/

のようなサイトを使うと良いです。

 

web製作において画像のトリミング、

もとい画像の形を変えることは、

よく直面します。

 

 

なので、あなたもこのcssを使えるようになっておくと、

web製作スキルが上がり、あなたの好きなページを、

作れるようになるでしょう。

 

というわけで、早速試してみてください。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-css, 画像


スポンサードサーチ

関連記事

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。