CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのfilterプロパティで画像を白黒（グレースケール）に変換する方法

CSSのfilterプロパティにグレースケール値を指定することで、カラー画像を簡単に白黒画像へと変換できます。filterプロパティは、ぼかし（blur）やドロップシャドウ（drop-shadow）など、さまざまな特殊効果を画像に適用できる便利な機能です。

基本の構文

CSSのfilterプロパティの構文は以下の通りです。

Selector {
   filter: grayscale(100%);
   -webkit-filter: grayscale(100%);
}

grayscale(100%)で完全な白黒になり、パーセンテージを下げることで部分的に彩度を落とすことも可能です。また、-webkit-filterを併記することで、古いバージョンのSafariなどのWebKit系ブラウザにも対応できます。

サンプルコード1：偶数番目の画像を白黒にする

以下の例では、:nth-of-type(even)セレクタを使って、偶数番目の画像だけをグレースケール表示しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            margin: 2%;
            border-radius: 25%;
         }
         img:nth-of-type(even) {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
         }
      </style>
   </head>
   <body>
      <img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
      <img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
   </body>
</html>

このコードを実行すると、1枚目はカラー、2枚目は白黒で表示されます。

CSSのfilterプロパティで画像を白黒（グレースケール）に変換する方法

サンプルコード2：奇数番目の画像を白黒にする

次の例では、:nth-of-type(odd)セレクタを使い、今度は奇数番目の画像のみをグレースケールにしています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            margin: 2%;
         }
         img:nth-of-type(odd) {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
         }
      </style>
   </head>
   <body>
      <img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
      <img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
   </body>
</html>

実行結果は以下の通りです。1枚目が白黒、2枚目がカラーで表示されていることが確認できます。

CSSのfilterプロパティで画像を白黒（グレースケール）に変換する方法

まとめ

CSSのfilter: grayscale()を使えば、画像編集ソフトを使わずに手軽に白黒画像を作成できます。ホバー時にカラーから白黒へ切り替えるなど、transitionと組み合わせた演出にも活用できるので、ぜひWebデザインに取り入れてみてください。

  1. CSSでスティッキーイメージ（追従画像）を作成する方法【初心者向け解説】

    Webページをスクロールしても画像が画面上に固定され続ける「スティッキーイメージ」は、position: sticky を使うことで簡単に実装できます。この記事では、CSSだけでスティッキーイメージを作成する具体的なコード例と、その仕組みをわかりやすく解説します。スティッキーイメージとは？スティッキー（sticky）配置とは、要素が通常のドキュメントフロー内に表示されつつ、スクロールして指定した位置に達すると、その位置に「貼り付いて」動かなくなる配置方法です。画像に対してこの設定を行うことで、ページを下にスクロールしても画像が画面上部に留まり続ける効果が得られます。実装コード例以下は、CSSで

  2. CSSのclip-pathプロパティで三角形を作成する方法

    三角形は、CSSのclip-pathプロパティを使うことで簡単に作成できます。画像ファイルやSVGに頼らず、純粋なCSSだけで図形を描画できるため、軽量で柔軟なデザイン表現が可能になります。 clip-pathプロパティとは clip-pathプロパティは、要素の表示範囲を切り抜く（クリッピングする）ためのプロパティです。特にpolygon()関数を使用すると、複数の座標点を指定することで任意の多角形を自由に描くことができます。 構文 CSS clip-pathプロパティの基本構文は以下のとおりです。 Selector {     clip-path: