リンク上でマウスのボタンが押された状態のデザインをしよう！（active 疑似クラス）

疑似クラス要素名:active { ～ }

CSS一覧プロパティ辞典 … active 疑似クラス

active 疑似クラスを使うと、要素が現在活動中（ほとんどの場合はマウスボタンが押された場合）の状態のデザインを指定することができます。書式の通りセレクタに「:active」を付けて使用します。

文字の色、背景色、背景画像の変更、リンク指定時の下線の表示などを変更できます。それぞれcolorプロパティ、background-colorプロパティ、background-imageプロパティ、text-decorationプロパティを使用すればこれらのデザインを変更できます。

ではマウスボタンが押されたの状態のリンクの文字の色を赤にしてみましょう！

記述例
<style type="text/css"> a:active { color: red; } </style> </head> <body> <p><a href="sample.html>おいしいチャーハンの作り方</a></p> </body> </html>

[適応前のブラウザでの表示例]
一人暮らしの前向きな料理

[適応後のブラウザでの表示例]
一人暮らしの前向きな料理

このようにマウスボタンが押されたの状態のリンクの文字の色が赤になります！なお、このブラウザでの表示例は画像により表現しており、リンク設定はなされていません。

↑さらに更新予定です。

ゼロから始めよう！わかりやすい！ホームページ作成ガイド