シュウ

今回は【CSS】ユーザーアクションのhover、active、focusの使い方!
についての解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• hover、active、focusの使い方について学びたい方へ
• 今回はユーザーアクションについても学習しよう

今回は、ユーザーアクションについてに記事になります。
ユーザーが特定のアクションhover、active、focusをしている時に指定した要素に適用されます。

ユーザーアクションについて

ユーザーが特定のアクションhover、active、focusをしている時に指定した要素に適用されます。
書き方は以下のようになります。

/*--hover--*/
要素:hover {プロパティ: 値;}

/*--active--*/
要素名:active {プロパティ: 値;}

/*--focus--*/
input:focus {プロパティ: 値;}

ユーザーアクション:hoverについて

:hoverとは、カーソルが乗っている要素にスタイルが適用します。

主にa要素に対して指定します。a要素にhoverユーザーアクション擬似クラスを指定しているので、
マウスが上に乗った時にスタイルが適用されます。a要素以外に指定しても問題はありません。

<p>hover<a href="#">カーソルが乗っている要素</a>にスタイルが適用します</p>

p a {color: #ffffff;}

/*--hoverを指定 ホバーすると黄色になります--*/
p a:hover {color: #febe3e;}

hoverでのボタン

【CSS】box-shadowでボタンに影をつけてみよう！

hoverを使いボタンを作成しました

ユーザーアクション:activeについて

:activeとは、要素がアクティブになった時にスタイルを適用します。

アクティブとはクリックされてから離されるまでの間になります。
a要素にactiveユーザーアクション擬似クラスを指定しているので、クリックされた時にスタイルが適用されています。

<p>active<a href="#">クリックされた時</a>にスタイルが適用されています</p>

p a {color: #ffffff;}

/*--active クリックすると黄色になります--*/
p a:active {color: #febe3e;}

ユーザーアクション:focusについて

:focusとは、要素がフォーカスされている時にスタイルを適用します。
主に、フォームでの入力中に指定することがおおいです。

<form>
<p>お名前 <input type="text" size="20"></p>
</form>

/*--focus クリックすると黄色になります--*/
input:focus {background-color: #febe3e;}

最後に、現場でよく使われる「擬似要素のまとめ」を解説しております。
「first-childやlast-child」などの使い方を解説しておりますので、ご参考程度に！

擬似要素について

【CSS】初心者向け擬似要素、擬似クラスについて理解しましょう！

first-childやlast-childの使い方を解説しております。

まとめ

今回はこれで以上です。

最新記事

• 

  【CSS】display flex指定方法のまとめを解説

  2024.03.07

• 

  【CSS】背景画像を複数設置について解説!

  2023.12.14

• 

  【CSS】疑似クラス、::afterと::beforeで斜めの背景を解説!!

  2023.06.22

• 

  【CSS】画像の透過について、mix-blend-modeを使ってみよう

  2023.06.01

関連記事

< 前の記事

【CSS】counterを解説！ナンバリング(連番)を挿入

次の記事 >

【CSS】リンク擬似クラスのlink、visitedの使い方!