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

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

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

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

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

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

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

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

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

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

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

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

no image

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

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

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

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

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

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

最新記事

チャーさん

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

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

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