@media (max-height: ...)

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

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

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

@media (max-height: ...)は、メディアクエリの一種で、ブラウザのビューポートの高さが指定した値以下の場合に適用されるスタイルを定義するために使用します。

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

最大ビューポート高さに応じた背景色変更の例

@media (max-height: 600px) {
    .example {
        background-color: lightblue;
    }
}

ビューポートの高さが600ピクセル以下の場合に、クラス名'.example'が指定された要素の背景色をライトブルーに変更します。

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

Q. max-heightは最小値？最大値？

A. max-heightは最大値を指定します。例えば、max-height: 600pxは「高さが600px以下」の条件を表します。

Q. 0pxは有効な値？

A. 技術的には有効ですが、実用的ではありません。0pxは画面が存在しない状態を意味するため、通常は使用しません。

Q. ブラウザ対応は？

A. modern-height-basedメディアクエリは、ほとんどの最新のブラウザで対応していますが、非常に古いブラウザでは動作しない可能性があります。

@media (max-height: ...)が学べる書籍の紹介

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

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