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

HTML Screen pixelDepthプロパティとは？画面の色深度を取得する方法を解説

HTMLの Screen pixelDepth プロパティは、ビジター（訪問者）の画面における色解像度（1ピクセルあたりのビット数）を返します。

構文

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

screen.pixelDepth

戻り値について

このプロパティは、画面の色深度を「ピクセルあたりのビット数（bits per pixel）」で表す整数値として返します。一般的なモニターでは 24 または 32 が返されるのがほとんどです。なお、screen.colorDepth プロパティもほぼ同じ値を返しますが、現代の主要ブラウザでは両者に実質的な違いはありません。

サンプルコード

それでは、HTML Screen pixelDepthプロパティを使用した具体的な例を見ていきましょう。ボタンをクリックすると、現在の画面の色深度が画面上に表示されます。

<!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 pixelDepth Property</h1>
<button class="btn" onclick="get()">Show pixel depth</button>
<div class="show"></div>
<script>
    function get() {
        document.querySelector(".show").innerHTML = "Color Resolution is " + screen.pixelDepth + " bits per pixel";
    }
</script>
</body>
</html>

実行結果

HTML Screen pixelDepthプロパティとは？画面の色深度を取得する方法を解説

ページを開くと、グラデーション背景の中央に「Show pixel depth」ボタンが表示されます。このボタンをクリックしてみましょう。

HTML Screen pixelDepthプロパティとは？画面の色深度を取得する方法を解説

ボタンをクリックすると、JavaScriptの screen.pixelDepth プロパティで取得した、ビジターの画面の色解像度（例：「Color Resolution is 24 bits per pixel」）が画面に表示されます。

まとめ

ScreenオブジェクトのpixelDepthプロパティを使えば、ユーザーの画面が1ピクセルあたり何ビットで色を表現しているかを簡単に取得できます。デバイスや環境に応じた表示の最適化などに活用できる、覚えておくと便利なプロパティです。

  1. HTML Screen availHeightプロパティとは?使い方とサンプルコードを解説

    HTMLの Screen availHeight プロパティは、ユーザーの画面で実際に利用できる高さ(ピクセル単位)を返します。この値には、ブラウザのツールバーやOSのタスクバーといったインターフェース要素の高さは含まれません。そのため、ウィンドウを最大化した際に表示可能な領域の高さを取得したい場合に便利です。構文availHeightプロパティの基本的な構文は以下のとおりです。screen.availHeightサンプルコードここでは、ボタンをクリックするとavailHeightプロパティの値が画面に表示される簡単なデモを紹介します。<!DOCTYPE html> <htm

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

    colorDepthプロパティとは HTMLのScreenインターフェースが持つcolorDepthプロパティは、画像を表示するために使用されるカラーパレットのビット深度（1ピクセルあたりのビット数）を返します。 現代の一般的なブラウザ環境では、この値はほとんどの場合「24」（約1,677万色表示可能）または「32」を返します。なお、同様の役割を持つscreen.pixelDepthプロパティと同じ値になることが多く、実用上はどちらを使っても大きな違いはありません。 構文 colorDepthプロパティの基本的な構文は以下のとおりです。 screen.colorDepth サンプルコード