【CSSで画像デザイン】ソフト不要＆コピペOK！CSSだけで画像を加工する方法

2022/10/11 18:00

web

「ホームページやブログに掲載する画像をおしゃれに編集したいけど、加工ソフトは持っていない…」「画像のトリミングをしてサイズを揃えたいけど、毎回編集するのは面倒くさい…」そういった悩みを持っている方も多いと思います。

今回は、PhotoshopやIllustratorなどの加工ソフトを使用せず、CSSだけで画像をデザインする方法を紹介します。

サンプル画像を用意していますので、初心者の方でも簡単に試せます！また、コピペで実装できるコードのサンプルも用意しましたので、ぜひお試しください！！

【CSS画像デザイン①】トリミング

画像のサイズがきれいに揃っていると、統一感が出ておしゃれに見えます。CSSを使えば、加工ソフト不要で、簡単に画像をトリミングすることができます！

こちらの犬の画像をサンプルに説明します。

正方形

HTML


<div class="trimming01">
  <img src="画像URL">
</div>

CSS


.trimming01 {
  display: inline-block;
  overflow: hidden; /* はみ出る部分を隠す */
  aspect-ratio: 1 / 1; /* アスペクト比 */
}
.trimming01 img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を保持 */
}

長方形の画像を、正方形にトリミングしました。複数の画像を並べるときに、レイアウトがしやすくなるのでおすすめです。

親要素（div）にaspect-ratio:1/1;を使い、アスペクト比で正方形になるように指定します。overflow:hidden;を使い、はみ出してしまう部分を隠しました。

子要素（img）にobject-fit:cover;を指定することで、縦横比を保持したトリミングができます。

アスペクト比とは、画面や画像の縦と横の長さ（画素数）の比。一般的には「横：縦」と表記し、640×480ピクセルを4：3と表記するなど互いに素な整数の比とすることが多いが、縦を1として「1.33：1」のように表す場合もある。

引用：アスペクト比（縦横比）とは – 意味をわかりやすく – IT用語辞典 e-Words

正円

HTML


<div class="trimming02">
  <img src="画像URL">
</div>

CSS


.trimming02 {
  display: inline-block;
  overflow: hidden; /* はみ出る部分を隠す */
  aspect-ratio: 1 / 1; /* アスペクト比 */
  border-radius: 100vh; /* 丸型にする */
}
.trimming02 img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を保持 */
}

長方形の画像を、正円にトリミングしました。正円はアイコン画像などに使用されており、汎用性の高いデザインです。

基本は正方形と同様の記述ですが、きれいな円形にするために、border-radius: 100vh;を指定しています。

角丸

HTML


<div class="trimming03">
  <img src="画像URL">
</div>

CSS


.trimming03 {
  display: inline-block;
  overflow: hidden; /* はみ出る部分を隠す */
  border-radius: 20px; /* 角丸の大きさ */
}
.trimming03 img {
  display: block;
  max-width: 100%;
  height: auto;
}

画像のフチを角丸にトリミングしました。四角形の角を丸くトリミングするだけで、柔らかい印象を与えることができます。

こちらも親要素（div）にoverflow: hidden;を指定し、はみ出した部分を隠しています。サンプル画像は、四角形のフチを20px丸くしております。

いびつな形

HTML


<div class="trimming04">
  <img src="画像URL">
</div>

CSS


.trimming04 {
  display: inline-block;
  overflow: hidden; /* はみ出る部分を隠す */
  border-radius: 70% 40% 50% 70% / 60% 50% 70% 40%; /* いびつな形 */
}
.trimming04 img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を保持 */
}

デザインすることが難しそうな、いびつな形もCSSだけでトリミングすることができます。ニュアンス風のおしゃれなデザインや、柔らかい印象を与えたいときにおすすめのデザインです。

border-radiusのスラッシュの前は「横の長さ」、スラッシュの後ろは「縦の高さ」を指定します。

▼ こちらのジェネレーターを使用すれは、好きな形を簡単に作ることができます。

Fancy Border Radius Generator
https://9elements.github.io/fancy-border-radius/

