CSS

The CSS `@media` rule is used to dynamically switch styles based on the device's screen size and characteristics.

media属性 / @media

　CSSの @mediaは、画面サイズやデバイスの種類に応じてスタイルを適用するためのルールです。例えば、デスクトップ、タブレット、スマートフォンなど異なるデバイスに対して異なるデザインを提供する際に使用されます。@mediaは「メディアクエリ」と呼ばれ、指定した条件（例えば、画面の幅や高さ、解像度、向きなど）が満たされた場合に、その中のスタイルが適用されます。

　簡単な例を挙げると

CSS

@media (max-width: 600px) {
	body {
		background-color: lightblue;
	}
}

　この例では、画面幅が600ピクセル以下の場合に、背景色をライトブルーに変更するスタイルが適用されます。@mediaを使うことで、レスポンシブデザイン（異なる画面サイズに適応するデザイン）を簡単に実現できます。

　@mediaに指定できる条件（メディアクエリ）は、デバイスの特性に基づいて多くの種類があります。

幅・高さに関する条件
アスペクト比に関する条件
デバイスに関する条件
解像度に関する条件
画面の向き
表示モード
色に関する条件
モノクロデバイス
その他の条件

幅・高さに関する条件

width: ビューポートの幅
min-width: ビューポートの最小幅
max-width: ビューポートの最大幅
height: ビューポートの高さ
min-height: ビューポートの最小高さ
max-height: ビューポートの最大高さ

アスペクト比に関する条件

aspect-ratio: ビューポートの幅と高さの比率
min-aspect-ratio: 最小アスペクト比
max-aspect-ratio: 最大アスペクト比

デバイスに関する条件

device-width: デバイスのスクリーンの幅
min-device-width: デバイスのスクリーンの最小幅
max-device-width: デバイスのスクリーンの最大幅
device-height: デバイスのスクリーンの高さ
min-device-height: デバイスのスクリーンの最小高さ
max-device-height: デバイスのスクリーンの最大高さ

解像度に関する条件

resolution: デバイスの解像度（dpiまたはdpcm）
min-resolution: 最小解像度
max-resolution: 最大解像度

画面の向き

orientation: デバイスの画面の向き（縦向きまたは横向き）に応じて異なるスタイルを適用するためのルールです。

表示モード

display-mode: Webアプリケーションの表示モード（fullscreen、standalone、minimal-ui、browser）

色に関する条件

color: デバイスのカラー解像度（ビット数）
min-color: 最小カラー解像度
max-color: 最大カラー解像度
color-index: デバイスのカラーパレットの数
min-color-index: 最小カラーパレット数
max-color-index: 最大カラーパレット数

モノクロデバイス

monochrome: デバイスがモノクロかどうか
min-monochrome: モノクロ表示の最小ビット深度
max-monochrome: モノクロ表示の最大ビット深度

その他の条件

scan: テレビのスキャン方式（interlace または progressive）
grid: デバイスがグリッド（格子）レイアウトを使用しているかどうか
hover: ホバー操作が可能かどうか
pointer: ポインティングデバイスの精度（none、coarse、fine）
any-hover: 少なくとも1つのホバーデバイスがあるかどうか
any-pointer: 少なくとも1つのポインティングデバイスの精度

　これらの条件を組み合わせて、特定のデバイスや環境に適したスタイルを指定できます。

orientation

　@media の orientation は、デバイスの画面の向きに応じて CSSを適用するためのメディアクエリの一つです。画面の向きには主に2つの種類があり、以下のように指定します。

orientation: portrait: 画面が縦向き（高さが幅よりも大きい場合）のスタイルを指定します。
orientation: landscape: 画面が横向き（幅が高さよりも大きい場合）のスタイルを指定します。

　このメディアクエリを使うことで、デバイスの向きに合わせてデザインやレイアウトを柔軟に変更することができます。

CSS

@media (orientation: portrait) {
	/* 縦向きのスタイル */
	body {
		background-color: lightblue;
	}
}

@media (orientation: landscape) {
	/* 横向きのスタイル */
	body {
		background-color: lightgreen;
	}
}

　このようにして、デバイスの向きに応じて異なるスタイルを適用することができます。