ハイパーリンクへのスタイルシートの適用

　

（０）はじめに

スタイルシートの記述はコードに直接書いていく。コード上部の<head>〜</head>の間に記述すればいいが、</head>のすぐ上の行に書くとわかりやすい。

スタイルシートをすでに書いてあるページには

<style type="text/css">

　と

</style>

の行があるので、その間にスタイルシートの中身だけを入力する。

　

（１）ハイパーリンクの下線を消す

<title>ページのタイトル</title>　　←この行は最初からある

<style type="text/css">

a { text-decoration: none }

</style>

</head>　　　　　　　　　　　　　　　←この行は最初からある

これで、ハイパーリンクの下線が消えます。ハイパーリンク<a>に関して、文字装飾（text-decoration）をなくす（none）ということです。

入力するときは日本語入力OFF（直接入力）にして入力しましょう。

　

（２）ハイパーリンクにマウスを重ねると・・・

a { text-decoration: none }

a:hover { background-color: #aa00cc }

１行目は（１）で入力したものです。２行目だけを入力します。ここでは背景の色が変わります。この２行で、何もしていないときのハイパーリンクの見え方と、マウスを重ねたときの見え方を設定することができます。

背景色だけでなく、文字の色や、線などを変えると、第５回目のはじめのページみたいにもなります。

a {text-decoration: none; color: #888844; font-weight:bold; border-bottom:1px dashed }

a:hover {color: #3355aa; background-color: #aaaacc; border-bottom: 1px solid; }

ここではハイパーリンクの装飾を控えめにしてありますが、他にもいろいろと効果があります。調べてチャレンジしてみましょう。