六角形

HTML


<div class="trimming05">
  <img src="画像URL">
</div>

CSS


.trimming05 {
  display: inline-block;
  overflow: hidden; /* はみ出る部分を隠す */
  aspect-ratio: 1 / 1; /* アスペクト比 */
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
.trimming05 img {
  display: block;
  max-width: 100%;
  width: 520px;
  height: 100%;
  object-fit: cover; /* 縦横比を保持 */
}

サンプル画像は六角形にトリミングしましたが、clip-pathプロパティを使用することで、正方形や丸以外にも様々な形に切り抜くことが可能です。

他にも、矢印や星型などの様々な形にトリミングができますので、ぜひチャレンジしてみてください。

▼ こちらもジェネレーターを使用することで、簡単にいろいろな形の作成が可能です。

Clippy — CSS clip-path maker
https://bennettfeely.com/clippy/

【CSS画像デザイン②】色の変更

ホームページやブログの雰囲気に合わせて、画像の色味を少し変更するだけで、一気に印象的な雰囲気にすることができます。

画像の色相変更も、Photoshopの難しい機能を使用することなく、CSSだけで実装可能です！

こちらの女の子と風船の画像をサンプルに説明します。

モノクロ

HTML


<div class="color01">
  <img src="画像URL">
</div>

CSS


.color01 {
  display: inline-block;
  filter: grayscale(100%); /* モノクロにする */
}
.color01 img {
  display: block;
  max-width: 100%;
  height: auto;
}

画像の色調をモノクロにするだけで、スタイリッシュなデザインにすることができます。

サンプル画像はfilter: grayscale(100%);を指定し、完全にモノクロにしていますが、数値設定を低くすることで、グレイッシュなフィルターがかかった様な加工をすることも可能です。

セピア

HTML


<div class="color02">
  <img src="画像URL">
</div>

CSS


.color02 {
  display: inline-block;
  filter: sepia(100%); /* セピアにする */
}
.color02 img {
  display: block;
  max-width: 100%;
  height: auto;
}

セピアの画像は、モノクロ画像より、さらにレトロでノスタルジックな印象を与えることができます。

サンプル画像は、filter: sepia(100%);を指定していますが、モノクロの設定と同様に数値を変更することで、セピア度合いを調整することができます。

色相調整

HTML


<div class="color03">
  <img src="画像URL">
</div>

CSS


.color03 {
  display: inline-block;
  filter: hue-rotate(270deg); /* 色相を変える */
}
.color03 img {
  display: block;
  max-width: 100%;
  height: auto;
}

filter: hue-rotate();を指定することで、画像の色相を変更することができます。色の角度（0deg～360deg）により、色相の範囲が異なります。

色相の範囲	赤～黄色	黄色～緑	緑～シアン	シアン～青	青～マゼンタ	マゼンタ～赤
色相の角度	0°～60°	60°～120°	120°～180°	180°～240°	240°～300°	300°～360°

参考：色相 – Wikipedia

色を重ねる

HTML


<div class="color04">
  <img src="画像URL">
</div>

CSS


.color04 {
  display: inline-block;
  position: relative;
}
.color04::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 100%;
  height: 100%;
  mix-blend-mode: color; /*描画モード：カラー */
  background-color: #3d869d; /* 重ねたい色 */
}
.color04 img {
  display: block;
  max-width: 100%;
  height: auto;
}

PhotoshopやIllustratorの描画モード（ブレンドモード）も、CSSで実装することができます。

サンプル画像は、mix-blend-mode: color;で描画モードをカラーに指定し、上から水色を重ねています。

描画モードは、重なった時にのみ使用可能なため、サンプルでは疑似要素（after）で重ねる用の色を用意し、画像の上から重ねています。

乗算

HTML


<div class="color05">
  <img src="画像URL">
</div>

CSS


.color05 {
  display: inline-block;
  position: relative;
}
.color05::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: #ffc671; /* 重ねたい色 */
  mix-blend-mode: multiply; /* ブレンドモード：乗算 */
}
.color05 img {
  display: block;
  max-width: 100%;
  height: auto;
}

