ファニプロTech

こんにちは。ファニプロエンジニアの古川です。

Webサイトのコーディングをされる皆さんにはおなじみのメディアクエリ。端末の種類や特性に応じて、CSS単体でスタイルを変更できるため、ユーザビリティ向上のための施策をシンプルに実行することができます。
例えばビューポートの幅に応じてスタイルを切り替えるメディア特性”width”は今やレスポンシブデザインを実現する際に欠かせません。

そんなメディアクエリですが、新たな仕様の策定は続いており、”Media Queries Level 4″”Media Queries Level 5″として、勧告に向けて草案などが発表されています。その中で公開された新機能の一部は、主要なモダンブラウザにすでに実装されています

今回は”Media Queries Level 4″”Media Queries Level 5″で追加されたメディア特性のうち、特に有用そうなものを3つご紹介いたします。

※今回ご紹介するメディア特性はIE11には実装されていないため、別途Javascriptなどで対応が必要です。また、各ブラウザの対応状況は変化する場合があります。
※この記事はMDN Web Docsの記述を参考に執筆しています。
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

---

any-hover

端末がhoverに対応した入力デバイスを持っているか判別します。
例えばマウスポインタのhoverでナビゲーションが展開されるといった実装をした場合、タブレットやスマートフォンなどのタッチデバイスでは期待通りに動作しない場合があります。
そのためJavascriptでユーザーエージェントを取得して切り替えるといった対応が良く取られますが、メディアクエリでも実現が可能です。

See the Pen any-hover by furukawa-funnypro (@furukawa-funnypro) on CodePen.

---

prefers-color-scheme

端末の設定で、ライトモード／ダークモードどちらの設定にしているか判別します。
端末の設定に合わせてスタイルを変更することで、ユーザーの好みに合わせたり、視覚障害のある方のアクセシビリティを高めることができます。

prefers-color-scheme: light [システムにライトモードを設定している]
prefers-color-scheme: dark [システムにダークモードを設定している]

See the Pen color-scheme by furukawa-funnypro (@furukawa-funnypro) on CodePen.

---

prefers-reduced-motion

端末の設定で、アニメーション効果や視覚効果が無効化されているか判別します。
視覚や前庭機能に障害のある方の中には、画面上の視覚効果やアニメーション効果によってめまいなどが起きるため、視覚効果を無効にしている方もいらっしゃるそうです。
そういったケースへの配慮としてCSSの視覚効果を調整する場合は、こちらのメディアクエリを利用すると便利です。

prefers-reduced-motion: no-preference[視覚効果に関する設定はされていない]
prefers-reduced-motion: reduce[システムにアニメーション効果や視覚効果の無効化を設定している]

See the Pen reduced-motion by furukawa-funnypro (@furukawa-funnypro) on CodePen.

---

いかがでしたでしょうか？端末の状態を判別するには多くの場合Javascriptが利用されてきましたが、メディアクエリによってCSSだけでシンプルに実装することが出来ました。うまく活用しながら、WEBサイトのユーザビリティを高めていきたいですね！

カテゴリー：ファニプロTech

タグ：採用サイト