JavaScriptのscreen.colorDepthとは？モニタの色深度（表示色数）を取得する方法を解説
screen.colorDepth は、モニタが表示できる色数（色深度）をビット値で返すプロパティです。
現在の環境が何ビットカラーで表示されているかを調べたいときに利用します。
colorDepthプロパティとは？
色深度とは、モニタが表示できる色の種類をビット数で表したものです。
screen.colorDepth を使うと、次のような値が返されます。
| 色数 | 返される値（ビット） |
|---|---|
| 白黒 | 1 |
| 16色 | 4 |
| 256色 | 8 |
| 65,536色（HighColor） | 16 |
| 1,677万色（TrueColor） | 32 |
現在のモニタはほとんどが 24bit または 32bit（TrueColor）です。
使用例：色深度を取得して表示する
以下は、ページ読み込み時にモニタの色深度を取得し、フォームに表示するサンプルです。
<html>
<head>
<title>JavaScript Sample</title>
<script>
function scrDepth() {
// TrueColor 未満の場合に警告
if (screen.colorDepth < 32) {
alert(“モニタの色の設定は32ビット（TrueColor）未満です！”);
}
<head>
<title>JavaScript Sample</title>
<script>
function scrDepth() {
// TrueColor 未満の場合に警告
if (screen.colorDepth < 32) {
alert(“モニタの色の設定は32ビット（TrueColor）未満です！”);
}
// 色深度をフォームに表示
document.getElementById(“depth”).value = screen.colorDepth;
}
</script>
</head>
<body onload=”scrDepth()”>
<p><b>モニタの表示色の設定が表示されます。</b></p>
<form>
<p>モニタの色の設定は <input type=”text” id=”depth” size=”8″> ビットです。</p>
</form>
</body>
</html>
→ 読み込み時に自動で色深度を取得し、テキストボックスに表示します。
colorDepthの用途
- ユーザー環境の色深度に応じて画像を切り替える
- 古い環境での表示最適化
- デバッグや環境調査
現在ではほとんどの環境が高色深度のため、実用性は低いものの、
Screen オブジェクトの理解には役立つプロパティです。
まとめ
screen.colorDepthはモニタの色深度（ビット数）を返す- 一般的な環境では 24bit または 32bit が返る
- 古い環境では 8bit や 16bit の可能性もある
- 環境に応じた表示最適化に利用できる
