Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

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

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

no image

max-widthとmin-widthの違いについてわかりやすく説明します

どうも、チャーさんです。 あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

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

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

no image

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

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

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

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

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

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

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

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

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

最新記事

チャーさん

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

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

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