CSSで画像を白黒にする

CSSで画像を白黒にするのは実に簡単で、対象のセレクタにfilter: greyscale(100%);というプロパティと値を指定するだけです。

白黒にできるのは画像要素に限らないのですが、白黒にしたい対象は画像であることがほとんどだと思うので、この記事では画像を対象に白黒にしてみることにします。

＊白黒にする前の画像＊

＊CSSで白黒にした画像＊

    
      img {
        filter: grayscale(100%);
      }

ということで、なんとたった1行のCSSで画像を白黒にすることができました。
解説しなくてもなんとなく分かるかと思いますが、grayscale(100%)で完全な白黒になります。50%だと半分程度、白黒になる（彩度が落ちる）ということになります。

＊grayscale(50%)＊

▲の例のように50%程度のgrayscaleを設定することで、画像を色あせた感じにすることができます。古いアルバムのようなイメージにしたい場合に良いですね。
ただ、このようにgreyscale( )だけでは白黒の度合いしか指定できません。

画像をただ白黒にするだけでなく、さらに調整を加えたい場合は、contrast( )など別の値も指定する必要があります。
次の章では、白黒画像をCSSでさらに加工していきます。

POINT!
1. ・画像をCSSで白黒にするには、filterプロパティを適用させる！
2. ・値はgrayscale( )を指定し、カッコ( )の中の数値を100%にすることで、完全な白黒になる！
3. ・grayscale( )だけでは白黒の度合いしか指定できず、細かな加工をするには他の値も指定する必要がある！

白黒＋コントラストを指定

画像を単に白黒にするだけでなく、白と黒の部分をくっきりさせてポスター風にする…という加工をしてみようと思います。
もちろん、画像加工ソフトなどは一切使わずにCSSだけでやっていきます。

画像を白黒にするのに使用したfilterプロパティですが、値はgrayscale( )だけでなく他にも色々あります。
そのうちの一つが、contrast( )です。
contrast( )はその名の通り、画像のコントラストを調整する値です。

filterプロパティの値は複数指定することができるので、grayscale( )とcontrast( )を組み合わせて、白黒画像をさらに加工してみましょう。

＊上：白黒＋コントラストを調整＊
＊下：白黒のみ＊

上の画像のCSSは、{ filter: grayscale(100%) contrast(200%); }…となっています。（下の画像はgrayscale(100%)だけ）
contrast( )は、通常が100%の状態のため、コントラストを強くするには100%を超える数値で指定すればOKです。

また、grayscale( )とcontrast( )、どちらから先に指定しても同じ結果になります。
当たり前じゃないかと思うかもしれませんが、transformプロパティのtranslate( )とrotate( )のように、中には指定の順序によって表示結果が変わることもあるので注意しておくと良いです。（該当の記事はこちら）

POINT!
1. ・画像のコントラスト調整には、filterプロパティにcontrast( )を指定する！
2. ・contrast( )は100%が普通の状態なので、コントラストを強めるには100%を超える数値で指定する！
3. ・contrast( )とgrayscale( )を組み合わせることで、白黒画像をさらに調整できる！

白黒＋明るさを調整

CSSで白黒画像＋コントラストを変更できるだけでなく、画像の明るさを変えることも可能です。

filterプロパティのgrayscale( )で白黒にするとともに、brightness( )を指定することによって白黒画像の明るさを調整できます。

CSSの指定の手順はcontrast( )と全く同じです。

＊上：白黒＋明るさを明るく＊
＊下：白黒のみ＊

上の画像のCSSは、{ filter: grayscale(100%) brightness(200%); }…となっています。
contrast( )と同様、100%が通常の状態であるため、明るさを普通の状態よりも強くするには100%を超える数値で指定する必要があります。

このように、filterプロパティを指定するだけで、画像編集ソフトに頼らずともCSSである程度画像の加工編集が可能です。
ただ、あくまでCSSで画像にフィルターをかけているだけであって画像そのものが加工編集されたわけではない…という点には注意が必要です。

