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

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

HTMLの Screen availHeight プロパティは、ユーザーの画面で実際に利用できる高さ(ピクセル単位)を返します。この値には、ブラウザのツールバーやOSのタスクバーといったインターフェース要素の高さは含まれません。そのため、ウィンドウを最大化した際に表示可能な領域の高さを取得したい場合に便利です。

構文

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

screen.availHeight

サンプルコード

ここでは、ボタンをクリックするとavailHeightプロパティの値が画面に表示される簡単なデモを紹介します。

<!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 availHeight Property</h1>
<button class="btn" onclick="get()">Show availHeight Value</button>
<div class="show"></div>
<script>
    function get() {
        document.querySelector(".show").innerHTML = "Available Height is " + screen.availHeight + " px";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

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

「Show availHeight Value」ボタンをクリックすると、availHeightプロパティの値が表示されます。

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

補足ポイント

  • availHeightは読み取り専用のプロパティであり、値を直接変更することはできません。
  • 同様に、画面の利用可能な幅を取得するには screen.availWidth を使用します。
  • ブラウザのインターフェースを含まない画面全体の高さを取得したい場合は、screen.height を使用してください。
  1. HTML Screen pixelDepthプロパティとは？画面の色深度を取得する方法を解説

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

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

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