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

CSSでオブジェクトの色を256階調のグレースケールに変換する方法

グレースケール効果とは

CSSのフィルター機能を利用すると、画像やテキストなどのオブジェクトの色を256階調のグレースケールに変換できます。カラー画像を白黒で表示したい場合や、モノクロ調のデザイン演出を行いたい場合に活用できる効果です。

パラメーター

このフィルターでは、以下のパラメーターが使用されます。

パラメーター説明
Grayオブジェクトの色を256階調のグレーに変換します。

実装例

以下のコードを実行すると、グレースケール効果を実際に確認できます。画像要素にもテキスト要素にも適用可能である点に注目してください。

<html>
   <head>
   </head>
   <body>
      <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: Gray">

      <p>テキストの例：</p>

      <div style="width: 357px;
         height: 50px;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         Filter: Gray">CSS Tutorials</div>
   </body>
</html>

補足：モダンブラウザでの代替手段

上記の「Filter: Gray」は、旧Internet Explorerで独自にサポートされていた構文です。現在の主要ブラウザでは、標準化されたCSSプロパティである filter: grayscale(100%) を使用することで、同様のグレースケール効果をより確実に実現できます。新規のWebサイト制作では、こちらの標準プロパティの採用を推奨します。

  1. CSSのrgb()関数で色を定義する方法｜RGBモデルの基本と実例

    CSSでは、rgb()関数を使うことで、赤・緑・青（Red-Green-Blue）の3つの光の三原色を組み合わせた「RGBモデル」で色を指定できます。各色の値は0〜255の範囲で設定し、rgb(赤, 緑, 青)の形式で記述します。 rgb()関数の基本的な書き方 構文は以下のとおりです。 rgb(赤の値, 緑の値, 青の値) rgb(255, 0, 0) → 赤 rgb(0, 255, 0) → 緑 rgb(0, 0, 255) → 青 rgb(255, 255, 255) → 白 rgb(0, 0, 0) → 黒 3つの値がすべて同じ場合は無彩色（グレー）になり、値が大きいほど明るい色に

  2. CSSのfilterプロパティをアニメーションで変化させる方法

    CSSでは、filterプロパティも他のスタイルと同じように@keyframesを使ってアニメーションさせることができます。画像のコントラストやぼかし、彩度などを滑らかに変化させることで、動きのある視覚表現が可能になります。 以下は、filterプロパティにアニメーションを実装するサンプルコードです。実際にブラウザで実行して動作を確認してみてください。 サンプルコード <!DOCTYPE html> <html> <head> <style> div { width: 600px;