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

CSSで画像を白黒（グレースケール）に変換する方法

CSSでは、filterプロパティのgrayscale()関数を使うことで、カラー画像を簡単に白黒（モノクロ）画像へ変換できます。grayscale()の値は0%〜100%で指定し、100%を設定すると完全なグレースケール画像になります。

以下は、CSSを使って画像を白黒に変換するコード例です。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
    margin: 20px;
}
img.normal {
    margin-left: 30%;
    width: 300px;
    height: 300px;
}
img.filter {
    width: 300px;
    height: 300px;
    filter: grayscale(100%);
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSSで白黒画像を作成する例</h1>
<img class="normal" src="https://i.picsum.photos/id/59/500/500.jpg">
<img class="filter" src="https://i.picsum.photos/id/59/500/500.jpg">
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が表示されます。

CSSで画像を白黒（グレースケール）に変換する方法

ポイント解説

この例では、同じ画像を2つ並べて表示し、片方にはfilter: grayscale(100%);を適用しています。左側の元画像はカラーのまま、右側の画像は完全に白黒で表示されていることがわかります。

なお、grayscale()の値を調整することで、彩度の度合いを段階的に変えることも可能です。例えばgrayscale(50%)と指定すると、カラーと白黒の中間的な演出ができます。ホバー時に画像を白黒に切り替えるなど、インタラクティブな表現にも活用できる便利なフィルターです。


  1. CSSとJavaScriptで作る名言スライドショー！前へ・次へボタン付きの実装方法を解説

    CSSとJavaScriptを組み合わせると、名言や引用文を順番に切り替えて表示できるスライドショーを手軽に作成できます。本記事では、「前へ」「次へ」ボタンとドット型ナビゲーションを備えた名言スライドショーの具体的な実装例を、コード付きでわかりやすく解説します。 実装例：完全なサンプルコード 以下のコードをそのままHTMLファイルとして保存すれば、ブラウザですぐに動作を確認できます。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=dev

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

    CSSのfilterプロパティにグレースケール値を指定することで、カラー画像を簡単に白黒画像へと変換できます。filterプロパティは、ぼかし（blur）やドロップシャドウ（drop-shadow）など、さまざまな特殊効果を画像に適用できる便利な機能です。基本の構文CSSのfilterプロパティの構文は以下の通りです。Selector {    filter: grayscale(100%);    -webkit-filter: grayscale(100%); }grayscale(100%)で完全な白黒になり、パーセンテージを下げることで部分的に彩