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

Copy
1/*
2 * .button クラスを持つ要素のホバーアニメーション例
3 * マウスカーソルが要素の上に来たときに、背景色とサイズが滑らかに変化します。
4 * システムエンジニアを目指す初心者にも分かりやすいよう、基本的なアニメーションを設定しています。
5 */
6.button {
7  /* 初期状態のスタイル設定 */
8  display: inline-block; /* 要素をインラインブロックとして表示 */
9  padding: 10px 20px;     /* 内側の余白 */
10  background-color: #007bff; /* 背景色（青色） */
11  color: white;           /* 文字色（白色） */
12  border: none;           /* 枠線なし */
13  border-radius: 5px;     /* 角を丸くする */
14  cursor: pointer;        /* マウスカーソルをポインタに変更 */
15  font-size: 16px;        /* フォントサイズ */
16  text-align: center;     /* テキストを中央揃え */
17  text-decoration: none;  /* テキストの下線をなくす */
18  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 軽い影を追加 */
19
20  /* アニメーションを滑らかにするためのトランジション設定 */
21  /* background-color, transform, box-shadow プロパティの変化を0.3秒かけて滑らかにする */
22  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
23}
24
25/* ホバー時のスタイル（マウスカーソルが要素の上にあるとき） */
26.button:hover {
27  /* 背景色を少し濃い青に変更 */
28  background-color: #0056b3;
29  /* 要素をわずかに拡大 */
30  transform: scale(1.05);
31  /* 影を強調し、要素が持ち上がって見えるようにする */
32  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
33}

このCSSコードは、ウェブページ上の要素にマウスカーソルを合わせたときに発生する「ホバーアニメーション」を実装する方法を示しています。:hoverはCSSの「擬似クラス」と呼ばれるもので、マウスカーソルが特定の要素の上に乗っている間だけスタイルを適用するために使用されます。この:hoverには引数がなく、特定の値を返すこともありません。要素のインタラクティブな状態を検出する役割を担います。

まず、.buttonクラスには、背景色、文字色、パディング、角の丸み、影など、ボタンの初期状態での見栄えを定義するスタイルが設定されています。特にdisplay: inline-blockは要素をインラインブロックとして表示させ、cursor: pointerはマウスカーソルをポインタアイコンに変更し、クリック可能な要素であることをユーザーに示します。

その次に記述されているtransitionプロパティは、background-color、transform（要素の変形）、box-shadow（影）という三つのプロパティが変化する際に、その変化を0.3秒かけて滑らかに行うよう指示しています。これにより、スタイルが瞬時に切り替わるのではなく、アニメーションとして見えるようになります。

そして、.button:hoverの部分では、マウスカーソルが.button要素の上にあるときに適用されるスタイルを定義しています。具体的には、背景色が初期状態よりも少し濃い青色に変わり、transform: scale(1.05)によって要素が元のサイズの1.05倍にわずかに拡大され、box-shadowがより強調されて要素が少し浮き上がって見えるような視覚効果が加えられます。

これらの設定により、ユーザーがボタンにマウスカーソルを合わせると、滑らかなアニメーションを通じてボタンが反応し、ウェブサイトのユーザーエクスペリエンスを向上させることができます。