Webデザイナーブログから学ぶホームページ制作

Webデザインにおいて、画像や写真は魅力的な視覚要素として重要な役割を果たします。
しかし、時には写真の雰囲気を変えたり、特定の効果を与えたりすることで、より鮮やかな表現を実現したい場面もありますよね。

そこで登場するのが、CSSのフィルター効果です。CSSを使って画像や写真に「明度・彩度・ぼかし・色相」などの要素を変えることで、劇的なビジュアル変化を実現することができます。

今回は、CSSで画像や写真にフィルター効果をかけて「明度・彩度・ぼかし・色相」要素を変える方法を解説します。

フィルター効果は、画像や写真に対して視覚的な変化や修正を加えるための技術です。
CSSを使用して、画像の明度を調整して画像を明るくしたり、彩度を変えて色彩を鮮やかにしたり、ぼかし効果を加えて柔らかな印象を与えたり、色相を調整して独自のカラーパレットを作り出すことができます。
さまざまな効果を組み合わせて、画像や写真の魅力を最大限に引き出しましょう。

フィルター効果を使うことで、通常の画像や写真に対して独自の表現や印象を加えることができます。webデザインやグラフィックデザインにおいて、フィルター効果は魅力的な視覚効果を実現するための重要なツールです。

画像や写真に「明度・彩度・ぼかし・色相」要素を加える場合は、CSSで「filter」プロパティを追記する必要があります。CSSでコンテンツ要素に「filter」プロパティを加えフィルター効果を適用します。 「filter」プロパティに記述する要素は、「明度」「彩度」「ぼかし」「色相」など全部で10種類あります。 ※使いこなせるようになれば、Photoshopなどで写真や画像を加工する必要が無くなります。

【10種類の「filter」プロパティ】
・ぼかし
・明るさ
・コントラスト
・ドロップシャドウ
・モノクロ
・色相環を回転
・透明度
・セピア
・色を反転
・彩度

CSSで写真に「ぼかし」をいれる場合は、「filter」プロパティを利用します。「filter」プロパティの値には「ぼかし」をいれるフィルターの種類を指定することができます。
CSSで写真に「ぼかし」をいれる場合は、「filter」プロパティに「blur（変化量）」の値を指定することで実装ができます。変化量には「px」の値を使って「ぼかす」の変化量を指定します。

<div class="box1"><img src="/img/test.jpg"></div>

.box1 {
  width:500px;
  height:auto;
  margin:auto;
}
.box1 img{
  filter: blur(5px);
}

CSSで写真の「明るさ」を変更する場合は、「filter」プロパティを利用します。「filter」プロパティの値には「明るさ」を変更するフィルターの種類を指定することができます。
CSSで写真に「明るさ」をいれる場合は、「filter」プロパティに「brightness（変化量）」の値を指定することで実装ができます。変化量には「数値」の値を使って「明るさ」の変化量を指定します。

<div class="box2"><img src="/img/test.jpg"></div>

.box2 {
  width:500px;
  height:auto;
  margin:auto;
}
.box2 img{
  filter: brightness(1.8);
}

CSSで写真の「コントラスト」を変更する場合は、「filter」プロパティを利用します。「filter」プロパティの値には「コントラスト」を変更するフィルターの種類を指定することができます。
CSSで写真に「コントラスト」をいれる場合は、「filter」プロパティに「contrast（変化量）」の値を指定することで実装ができます。変化量には「数値」の値を使って「コントラスト」の変化量を指定します。

<div class="box3"><img src="/img/test.jpg"></div>

.box3 {
  width:500px;
  height:auto;
  margin:auto;
}
.box3 img{
  filter: contrast(700%);
}

CSSで写真の「ドロップシャドウ」を加える場合は、「filter」プロパティを利用します。「filter」プロパティの値には「ドロップシャドウ」を加えるフィルターの種類を指定することができます。
CSSで写真に「ドロップシャドウ」を加える場合は、「filter」プロパティに「drop-shadow（位置）」の値を指定することで実装ができます。変化量には「px」の値を使って「ドロップシャドウ」位置を指定します。

