HTML 入門

スタイルシートでデザインを作ろう

リンクのデザインを設定する

スタイルを設定しなければ，マウスカーソルをリンクの文字列上に移動してもカーソルに変化がありません．また，クリックしても視覚的な変化はありません．しかし，文字の色が青色になり下線も引かれていることから，何とかユーザにはその文字列がリンクであることが伝わります．

index.html（抜粋）コピー
<a href="#">リンクをクリック</a>するとこのページのトップに戻ります

リンクの a 要素に a:hover という疑似要素を設定すると，カーソルがリンクの上に移動したときにマウスポインタの形状を変化させたり，リンク文字列の不透明度を変更したりできます．これによってリンクがクリックできる要素であることをユーザに伝えることができます．（ただし，スマートフォンなどでは指先がリンクの上に起動したことを検知することはできません．）

index.html（抜粋）コピー
<a href="#">リンクをクリック</a>するとこのページのトップに戻ります

style.css（抜粋）コピー
a:hover {
  cursor: pointer;
  opacity: 0.7;
}

さらにリンクをクリックしたことがわかるように a:active 疑似要素を設定できます．ここではクリックしたときに背景色と不透明度を変更してみます．

index.html（抜粋）コピー
<a href="#">リンクをクリック</a>するとこのページのトップに戻ります

style.css（抜粋）コピー
a:active {
  background-color: lightsalmon;
  opacity: 0.5;
}

上のように a:hover と a:active を適切に設定すれば，リンク文字列に設定された下線を消去しても良いかも知れません．

index.html（抜粋）コピー
<a href="#">リンクをクリック</a>するとこのページのトップに戻ります

style.css（抜粋）コピー
a {
  text-decoration: none;
}

目次に戻る