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

Copy
1/*
2 * prefers-reduced-motion は、ユーザーがOSのシステム設定でアニメーションの量を
3 * 減らすことを好むかどうかを検出するCSSメディア特性です。
4 *
5 * このコード例では、.button クラスを持つ要素の、通常時とホバー時の
6 * アニメーションの挙動を prefers-reduced-motion に応じて制御する方法を示します。
7 */
8.button {
9  display: inline-block;
10  padding: 10px 20px;
11  font-size: 16px;
12  text-align: center;
13  text-decoration: none;
14  color: white;
15  background-color: #007bff; /* 通常時の背景色 */
16  border: none;
17  border-radius: 5px;
18  cursor: pointer;
19  margin: 20px;
20
21  /*
22   * prefers-reduced-motion: no-preference
23   * (ユーザーが特にアニメーションを減らすことを好まない場合) に適用される
24   * デフォルトの滑らかなトランジションです。
25   * ホバー時に背景色が変化し、要素がわずかに浮き上がる効果があります。
26   */
27  transition: background-color 0.3s ease-out, transform 0.3s ease-out;
28}
29
30/* prefers-reduced-motion: no-preference の場合に適用されるホバー時のスタイル */
31.button:hover {
32  background-color: #0056b3; /* ホバー時の背景色 */
33  transform: translateY(-3px); /* ホバー時に少し上に移動 */
34  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影を付けて浮き上がりを表現 */
35}
36
37/*
38 * @media (prefers-reduced-motion: reduce)
39 * ユーザーがシステム設定で「アニメーションの表示を減らす」ことを選択している場合に適用されます。
40 * ここでは、滑らかな動きのトランジションを無効にし、即座に変化するようにします。
41 */
42@media (prefers-reduced-motion: reduce) {
43  .button {
44    /* すべてのトランジションを無効にし、動きを削除します */
45    transition: none;
46    /* transform も初期値に戻し、ホバーしても動かないようにします */
47    transform: none;
48    /* box-shadow も削除し、浮き上がり効果をなくします */
49    box-shadow: none;
50  }
51
52  /* prefers-reduced-motion: reduce の場合でも、ホバー時の背景色変化は残す例 */
53  .button:hover {
54    background-color: #0056b3; /* 背景色のみ即座に変化 */
55    transform: none; /* 動きは引き続き無効 */
56    box-shadow: none; /* 影も引き続き無効 */
57  }
58
59  /*
60   * この設定により、アニメーションに敏感なユーザーのアクセシビリティが向上します。
61   */
62}

prefers-reduced-motionは、ユーザーがオペレーティングシステム（OS）のシステム設定で「アニメーションの表示を減らす」ことを選択しているかどうかを検出するためのCSSメディア特性です。この特性を使用することで、ウェブサイトやアプリケーションのアニメーションの挙動を、ユーザーの好みに合わせて柔軟に調整できます。このメディア特性には引数や戻り値は存在しません。

提示されたサンプルコードでは、.buttonクラスを持つ要素を例に、prefers-reduced-motionの適用方法を示しています。まず、通常の状態（ユーザーが特にアニメーションを減らすことを好まない場合、これはprefers-reduced-motion: no-preferenceに相当します）では、ボタンに滑らかなトランジションが設定されています。これにより、ホバー時に背景色が0.3秒かけて変化し、ボタンがわずかに上に移動して影を伴い浮き上がるようなアニメーション効果が適用されます。

次に、@media (prefers-reduced-motion: reduce)というメディアクエリブロックを用いて、ユーザーがアニメーションを減らすことを選択している場合のスタイルを定義しています。このブロック内では、.button要素に設定されていたすべてのトランジション（transition: none;）と、ホバー時に発生するtransformによる移動やbox-shadowによる浮き上がり効果を無効にしています。結果として、この設定が有効な環境では、ユーザーがボタンをホバーしても背景色のみが即座に変化し、動きを伴うアニメーションは発生しません。

このようにprefers-reduced-motionを活用することで、アニメーションに敏感なユーザーや、集中を必要とするユーザーに対して、より快適でアクセシビリティの高いウェブ体験を提供することが可能になります。

Copy
1/*
2 * このサンプルコードは、ユーザーがシステム設定で「アニメーションを減らす」
3 * オプションを有効にしているかどうかを検知し、それに応じて要素の動きを調整する方法を示します。
4 */
5
6/* デフォルトのボックススタイルとアニメーション（動きを伴う） */
7.animated-box {
8  width: 100px;
9  height: 100px;
10  background-color: #007bff;
11  margin: 20px;
12  border-radius: 8px;
13  /* 通常時はスムーズなアニメーションを設定 */
14  transition: transform 0.5s ease-in-out, background-color 0.5s ease-in-out;
15}
16
17/* ホバー時にボックスを少し拡大し、色を変える */
18.animated-box:hover {
19  background-color: #0056b3;
20  transform: scale(1.1);
21}
22
23/*
24 * ユーザーがシステム設定で「動きを減らす」を有効にしている場合、
25 * prefers-reduced-motion: reduce メディア特性が true になります。
26 * このブロック内のスタイルが適用され、動きが抑えられます。
27 */
28@media (prefers-reduced-motion: reduce) {
29  /*
30   * 「動きを減らす」が設定されている場合、アニメーションや
31   * トランジションの時間を大幅に短縮したり、無効にしたりします。
32   * これにより、ユーザーへの視覚的負担を軽減します。
33   */
34  .animated-box {
35    /* トランジションをほぼ即座に完了させることで、アニメーションを無効化 */
36    transition: transform 0.01s linear, background-color 0.01s linear;
37  }
38
39  /* ホバー時のスタイルは維持しつつ、アニメーションは抑制 */
40  .animated-box:hover {
41    /* ここでは、transitionを上書きして瞬間的に変更する */
42    transform: scale(1.1); /* 瞬間的に拡大 */
43    background-color: #0056b3; /* 瞬間的に色変更 */
44  }
45}

このサンプルコードは、CSSのメディア特性であるprefers-reduced-motionの使用方法を示しています。prefers-reduced-motionは、ユーザーがオペレーティングシステムやブラウザの設定で「アニメーションを減らす」または「動きを抑制する」といったアクセシビリティオプションを有効にしているかどうかを検知するために使われます。

この特性には引数や戻り値という概念はありませんが、その値としてreduceを指定することで、「ユーザーが動きを減らすことを希望している」状態かどうかを判定し、その条件がtrueの場合にのみ@media (prefers-reduced-motion: reduce)ブロック内のスタイルを適用します。

サンプルでは、まず.animated-boxにホバー時に拡大・色変更するスムーズなアニメーション（transition）を設定しています。しかし、ユーザーがシステム設定で「動きを減らす」を有効にしている場合、@media (prefers-reduced-motion: reduce)ブロック内のスタイルが優先されます。このブロック内では、transitionの時間を極端に短くすることで、実質的にアニメーションを無効化しています。

これにより、要素の動きによる視覚的負担を軽減し、アニメーションに敏感なユーザーや特定の環境下でのパフォーマンス向上に貢献し、よりアクセシブルなウェブ体験を提供できます。