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;
}

目次に戻る