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

HTML Screen colorDepthプロパティの使い方をわかりやすく解説

colorDepthプロパティとは

HTMLのScreenインターフェースが持つcolorDepthプロパティは、画像を表示するために使用されるカラーパレットのビット深度（1ピクセルあたりのビット数）を返します。

現代の一般的なブラウザ環境では、この値はほとんどの場合「24」（約1,677万色表示可能）または「32」を返します。なお、同様の役割を持つscreen.pixelDepthプロパティと同じ値になることが多く、実用上はどちらを使っても大きな違いはありません。

構文

colorDepthプロパティの基本的な構文は以下のとおりです。

screen.colorDepth

サンプルコード

実際にHTML ScreenのcolorDepthプロパティを使用した例を見てみましょう。ボタンをクリックすると、画面の色深度が画面上に表示されます。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    .show {
        font-size: 1.2rem;
        margin: 1rem auto;
        font-weight: bold;
        font-family: sans-serif;
    }
</style>
<body>
<h1>HTML screen colorDepth Property</h1>
<button class="btn" onclick="get()">Show color depth</button>
<div class="show"></div>
<script>
    function get() {
        document.querySelector(".show").innerHTML = "Color Depth is " + screen.colorDepth + " bits per pixel";
    }
</script>
</body>
</html>

実行結果

HTML Screen colorDepthプロパティの使い方をわかりやすく解説

ページ内の「Show color depth（色深度を表示）」ボタンをクリックすると、JavaScriptによって現在の画面の色深度が取得され、結果が表示されます。

HTML Screen colorDepthプロパティの使い方をわかりやすく解説

このように、colorDepthプロパティを使えば、ユーザーのディスプレイが表現できる色の情報量を簡単に取得できます。表示品質に応じて画像やデザインを切り替えたい場合などに活用できる便利なプロパティです。

  1. HTML DOMのborderRightColorプロパティとは？右ボーダーの色を操作する方法を解説

    HTML DOMのborderRightColorプロパティは、要素の右ボーダーの色を取得・設定するために使用されるスタイルプロパティです。JavaScriptから動的にボーダーの色を変更したい場合に活用できます。 borderRightColorプロパティの構文 borderRightColorプロパティを設定する場合の構文は以下のとおりです。 object.style.borderRightColor = color|transparent|initial|inherit 指定できる値の一覧 このプロパティには、以下の4つの値を指定できます。 値説明 color右ボーダーの色を

  2. HTML DOMのstyle.colorプロパティとは？使い方とサンプルコードを解説

    HTML DOMのstyle.colorプロパティは、要素内のテキストの色を取得（get）および設定（set）するために使用されるプロパティです。テキストの色は、以下のいずれかの形式で指定できます。16進数カラーコード（例：#ff0000）rgb() 関数（例：rgb(255,0,0)）rgba() 関数（透明度を含む指定）hsl() 関数（色相・彩度・輝度による指定）hsla() 関数（透明度を含むHSL指定）定義済みのカラーキーワード（例：red、blue、green など）style.colorプロパティの構文colorプロパティを設定する際の基本的な構文は次のとおりです。object.