<div class="box4"><img src="/img/test.jpg"></div>

.box4 {
  width:500px;
  height:auto;
  margin:auto;
}
.box4 img{
  filter: drop-shadow(0px 5px 10px black);
}

CSSで写真の「モノクロ」に変更する場合は、「filter」プロパティを利用します。「filter」プロパティの値には「モノクロ」に変更するフィルターの種類を指定することができます。
CSSで写真に「モノクロ」に変更する場合は、「filter」プロパティに「grayscale（変化量）」の値を指定することで実装ができます。変化量には「%」の値を使って「モノクロ」の変化量を指定します。

<div class="box5"><img src="/img/test.jpg"></div>

.box5 {
  width:500px;
  height:auto;
  margin:auto;
}
.box5 img{
  filter: grayscale(100%);
}

CSSで写真の「色相環を回転」させる場合は、「filter」プロパティを利用します。「filter」プロパティの値には「色相環を回転」をさせるフィルターの種類を指定することができます。
CSSで写真に「色相環を回転」させる場合は、「filter」プロパティに「hue-rotate（角度）」の値を指定することで実装ができます。変化量には「deg」の値を使って「色相環を回転」の角度を指定します。

<div class="box6"><img src="/img/test.jpg"></div>

.box6 {
  width:500px;
  height:auto;
  margin:auto;
}
.box6 img{
  filter: hue-rotate(45deg);
}

CSSで写真の「透明度」を変更する場合は、「filter」プロパティを利用します。「filter」プロパティの値には「透明度」を変更するフィルターの種類を指定することができます。
CSSで写真に「透明度」を変更する場合は、「filter」プロパティに「opacity（透明度）」の値を指定することで実装ができます。変化量には「%」の値を使って「透明度」を指定します。

<div class="box7"><img src="/img/test.jpg"></div>

.box7 {
  width:500px;
  height:auto;
  margin:auto;
}
.box7 img{
  filter: opacity(30%);
}

CSSで写真の「セピア」に変更する場合は、「filter」プロパティを利用します。「filter」プロパティの値には「セピア」に変更するフィルターの種類を指定することができます。
CSSで写真に「セピア」に変更する場合は、「filter」プロパティに「sepia（変化量）」の値を指定することで実装ができます。変化量には「%」の値を使って「セピア」の変化量を指定します。

<div class="box8"><img src="/img/test.jpg"></div>

.box8 {
  width:500px;
  height:auto;
  margin:auto;
}
.box8 img{
  filter: sepia(100%);
}

CSSで写真の「色を反転」させる場合は、「filter」プロパティを利用します。「filter」プロパティの値には「色を反転」させるフィルターの種類を指定することができます。
CSSで写真に「色を反転」させる場合は、「filter」プロパティに「invert（変化量）」の値を指定することで実装ができます。変化量には「%」の値を使って「色を反転」の変化量を指定します。

<div class="box9"><img src="/img/test.jpg"></div>

.box8 {
  width:500px;
  height:auto;
  margin:auto;
}
.box8 img{
  filter: sepia(100%);
}

CSSで写真の「彩度」を変化する場合は、「filter」プロパティを利用します。「filter」プロパティの値には「彩度」を変化するフィルターの種類を指定することができます。
CSSで写真に「彩度」を変化する場合は、「filter」プロパティに「saturate（変化量）」の値を指定することで実装ができます。変化量には「%」の値を使って「彩度」の変化量を指定します。

<div class="box10"><img src="/img/test.jpg"></div>

.box10 {
  width:500px;
  height:auto;
  margin:auto;
}
.box10 img{
  filter: saturate(160%);
}

写真や画像に変化を加える場合は、従来の方法ではPhotoshopなどで写真や画像を加工を行っていましたが、「filter」プロパティを、使いこなせるようになれば、写真を加工しなくてもコーディングのみで簡単に変更できますね。
コーディングの方法として、フィルター要素は覚えておくと便利です。