こちらもmix-blend-modeプロパティを指定しています。乗算は、画像の上からカラーフィルムを重ねた様な表現になります。

ブレンドモードの種類


mix-blend-mode: multiply; /* 乗算 */
mix-blend-mode: screen; /* スクリーン */
mix-blend-mode: overlay; /* オーバーレイ */
mix-blend-mode: color-dodge; /* 覆い焼き */
mix-blend-mode: color-burn; /* 焼き込み */
mix-blend-mode: darken; /* 比較（暗） */
mix-blend-mode: lighten; /* 比較（明） */
mix-blend-mode: hard-light; /* ハードライト */
mix-blend-mode: soft-light; /* ソフトライト */
mix-blend-mode: difference; /* 差の絶対値 */
mix-blend-mode: exclusion; /* 除外 */
mix-blend-mode: hue; /* 色相 */
mix-blend-mode: saturation; /* 彩度 */
mix-blend-mode: color; /* カラー */
mix-blend-mode: luminosity; /* 輝度 */

【CSS画像デザイン③】彩度・コントラスト・明度の調整

使用したい画像が暗かったり、くすんでいたりすることはありませんか？

彩度やコントラスト、明度もCSSで調整することができます！

こちらの果物と野菜とジュースの画像をサンプルに説明します。

彩度

彩度 50%

彩度 150%

HTML


<div class="value01">
  <img src="画像URL">
</div>

<div class="value02">
  <img src="画像URL ">
</div>

CSS


.value01 {
  display: inline-block;
  filter: saturate(50%); /* 彩度50% */
}
.value01 img {
  display: block;
  max-width: 100%;
  height: auto;
}

.value02 {
  display: inline-block;
  filter: saturate(150%); /* 彩度150% */
}
.value02 img {
  display: block;
  max-width: 100%;
  height: auto;
}

「彩度」とは色の鮮やかさの度合いのことです。

彩度が高いと原色に近い鮮やかな色味になり、低くなるにつれてくすんだ色味になります。数値を0%に設定すると、鮮やかさは完全に無くなり、モノクロ画像になります。

食べ物や飲み物の画像を、より美味しそうに加工したいときは、彩度を少し上げることをおすすめします。

コントラスト

コントラスト 50%

コントラスト 150%

HTML


<div class="value03">
  <img src="画像URL">
</div>

<div class="value04">
  <img src="画像URL ">
</div>

CSS


.value03 {
  display: inline-block;
  filter: contrast(50%); /* コントラスト50% */
}
.value03 img {
  display: block;
  max-width: 100%;
  height: auto;
}

.value04 {
  display: inline-block;
  filter: contrast(150%); /* コントラスト150% */
}
.value04 img {
  display: block;
  max-width: 100%;
  height: auto;
}

画像の明るい部分と暗い部分との差のことを「コントラスト」といいます。コントラストを高く設定すると、明るい部分はより明るく、暗い部分はより暗くなります。

海や花などの風景はコントラストを高くすると、メリハリのあるかっこいい画像に加工することができます！

明度

明度 50%

明度 150%

HTML


<div class="value05">
  <img src="画像URL">
</div>

<div class="value06">
  <img src="画像URL ">
</div>

CSS


.value05 {
  display: inline-block;
  filter: brightness(50%); /* 明度50% */
}
.value05 img {
  display: block;
  max-width: 100%;
  height: auto;
}

.value06 {
  display: inline-block;
  filter: brightness(150%); /* 明度150% */
  }
.value06 img {
  display: block;
  max-width: 100%;
  height: auto;
}

色の明るさの度合いのことを「明度」といいます。明度が高いと白っぽく、逆に低いと黒っぽい画像になります。

人物などの画像が暗いときに使える加工方法ですが、明度を高く設定しすぎると白飛びしているように見えてしまいます。

彩度やコントラスト、明度をバランスよく組み合わせることで、画像をきれいに加工することができます。

HTML


<div class="value07">
  <img src="画像URL">
</div>

CSS


