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

prefers-reduced-transparencyプロパティは、ユーザーがオペレーティングシステム（OS）のアクセシビリティ設定で、透明度や半透明効果の低減を希望しているかどうかの情報を保持するプロパティです。これはCSSのメディア特性の一つとして機能し、ウェブコンテンツがユーザーの個人的な環境設定に応じて、見た目を調整できるようにするために利用されます。

このプロパティは、ユーザーがWindowsの「透明効果」、macOSの「透明度を下げる」、iOSの「透明度を下げる」、あるいはAndroidなどのOS設定で、ウィンドウや背景のぼかし、半透明要素などの視覚効果を減らすオプションを有効にしている場合に、その設定状況を検知できます。具体的には、メディアクエリ内で @media (prefers-reduced-transparency) のように記述することで、ユーザーの設定が「低減を希望している」場合に適用されるスタイルを定義できます。

ウェブ開発者は、この情報を用いて、通常の透明な要素や背景のぼかし効果の代わりに、より不透明で明確な背景色やデザイン要素を適用することができます。例えば、半透明なナビゲーションバーを、ユーザーが透明度低減を有効にしている場合には完全に不透明な色に変更するといった調整が可能です。

これにより、背景と前景のコントラストが向上し、テキストの可読性が高まるほか、視覚的な複雑さや刺激が低減されます。これは、視覚過敏症を持つユーザーや、集中力を高めたいユーザー、または単に明瞭な表示を好むユーザーにとって、より快適でアクセスしやすいウェブ体験を提供することを目的としています。この機能は、単にデザインの選択肢を増やすだけでなく、すべてのユーザーがウェブコンテンツを等しく利用できるようにするためのモダンなウェブ開発における重要なアクセシビリティツールの一つです。

Copy
1@media (prefers-reduced-transparency: reduce) {
2  /* ここに透明度を減らすためのスタイルを記述 */
3  body {
4    background-color: #ffffff; /* 不透明な背景色 */
5  }
6  .element-with-transparency {
7    opacity: 1; /* 透明度を不透明に設定 */
8  }
9}

引数なし

引数はありません

戻り値なし

戻り値はありません