そのためIE（インターネットエクスプローラー）など、filterプロパティが非対応の古いブラウザではCSSが効かず、元の画像が表示されます。
とはいえ、IEは完全にサポートが打ち切られていますし、全く使われなくなるのも時間の問題だと思います。（2021年10月現在）
他のブラウザではfilterプロパティは普通に使えるので、あまり気にしなくても良いかと思います。

POINT!
1. ・画像の明るさ調整には、filterプロパティにbrightness( )を指定する！
2. ・brightness( )も100%が普通の状態なので、より明るくするには100%を超える数値で指定する！
3. ・grayscale( )を組み合わせることで、画像を白黒にした上で明るさを調整できる！

白黒＋透明度のある白を敷く

白黒画像の上にテキストを配置したいという場合もあると思います。
そんな時は、画像の上に透明度のある白を画像の上にかけるというテクニックがよく使われるので、簡単にその方法をご紹介します。
方法は一つだけでなく色々あるのですが、今回は擬似要素を使って透明度のある白背景を差し込む方法を使ってみようと思います。

やり方は簡単で、白黒を設定した要素の擬似要素をCSSで作り、positionプロパティ、width/hightプロパティで要素全体に覆い被さるように配置し、background-colorプロパティで透明度のある白色を指定するだけです。

＊白黒画像に透明度のある白背景を重ねる＊

テキストを重ねる

    <div class="sample_outer">
      <p class="sample_text">テキストを重ねる</p>
      <div class="white_screen">
        <img src="https://web-de-asobo.net/wp-content/uploads/2021/10/publicdomainq-0058560lyellp.jpg" alt="サンプル画像">
      </div>
    </div>

      .sample_outer {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .white_screen {
        position: relative;
      }
      .white_screen img {
        width: 100%;
        max-width: 700px;
        display: block;
        margin: 0 auto;
        filter: grayscale(100%);
      }
      .sample_text {
        position: absolute;
        width: fit-content;
        width: -moz-fit-content;
        font-size: 2.5rem;
        font-weight: bold;
        top: 10%;
        left: 0;
        right: 0;
        margin: auto;
        color: rgb(45, 70, 138);
        z-index: 1;
      }
      .white_screen::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        max-width: 700px;
        height: 100%;
        background-color: rgba(255,255,255,.5);
      }

ただここで一つ大きな注意点なのですが、imgタグに擬似要素は作れないという点です。
なので、擬似要素を作って透明度のある白背景を重ねる場合は上のサンプルコードのように、img要素をdivタグなどで囲み、そっち（親要素）の方に擬似要素のCSSを指定する必要があります。

また画像の上にテキストを配置する場合は、テキストまで白黒になったり、透明度のある白背景の下に重なってしまうことがないように、HTMLの構造を考える必要があります。

このように画像に透明度のある白を重ねると、その上にテキストなどを配置してもテキストが読みやすくなります。
Photoshopなどの画像編集ソフトでもよく使うテクニックなのですが、これをCSSでもできるようにしておくと後で透明度を変更したりするのがめちゃ楽になります。

画像そのものを加工編集する場合、透明度を少しだけ変える場合でも画像を作り替えて保存し直す必要が出てしまいますが、CSSならば値の数値の変更だけで済みます。
修正依頼の多いクライエントさんの案件では、最初からPhotoshopやIllustratorで気合を入れて画像を作り込むよりも、CSSで対応できる部分はCSSでやっておくと効率が良くなるかもしれません。

POINT!
1. ・白黒画像の上にテキストを重ねたい場合は、透明度のある白を重ねると良い！
2. ・透明度のある白を重ねるには擬似要素を使うと簡単だが、imgタグには擬似要素を作れないので注意！
3. ・テキストごと白黒になったり、テキストの上に白背景が重ならないよう、HTMLの構造にも注意が必要！