@media (hover: ...)

アットメディアホバー（メディアクエリ）

意味ユーザーのポインティングデバイスのホバー機能に基づいて適用

@media (hover: ...)とは？

@media (hover: ...)は、メディアクエリの一種で、ユーザーのポインティングデバイス（マウスやタッチパッドなど）がホバー機能を持っているかどうかに基づいて、異なるスタイルを適用するために使用します。

@media (hover: ...)の具体的な使い方

ホバー対応デバイス用のボタンスタイル設定例

@media (hover: hover) {
    .button:hover {
        background-color: blue;
    }
}

ユーザーのデバイスがホバー機能をサポートしている場合に限り、クラス名'button'が付けられた要素にマウスカーソルが乗ったときに背景色を青に変更するスタイルを適用します。タッチスクリーンのようにホバー機能がないデバイスでは、このスタイルは適用されません。

タッチスクリーン用のメニューアイテムスタイル設定例

@media (hover: none) {
  .menu-item {
    padding: 1rem;
  }
}

ホバー機能をサポートしていないデバイス（主にタッチスクリーン）に対して、メニュー項目のパディングを大きくしてタップしやすくします。

@media (hover: ...)に関するよくある質問

Q. hover:noneのデバイスとは？

A. hover:noneは主にタッチスクリーンデバイスを指します。スマートフォンやタブレットなど、マウスのようなホバー機能がない入力デバイスを使用するものが該当します。これらのデバイスではホバーエフェクトの代わりに、タップやスワイプに適したデザインを考慮する必要があります。

Q. hover:hoverとpointer:fineの違い？

A. hover:hoverはデバイスがホバー機能をサポートしているかを判定し、pointer:fineは精密なポインティングデバイスかを判定します。多くの場合、これらは重複しますが、完全に同じではありません。例えば、一部のタッチパッドはpointer:fineですが、hover:noneかもしれません。

@media (hover: ...)が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの@media (hover: ...)や@media (height: ...)、@media (max-height: ...)、@media (resolution: ...)、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。