ほんっとにはじめてのHTML5とCSS3

Welcome to ほんっとに！　INDEX をご利用ください

はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からサンプルを作りながら解説しています。
サイトの編集ができるようになる手助けになれば…と思っています。

はじめてのHTML　INDEX: HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO！
CSS3レイアウトも時々登場します。
HTML要素　索引: HTML要素のアルファベット別INDEXです。
特定のHTML要素について調べたいときには、わりと便利です。
はじめてのCSS　INDEX: CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO！
（はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください）

サイト内検索はこちらからどうぞ

【66-2】ユーザーアクション擬似クラス　:active　:hover

最終更新日：2023年12月20日　（初回投稿日：2023年12月20日）

今回からユーザーアクション擬似クラスを見ていきましょう。
ユーザーアクション擬似クラスは、ユーザーの操作の状態によって要素をセレクトするための擬似クラスです。

ですのでユーザー側の操作が必要な <a>要素や、フォーム関連の要素などに使うことが多いです。

今回はまず、:active　:hover　を見てみましょう。

ちなみに ユーザーアクション擬似クラスは <a>要素やフォーム関連の要素によく使われると言いましたが、 :active や :hover は、割といろんな要素に使えます。例えば <p>とかね。それを今日はサンプルで見てみましょう。

擬似クラスって何？というかたは、こちらをご覧ください。
【66】擬似クラスと疑似要素（2つの違いとそれぞれの特徴）
擬似クラスも含めた セレクター一覧いちらんはこちらです。
【65】CSSのセレクターを整理しよう（セレクター一覧）

本日のINDEX

参考：
・Selectors Level 4 | W3C Working Draft
・CSS セレクター | MDN
・擬似クラス | MDN

:active（クリックなどでアクティブになってる状態）

:active は、その名のとおりアクティブになっている要素をセレクトする擬似クラス。
リンク元をクリックしたり、フォームのボタンを押したり、
その「押し続けている状態」がアクティブな状態です。
その時のスタイルを平常時と変えてあげることで「押してる感（手応え）」をユーザーに持ってもらうために使います。

:active でサンプルを作ってみました。
リンクがある文字（青）や、それ以外の文字（グレー）を押し続けてみてください。

See the Pen 擬似クラス:active TEST by yuki★hata (@yuki__hata) on CodePen.

HTMLはこちら。

<p>
これはp要素です。その中に、<a href="#pt1">リンク元なa要素</a> が入っています。
</p>

CSSはこちら。

p {
	margin: .5em 0;
	border: 1px solid #ccc;
	padding: .7em;
    }
a:any-link, a:hover {text-decoration: none; color: blue}
a:active {text-decoration: underline; color: red}
p:active {background: #ffffd6}

<a>要素の :any-link, :hover でアンダーラインを無しにして、文字色を青に（6行目）
（:any-linkは、:link か :visited の状態をセレクトする擬似クラスでしたね）

<a>要素の :active では、アンダーラインを引いて、文字色を赤に指定（7行目）

また、リンクのための要素ではない <p>要素も、p:active で指定して（8行目）長押ししている時に背景色が淡い黄色になるようにしています。

:hover（マウスポインターを要素にかざした状態）

:hover は、主にパソコン画面用の擬似クラスです。
パソコンでマウスポインターを操作して、アイテムの上まで持ってきたけど、まだアクティブにしていない（押してない）状態をセレクトします。
「hover」は、同じ地点に浮かんで停止すること。ヘリコプターとかのホバリングの状態です。
ユーザーは hover している時にスタイルが変わることで、ここが操作可能な箇所だと知ることができます。

スマホやタブレットなどの「タッチ画面」だと、機種やブラウザによっては :hover は無視されたり妙なタイミングで反応したりするので要注意です。
今はもうパソコンでウェブサイト見る人のほうが少ないと思うので、:hover の使用は避けるか、変なタイミングで反応しても大丈夫なあっさりしたスタイルにしたほうが無難です。

PCで見ている人限定ですが、サンプルの上にマウスポインターをかざしたり、長押ししてみてください。

See the Pen 擬似クラス:hover TEST by yuki★hata (@yuki__hata) on CodePen.

HTMLはさっきと同じです。
CSSはこのように書き直しました。

p {
	margin: .5em 0;
	border: 1px solid #ccc;
	padding: .7em;
    }
a:any-link {text-decoration:none; color: blue}
a:hover {text-decoration: underline; color: green}
a:active {color: red}
p:hover {background: #ffe5f2}
p:active {background: #ffffd6}

<a>要素の :hover 時に、アンダーラインを引いて文字色はグリーンに（7行目）
また、<p>要素の :hover 時に、背景色を淡いピンクにしています。

a:active {color: red}（8行目）となって、「text-decoration: underline」の指定がありません。ですがプレビューでは、アクティブ時もアンダーラインがありますね。
これは「:link　:visited　:hover　:active」は互いに「上書き」することができるからなんです。
7行目の :hover で「text-decoration: underline」なら、その次の8行目で書かなくてもそのまま残ります。
この件は大事なので、次回もう少し詳しくまとめます。

次回予告

次回は「ちょっとメモ」です。
:link　:visited　:hover　:active は互いに「上書き」するので、この4つの書く順番がけっこう大事なんですよね。
「LVHA順」などと呼ばれる「書く順番」があります。それを次回まとめます。

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

関連記事

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。