@media (height: ...)

アットメディアハイト（メディアクエリ）

意味特定の画面の高さの場合に適用

@media (height: ...)とは？

@media (height: ...)は、メディアクエリの一部で、特定の画面の高さに基づいてスタイルを適用するために使用します。

@media (height: ...)の具体的な使い方

特定の画面高さでの背景色変更例

@media (height: 800px) {
    body {
        background-color: lightblue;
    }
}

ビューポートの高さが800ピクセルの場合に、body要素の背景色を薄い青色に設定しています。

@media (height: ...)に関するよくある質問

Q. heightとwidthの違いは？

A. heightはビューポートの高さ、widthは幅を指定します。heightは縦向きのデバイスや特定の高さに応じたスタイリングに使用されますが、widthほど頻繁には使用されません。

Q. min-heightやmax-heightもある？

A. はい、min-heightとmax-heightも存在します。これらは、それぞれ最小高さと最大高さを指定するために使用されます。例えば、@media (min-height: 600px) {...} のように使用できます。

CSSの@media (height: ...)についても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの@media (height: ...)や@media (hover: ...)、@media (pointer: ...)、@media (min-aspect-ratio: ...)、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。