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スマホサイズ時のレイアウトはこれが良いですよ

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

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

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

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

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

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

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

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

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

no image

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

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

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

最新記事

チャーさん

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

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

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