【CSS Modules】prefers-reduced-motionメディア機能の使い方

prefers-reduced-motionプロパティは、WebサイトやWebアプリケーションを利用するユーザーの、動きに関するシステムレベルでの好みを保持するプロパティです。具体的には、オペレーティングシステム（OS）の設定において、アニメーションやトランジションといった動的な視覚効果を減らすことをユーザーが選択しているかどうかを検出するために使用されます。

このプロパティはCSSのメディアクエリ（media-feature）として機能し、@mediaルール内で利用することで、ユーザーの好みに応じた異なるスタイルを適用することが可能になります。prefers-reduced-motionは主に二つの値を取ります。一つはreduceで、これはユーザーがOS設定でアニメーションなどの動きを減らすことを好んでいる状態を示します。もう一つはno-preferenceで、これはユーザーが特に動きに関する設定をしていないか、または動きを減らすことを希望していない状態を示します。

システムエンジニアを目指す方にとって、この機能はWebアクセシビリティの観点から非常に重要です。動的なアニメーションは視覚的に魅力的ですが、一部のユーザー、特に前庭機能障害を持つ方や特定の状況下では、めまいや吐き気、集中力の低下などの不快な症状を引き起こす可能性があります。prefers-reduced-motionを利用することで、開発者はこのようなユーザーのために、動きの少ない、または動きのない代替インターフェースを提供できるようになります。これにより、より多くの人々が快適にWebコンテンツを利用できるようになり、ユーザー体験の向上とアクセシビリティの確保に大きく貢献します。このプロパティを適切に活用することで、多様なユーザーニーズに対応した柔軟なWebデザインを実装することができます。

Copy
1@media (prefers-reduced-motion: reduce) {
2}

引数なし

引数はありません

戻り値なし

戻り値はありません