fleur

ハイパーリンクのスタイル設定とマウスオーバーエフェクトの追加

ハイパーリンクのスタイル設定

ハイパーリンクとは、WEBページ上の文章や画像などをクリックすることで、別のホームページやWEBページに飛ぶ仕組みのことです。

ハイパーリンクのスタイル設定方法

未訪問のリンク

リンクの色を変えます。

訪問済みのリンク

訪問したかがわかるように先程の色とは別の色を:visited(訪問済み)で設定します。

マウスオーバーエフェクトの追加

マウスオーバーとはコンピュータの操作画面でマウスカーソル(マウスポインタ)を対象物の上に重ねると何らかの処理を行うことです。

CSSでは、transiton:.3sを使用することで色がぱきっと切り替わることがなくなります。
.3sの部分を変えることで、切り替わる時間が遅くなります。下記のコードは数値を1sに変えたものです。

まとめ

<a href=”#”>で記述したハイパーリンクは、標準の色のままだと自分がWebサイトを作ったときに浮いてしまいますが、色を変えたり、マウスオーバーエフェクトを付けたりする事によってイメージに合ったリンクにすることができます。

Comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.