2023年2月7日 CSS, アクセシビリティ アニメーションのあるWebページって、見るのも作るのも好きなんですが、みなさんはいかがでしょう?中には動きが苦手で目が疲れてしまう、画面酔いしてしまう…なんていう方もいらっしゃるかと思います。今回はアニメーションが苦手な方のためにWebサイト側でできることを考えてみます。 ↑私が10年以上利用している会計ソフト! アニメーションを減らす設定 アニメーションによって画面酔いしてしまったり、動きがつくと内容が理解できなくなるという方は、OS側で視覚効果を減らす設定をしているかと思います。そういった設定をしている場合は、CSSでWebサイトのアニメーションもなくす、あるいは軽減させる指定が可能です。 設定方法 まずはアニメーションを減らすためのOS側の設定方法から紹介します。 Windows 10: 設定 → 簡単操作 → ディスプレイ → アニメ
![prefers-reduced-motionでアニメーション(視差効果)を減らす設定をしたデバイスに対応させる](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6360f36f602d322eb72e00b7770a2c28268fc4b/height=288;version=1;width=512/https%3A%2F%2Fwww.webcreatorbox.com%2Fwp-content%2Fuploads%2F2022%2F11%2Fthumb-motion.jpg)