CSSスキル - 第7章 Lesson6

オンマウスでリンクの文字色を変える方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

擬似クラス:hoverを利用して、オンマウスで色の変わるリンクを作成する方法について、初心者向けに解説しています。



この動画で学べること

・擬似クラスの使い方



擬似クラスの使い方

今回は、擬似クラスについてご説明したいと思います。
擬似クラスというのは、セレクタの役割を拡張するものです。
例えば、マウスがボタンに乗っているときだけ、とかボタンを押した時だけという指定をすることができます。
代表的なものに、<a>タグに追加する「hover」というものがあります。


今回は、hoverの使い方をご紹介していきますが、まずは<a>タグに青の背景色と白の文字を指定しましょう。



a {
background-color: blue;
color: white;
}




ではここに、擬似クラスを追加していきます。
書き方は、タグ名の後ろに「:(コロン)」+擬似クラス名です。




a:hover {
background-color: red;
}




一度、保存してブラウザで見てみましょう。
マウスをボタンの上に持って行くと、青かったボタンが赤くなりました。
では、次にボタンをクリックした時だけボタンの色を変更する方法も見ていきましょう。

ボタンをクリックした時だけという指定をするのはhoverではなくactiveです。




a:active {
background-color: yellow;
}




保存してブラウザで見てみましょう。
ボタンをクリックしたときに背景が黄色になりました。