リンクの状態によって、スタイルを変える
例えば、「カーソルが当たっているときにテキストの色を変える」とか
a:hover { color: green; }
aタグ全てにスタイルを設定する場合(擬似クラスを設定していなくても適用したいスタイル)
a { color: blue; }
擬似クラス
擬似クラス:a:hover
のhover
の部分のこと
aタグでのリンクの状態によって表示を変えることができる擬似クラスの例
擬似クラス | 説明 |
---|---|
link |
aタグでhref 属性が設定されている場合に適用される |
visited |
リンク先に訪問済の場合に適用される |
hover |
マウスカーソルがリンクに重なっているときに適用される |
active |
リンクをクリックされた瞬間に適用される |
CSSに記述するときには上の順番で記述しないとうまく適用されないらしい!
試してみた結果、たしかに、この順番じゃないといけないっぽい!!
linkとvisitedについて
linkとvisitedは使わない!
linkについて、基本的にaタグにはhref
属性は設定されているため、つけなくていい!(aタグに対してスタイルを設定する感じ)
visitedを使うと、カラフルになってしまうとデザイン的に良くないため、使われないことが多いらしい
参考文献
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/10/27
- メディア: 単行本
- この商品を含むブログ (1件) を見る