【CSS Modules】any-hoverメディア機能の使い方

Copy
1/*
2 * any-hover メディア特性のサンプルコード
3 *
4 * `@media (any-hover)` は、ユーザーの主要な入力メカニズムが要素にホバーできるかどうかを判定するCSSメディア特性です。
5 * 主に、マウスを持つデバイスとタッチスクリーンデバイスで異なるユーザー体験を提供するために利用されます。
6 *
7 * 値:
8 * - `hover`: 主要な入力メカニズムがホバーをサポートしている場合（例: マウス、トラックパッド）
9 * - `none`: 主要な入力メカニズムがホバーをサポートしていない場合（例: タッチスクリーン）
10 */
11
12/* 全てのデバイスに共通で適用される基本スタイル */
13.interactive-box {
14  background-color: #f0f8ff; /* 薄い青色の背景 */
15  padding: 20px;
16  border-radius: 8px; /* 角を丸くする */
17  text-align: center;
18  margin: 20px auto; /* 左右中央寄せ */
19  max-width: 300px; /* 最大幅を設定 */
20  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
21  color: #333; /* 文字色 */
22}
23
24/* ホバー可能なデバイス向けのメッセージは、デフォルトで非表示にする */
25.hover-message {
26  display: none;
27}
28
29/* ホバー不可能なデバイス向けのメッセージは、デフォルトで非表示にする */
30.touch-message {
31  display: none;
32}
33
34/*
35 * `@media (any-hover: hover)` ブロック:
36 * ホバー可能な入力メカニズムを持つデバイス（マウスなど）に適用されるスタイル。
37 * ここでは、要素にホバーした際のアニメーションやメッセージを追加します。
38 */
39@media (any-hover: hover) {
40  .interactive-box {
41    /* ホバー時のスムーズな変化のため、遷移効果を設定 */
42    transition: background-color 0.3s ease, transform 0.3s ease;
43  }
44
45  .interactive-box:hover {
46    background-color: #007bff; /* ホバー時に青色の背景に変更 */
47    color: white; /* ホバー時に文字色を白に変更 */
48    transform: translateY(-5px); /* ホバー時に要素を少し上に浮き上がらせる */
49    cursor: pointer; /* カーソルをポインターに変更し、クリック可能であることを示す */
50  }
51
52  /* ホバー可能なデバイスでのみ表示するメッセージ */
53  .hover-message {
54    display: block; /* メッセージを表示する */
55    font-size: 0.9em;
56    color: #666;
57    margin-top: 10px;
58  }
59}
60
61/*
62 * `@media (any-hover: none)` ブロック:
63 * ホバー不可能な入力メカニズムを持つデバイス（タッチスクリーンなど）に適用されるスタイル。
64 * ホバーイベントがないため、別の視覚的フィードバックやタッチ操作向けの調整を行います。
65 */
66@media (any-hover: none) {
67  .interactive-box {
68    /* タッチデバイス向けの視覚的フィードバックやスタイリング */
69    border: 2px solid #28a745; /* 緑色の枠線で区別する */
70    background-color: #e6ffe6; /* 少し異なる薄い緑色の背景 */
71  }
72
73  /* ホバー不可能なデバイスでのみ表示するメッセージ */
74  .touch-message {
75    display: block; /* メッセージを表示する */
76    font-size: 0.9em;
77    color: #28a745; /* 緑色の文字色 */
78    margin-top: 10px;
79  }
80}

any-hoverは、CSSのメディア特性の一つで、ユーザーの主要な入力メカニズムがウェブページの要素に「ホバー（マウスカーソルを重ねる）」できるかどうかを判定するために使用されます。この特性は引数を持ちません。特定の値を直接返すものではありませんが、@mediaルール内で条件として利用され、any-hover: hoverまたはany-hover: noneとして機能します。

any-hover: hoverは、マウスやトラックパッドのようにホバー操作が可能なデバイスにスタイルを適用する際に使用します。一方、any-hover: noneは、スマートフォンやタブレットなどのタッチスクリーンデバイスのようにホバー操作ができない、または一般的ではないデバイスにスタイルを適用する場合に用います。これにより、デバイスの種類に応じて異なるユーザー体験を提供できます。

サンプルコードでは、まず.interactive-boxという共通のスタイルを持つ要素を用意しています。@media (any-hover: hover)のブロック内では、マウスなどのホバー可能なデバイス向けに、要素にカーソルが重なった際に背景色や文字色を変化させ、要素がわずかに浮き上がるようなアニメーションとポインターカーソルを設定しています。また、ホバー可能なデバイスでのみ表示するメッセージもここで有効化しています。

対照的に、@media (any-hover: none)のブロックでは、タッチスクリーンなどのホバー不可能なデバイス向けに、ボックスに緑色の境界線と異なる背景色を設定し、タッチユーザー向けのメッセージを表示しています。このように、any-hoverメディア特性を利用することで、デバイスの入力能力に応じた最適なデザインとインタラクションを柔軟に実現できるのです。