MonoImage

ブログ

  • CSSで画像をモノクロにする方法

    CSSを使って画像をモノクロにする方法をご紹介します。CSSのfilterプロパティを使うことで、簡単に画像をモノクロ（グレースケール）に変換できます。

    基本的な方法

    img {
      filter: grayscale(100%);
    }

    この例では、すべてのimg要素に100%のグレースケールフィルターを適用します。パーセンテージの値を変更することで、モノクロの強さを調整できます。例えば、grayscale(50%)とすると、半分だけグレースケール効果がかかります。

    特定の画像だけに適用する

    .monochrome {
      filter: grayscale(100%);
    }

    HTMLでは以下のように使います：

    htmlコピー<img src="カラー画像.jpg" class="monochrome">

    ホバー効果の追加

    マウスオーバー時にカラーに戻る効果も人気があります：

    .monochrome {
      filter: grayscale(100%);
      transition: filter 0.3s ease;
    }

    .monochrome:hover {
      filter: grayscale(0%);
    }

    ブラウザ互換性

    最新のブラウザはすべてfilterプロパティをサポートしていますが、古いブラウザのために接頭辞を使用することもできます：

    .monochrome {
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }

    これらの方法を使って、CSSだけで簡単に画像をモノクロにすることができます。特定の要素や状況に応じて調整してください。