.value07 {
  display: inline-block;
  filter: saturate(130%) contrast(120%) brightness(110%);
}
.value07 img {
  display: block;
  max-width: 100%;
  height: auto;
}

こちらのサンプル画像は「彩度130%」「コントラスト120%」「明度110%」で指定しています。

【CSS画像デザイン④】画像をぼかす

「ぼかし」と聞くとモザイク画像のイメージが強いと思いますが、ぼかしは画像の上に文字を重ねて配置するときにも使える手法です。

背景画像を少しぼかすと、文字を目立たせることができます。ファーストビューなどにおすすめのデザインです。

こちらのプールで浮かぶ女性の画像をサンプルに説明します。

ぼかす

ぼかし 3px

ぼかし 10px

HTML


<div class="blur01">
  <img src="画像URL">
</div>

<div class="blur02">
  <img src="画像URL">
</div>

CSS


.blur01 {
  display: inline-block;
  overflow: hidden; /* はみ出る部分を隠す */
}
.blur01 img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: blur(3px); /* 3pxぼかす */
}

.blur02 {
  display: inline-block;
  overflow: hidden; /* はみ出る部分を隠す */
}
.blur02 img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: blur(10px); /* 10pxぼかす */
}

ぼかしはpxで指定します。0～255pxの範囲で指定することができます。

親要素（div）にblurをそのまま指定すると、周りのフチもぼけてしまうので、子要素（img）に指定しています。親要素にoverflow: hidden;を指定し、はみ出してしまう部分を隠しています。

【CSS画像デザイン⑤】画像にグラデーションを重ねる

画像にグラデーションを重ねると、雰囲気の出る画像に加工することができます。ファーストビューやギャラリーなどにも使える手法です。

一度CSSで指定することで、画像の入れ替えのみで、ホームページやブログデザインを簡単に変えることができます！

こちらの京都の風景の画像をサンプルに説明します。

徐々に透明にする

HTML


<div class="gradation01">
  <img src="画像URL">
</div>

CSS


.gradation01 {
  display: inline-block;
  position: relative;
}
.gradation01:after{
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #fff 15%, transparent);
}
.gradation01 img {
  display: block;
  max-width: 100%;
  height: auto;
}

サンプル画像は、90degの方向（左から右）へ#fff（背景色）を15%の位置まで、グラデーションをかけています。

疑似要素（after）を使い、上からグラデーションを重ねているので、15%より右は透明色（transparent）を指定しました。

グラデーションを重ねる

HTML


<div class="gradation02">
  <img src="画像URL">
</div>

CSS


.gradation02 {
  display: inline-block;
  background: linear-gradient(115deg, #ffd400 0%, #c90000 100%);
}
.gradation02 img {
  display: block;
  max-width: 100%;
  height: auto;
  opacity: 70%; /* 70% 透明にする */
}

夕焼け感を強くするために、黄色～赤のグラデーションをかけました。

「115degの方向に、#ffd400（黄色）～#c90000（赤）のグラデーションをかける」という指定の仕方をしています。
また、子要素（img）を70%透明にし、指定したグラデーションが透けて見えるように指定しました。

周りを薄く

HTML


<div class="gradation03">
  <img src="画像URL">
</div>

CSS


.gradation03 {
  display: inline-block;
  position: relative;
}
.gradation03::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: radial-gradient(transparent 50% ,#fff);
}
.gradation03 img {
  display: block;
  max-width: 100%;
  height: auto;
}

円形のグラデーションデザインで、淡いふわっとした雰囲気を表現しました。

疑似要素（after）を使い、上から円形グラデーションを重ねています。サンプル画像は、中央50%の位置からグラデーションをかけています。

トイカメラ風

HTML


<div class="gradation04">
  <img src="画像URL">
</div>

CSS


.gradation04 {
  display: inline-block;
  position: relative;
  filter: saturate(105%) contrast(100%) brightness(90%) sepia(50%);
}
.gradation04:after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 50px inset 0 0 50px #00000095, inset 0 0 100px #00000045;
}
.gradation04 img {
  display: block;
  max-width: 100%;
  height: auto;
}

