scan

scan は CSS のメディア特性で、出力機器のスキャンプロセスに基づいて CSS スタイルを適用するために使用されます。

構文

scan 特性は、次のキーワード値のいずれかで指定されます。

interlace: 出力機器は「インターレース」レンダリングを使用しており、映像フレームは画面上の「偶数」行のみ、または「奇数」行のみを指定して交互に表示されます。
progressive: 出力機器は、特別な処理を行わずにコンテンツを画面に表示します。

解説

最近のほとんどの画面(およびすべてのコンピューター画面)は、プログレッシブレンダリングを使用しており、特別な処理を行わずに各画面を完全に表示します。

インターレースは、 CRT モニターや一部のプラズマテレビで、帯域幅を削減しながら 1 秒あたりのフレーム数 (FPS) を高速化するために使用されていました。インターレースでは、映像フレームは画面上の偶数行と奇数行を交互にレンダリングし、各フレームで画面の半分だけをダウンロードしてレンダリングします。これにより、人間の画像平滑化能力を利用して、帯域幅を半分に抑えながら、より高い FPS の放送を脳がシミュレートします。

インターレース画面をターゲットにする場合は、画面上で非常に速い動きを避け、アニメーションの詳細が 1 ピクセルより広いことを確認して、ちらつきを軽減してください。

例

HTML

html

<p>これはテストです。</p>

CSS

css

p {
 padding: 10px;
 border: solid;
}
@media screen and (scan: interlace) {
 p {
 background: #f4ae8a;
 }
}
@media screen and (scan: progressive) {
 p {
 text-decoration: underline;
 }
}
@media not screen and (scan: progressive) {
 p {
 border-style: dashed;
 }
}
@media not screen and (scan: interlaced) {
 p {
 color: purple;
 }
}

結果

[フレーム]

仕様書

仕様書
Media Queries Level 4 # scan

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年1月29日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告