@media (aspect-ratio: ...)

アットメディアアスペクトレシオ（メディアクエリ）

意味デバイスの画面比率に一致する場合に適用

@media (aspect-ratio: ...)とは？

@media (aspect-ratio: ...)は、メディアクエリの一部で、デバイスの画面のアスペクト比（幅と高さの比率）に基づいて、異なるスタイルを適用するために使用します。

@media (aspect-ratio: ...)の具体的な使い方

特定のアスペクト比での背景色設定の例

@media (aspect-ratio: 16/9) {
  body {
    background-color: lightblue;
  }
}

デバイスの画面アスペクト比が16:9の場合に、body要素の背景色を薄い青色に設定しています。

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

Q. aspect-ratioの値は何を表す？

A. aspect-ratioの値は、画面の幅と高さの比率を表します。例えば、16/9は16:9のワイドスクリーン形式を意味します。

Q. 複数のaspect-ratioを指定できる？

A. はい、カンマで区切ることで複数のアスペクト比を指定できます。例：@media (aspect-ratio: 16/9, 4/3) { ... }

Q. 小数点の値は使えますか？

A. はい、小数点の値も使用できます。例えば、1.5は3/2と同じです。ただし、分数形式の方が一般的で理解しやすいです。

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

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

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