path: root/files/ja/web/css/@media/prefers-reduced-motion/index.html

---
title: prefers-reduced-motion
slug: Web/CSS/@media/prefers-reduced-motion
tags:
  - '@media'
  - CSS
  - Media Queries
  - Reference
  - media feature
  - メディアクエリ
  - メディア特性
translation_of: Web/CSS/@media/prefers-reduced-motion
---
<p><strong><code>prefers-reduced-motion</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。</p>

<div class="blockIndicator warning">
<p><strong>重要:</strong> このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。</p>
</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<dl>
 <dt><code><dfn>no-preference</dfn></code></dt>
 <dd>システムが把握している設定をユーザーが行っていないことを示します。</dd>
 <dt><code><dfn>reduce</dfn></code></dt>
 <dd>前庭運動障害者の不快感の引き金となるモーションベースのアニメーションの種類を削除したり置き換えたりするインターフェイスを希望することをユーザーがシステムに通知したことを示します。</dd>
</dl>

<h2 id="User_preferences" name="User_preferences">ユーザー設定</h2>

<p>Firefox では、 <code><dfn>reduce</dfn></code> の要求は以下の場合に尊重されます。</p>

<ul>
 <li>GTK/GNOME では、 GNOME Tweaks &gt; General タブ (バージョンによっては Appearance タブ) &gt; Animations がオフになっている場合。
  <ul>
   <li>他にも、 <code>gtk-enable-animations = false</code> を <a href="https://wiki.archlinux.org/index.php/GTK#Configuration">GTK 3 configuration file</a> の <code>[Settings]</code> に追加する方法もあります。</li>
  </ul>
 </li>
 <li>Windows 10: 設定 &gt; 簡単操作 &gt; ディスプレイ &gt; アニメーションを表示する</li>
 <li>Windows 7: コントロールパネル &gt; コンピューターの簡単操作センター &gt; コンピューターでの作業に集中しやすくします &gt; 必要のないアニメーションは無効にします (可能な場合)</li>
 <li>macOS: システム設定 &gt; アクセシビリティ &gt; 表示 &gt; 動きの抑制</li>
 <li>iOS: 設定 &gt; 一般 &gt; アクセシビリティ &gt; 視覚効果を減らす</li>
 <li>Android 9 以上: 設定 &gt; ユーザー補助 &gt; アニメーションの削除</li>
 <li>Firefox では <code>about:config</code>: 数値型の設定項目 <code>ui.prefersReducedMotion</code> を追加し、値を <code>1</code> とします。この設定の変更は直ちに効果が現れます。</li>
</ul>

<h2 id="Examples" name="Examples">例</h2>

<p>この例では、既定でで拡大縮小アニメーションが使用されています。アクセシビリティ設定で Reduce Motion を有効にしている場合、このアニメーションは前庭運動に影響のないシンプルなディゾルブにトーンダウンされます。</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;div class="animation"&gt;animated box&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">.animation {
  animation: pulse 1s linear infinite both;
}

/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
@media (prefers-reduced-motion) {
  .animation {
    animation-name: dissolve;
  }
}
</pre>

<div class="hidden">
<pre class="brush: css notranslate">.animation {
  background-color: #306;
  color: #fff;
  font: 1.2em sans-serif;
  width: 10em;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

@keyframes pulse {
  0% { transform: scale(1); }
  25% { transform: scale(.9); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes dissolve {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}
</pre>
</div>

<h3 id="Result" name="Result">結果</h3>

<p>{{EmbedLiveSample("Examples")}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}</td>
   <td>{{Spec2('CSS5 Media Queries')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query (CSS Tricks)</a></li>
 <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion (WebKit Blog)</a> includes vestibular motion trigger examples.</li>
</ul>

<div>{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}}</div>