CSSで出来る画像加工の方法を解説

こんにちは朱夏です。

今回はCSSで出来る画像加工について書いていきたいと思います。

朱夏

画像修正が必要になると依頼に出したりして時間がかかって大変。

簡単に出来る方法は無いかな？

画像内に描かれたものの配置変更など、大幅な変更が必要な場合はillustratorなどで編集が必要ですが、サイズ変更やちょっとした色合いの調節程度なら、HTMLとCSSで可能です。

それではやっていきましょう。

[もくじ]
サイズ変更
色合い変更
表示枠変更
番外編：エフェクト
あとがき

サイズ変更

最初に紹介するのは基本となるサイズ変更です。
基本的に画像は、スタイルを何も指定していなければ元の画像のサイズで表示されます。

先ずは固定値で指定する方法から。

See the Pen
MWwOxGg by 朱夏 (@syunatsu1)
on CodePen.

今回はwidth(幅)で指定しています。
画像は基本的に縦横比が固定なので、width(幅)かheight(高さ)を指定すれば、自動的に画像サイズが変更されます。

しかし、縦も横も固定したい場合があると思います。
元画像と指定したサイズの縦横比が狂ってしまうと、画像が面白いことになってしまいます。
例えば、画像の縦横比を５：１にしてみましょう。

See the Pen
GRJOedx by 朱夏 (@syunatsu1)
on CodePen.

こんな感じでみょーんとなってしまいます。
こういった場合にスマートに画像を収めるには、以下の2パターンがあります。

パターン１：トリミング

See the Pen
abOVMKZ by 朱夏 (@syunatsu1)
on CodePen.

「object-fit: cover;」は、指定した縦横の画像サイズに合わせて、はみ出した部分は切り落とされる表示方法です。
しかし猫ぉおおおおお(；・∀・)

ご安心を。
解決方法があります。

それがこちらです。

See the Pen
gOpXEKz by 朱夏 (@syunatsu1)
on CodePen.

「object-position: 50% 25%;」で中心を横の位置、縦の位置を指定する事が出来ます。
デフォルトは画像の中央(50% 50%)になっています。

これで猫ちゃんは救われました。

パターン２：余白で埋める

See the Pen
yLNPwEm by 朱夏 (@syunatsu1)
on CodePen.

解りやすいように画像の背景を黒くしています。
この様に、指定したサイズ内に収まる様に画像を表示し、縦横比の違いで出来た余白をそのまま表示する方法です。デフォルトで中央に寄るので、縦横比を崩さずサイズ内に収めたい場合はこちらを使うのが良いと思います。

もう一つ、サイズで伝えておきたいことがあります。
そう、レスポンシブ対応です。

画像をレスポンシブ対応するとなると、ブレイクポイント(デバイスの特定の横幅)毎にサイズの違う画像を準備したりする場合もあるようですが、CSSで対応すればこれだけでOKです。

See the Pen
gOpXEjz by 朱夏 (@syunatsu1)
on CodePen.

width(幅)を100%に変えるだけです。
因みに、max-widthだと元画像のサイズが最大に、widthだと表示画面の横幅が最大になります。

色合い変更

色合いの変更は、ちょっと裏技的な方法を使います。

See the Pen
wvaPOKy by 朱夏 (@syunatsu1)
on CodePen.

こちらでやっていることは、以下の様な事。

背景色を設定
画像の不透明度(opacity)を下げる

これだけです。
画像をちょっと暗くしたいな、とか赤味を入れたいな、などのざっくりとした調節は出来ます。

ただ、画像自体はちょっと透けているので要注意。

表示枠変更

画像の枠を四角から変更できます。
といっても、角を丸くしたり円形の枠にしたりする程度です。

See the Pen
ZEGaPVG by 朱夏 (@syunatsu1)
on CodePen.

こんな感じです。
border-radiusは角を丸める時に使うスタイルです。

ちょっと理解できればこんなことも可能です。

See the Pen
KKpyEJO by 朱夏 (@syunatsu1)
on CodePen.

番外編：エフェクト

画像加工ソフトでもよく見るエフェクトはCSSでもかける事が出来ますよという紹介だけしていきます。
良く使われるエフェクトを3つほど紹介しておきます。

モノクロ

See the Pen
bGdYZZz by 朱夏 (@syunatsu1)
on CodePen.

セピア

See the Pen
MWwOxRY by 朱夏 (@syunatsu1)
on CodePen.

ブラー（ぼかし）

See the Pen
WNvXmWB by 朱夏 (@syunatsu1)
on CodePen.

あとがき

というわけで、CSSで画像加工する方法を紹介してみました。
素材さえあれば、CSSでもある程度画像加工ができる事が解るかと思います。
CSSで画像を加工するメリットが、実はもう一つあって、それは「元画像に影響を与えない」事です。
これにより1つの画像をサイズを変え、形を変え、使いまわす事が出来るのです。

実際に、今回サンプルで使用した画像は1つで、元画像には一切影響がありません。

今回のまとめはこちら。