レトロなトイカメラ風な画像デザインも、加工ソフト不要で実装できます。

filterプロパティを使い、画像の色調をレトロに加工しました。また、疑似要素（after）で内側に影ができるように指定し、上から重ねています。

【CSS画像デザイン⑥】文字を重ねる

画像に文字を入れる機会は多いと思います。無料のツールでも文字入れはできますが、画像データだと修正するときに手間だったりしませんか？

CSSで文字入れデザインすることで、文字の変更だけで簡単に修正が完了します。また、HTMLで記述することでSEO対策にも有効的です。

こちらのワッフルの画像をサンプルに説明します。

ドロップシャドウ文字

HTML


<div class="letter01">
  <img src="画像URL">
</div>

CSS


.letter01 {
  display: inline-block;
  position: relative;
}
.letter01::after {
  content: 'Sample'; /* 入れたい文字  */
  position: absolute;
  top: 50%; /* 文字の場所 */
  left: 50%; /* 文字の場所 */
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  color: #fff; /* 文字の色 */
  font-size: 370%; /* 文字のサイズ */
  font-weight: bold;
  text-shadow: 0 0 10px #00000073;
}
.letter01 img {
  display: block;
  max-width: 100%;
  height: auto;
}

画像にドロップシャドウのかかった文字を重ねたデザインです。シンプルなデザインなので汎用性が高く、様々な画像にも合わせやすいです。ファーストビューなどにもよく使われるデザインです。

疑似要素（after）を使って画像に文字を重ねています。transformプロパティで画像の中央に文字が表示されるように指定しています。文字の色や文字サイズはお好みに合わせて変更し使用してください。

透ける文字

HTML


<div class="letter02">
  <div class="image"><img src="画像URL"></div>
  <p>Sample</p>
</div>

CSS


.letter02 {
  position:relative;
  display: inline-block;
}
.letter02 .image::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-color: #000;
  opacity: 60%; /* 60% 透明にする */
}
.letter02 p {
  margin: 0;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%; /* 文字の場所 */
  left: 50%; /* 文字の場所 */
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 370%; /* 文字のサイズ */
  font-weight: bold;
  background: url(画像URL) center no-repeat; /* 画像URL */
  background-size: cover;
  -webkit-background-clip: text;
  color: transparent;
}

文字で画像を切り抜いたデザインです。サムネイルやファーストビューにも使える、かっこいいデザインです。

文字の背景に重ねたい画像と同じ画像を設定し、文字の形に切り抜いています。文字が目立つように疑似要素（after）で下の画像の背景に半透明の黒を重ねたデザインにしました。

今回は、加工ソフトを使用せず、CSSだけで実装可能な画像のデザイン加工を紹介しました。

2022年6月にIE11のサポートが終了したことで、CSSプロパティの利用できる幅が広がりました。

いくつかのCSSプロパティを組み合わせることで、よりおしゃれな画像にデザインできます！紹介したCSSコードをアレンジし、自分なりのデザインを作成してみてください。

IE非対応！モダンブラウザで使えるCSS

今回はIEサポート終了に伴う、IE未対応で、すぐに実践で使えるイケてるCSSを紹介させていただきたいと思います。

おまけ

HTML


<div class="letter03">
  <div class="image"><img src="画像URL"></div>
  <p>Sample Waffle</p>
</div>

CSS


.letter03 {
  display: inline-block;
  position: relative;
}
.letter03 .image {
  clip-path: polygon(40% 0, 100% 0%, 100% 100%, 0% 100%);
  filter: saturate(170%) contrast(70%) brightness(125%);
}
.letter03 .image::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: rgb(61 134 157);
  mix-blend-mode: color;
}
.letter03 .image::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: rgb(255 204 228);
  mix-blend-mode: multiply;
}
.letter03 p {
  position: absolute;
  top: 11%;
  left: 4%;
  font-size: 300%;
  font-weight: bold;
  font-family: serif;
  color: #3a2828;
  letter-spacing: 0.02em;
}