「マウスを上にのせた時に下線が消える、色が変わるリンクの作り方」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
a要素で何かリンクを作ったとします。~
下線がついた状態の青文字が初期状態です。~
しかし、世の中の多くのページではリンクにカーソルを持っていくと色が少し変わったり下線が消えたりします。これには以下の４つの疑似要素を使います。
:link まだ訪問していないリンクのスタイル
:visited 訪問済みのリンクのスタイル
:hover これはカーソルをリンクの上に持ってきた時のスタイル
:active リンクをクリックしてから放すまでの表示スタイル
これらの疑似要素を利用してリンクの表示方法に変化をつけていきます。
ちなみにtext-decorationを利用することで下線を表示させたり非表示にしたりできます。
ここでtext-decorationという言葉がでてきたので、text-decorationプロパティについて説明させていただきます。~
text-decorationという名前の通り、記述したテキストに打消し線を入れたり、下線を引いたり、上線を引いたりすることができます。点滅させたりもできるのですが多くのブラウザでサポートされていないため、これは使わない方がいいです。
text-decoration: none; 通常状態のテキストが表示されます。リンクの時はこれを指定する事によって表示れている下線を消すことができます。
text-decoration: underline; テキストに下線をひく事ができます。
text-decoration: overline; テキストに上線をひく事ができます。あまり見かけません。
text-decoration: line-through; テキストに打消し線が入ります。なにか修正した箇所を強調したい場合に使います。
a要素で何かリンクを作ったとします。~
下線がついた状態の青文字が初期状態です。~
しかし、世の中の多くのページではリンクにカーソルを持っていくと色が少し変わったり下線が消えたりします。これには以下の４つの疑似要素を使います。
:link まだ訪問していないリンクのスタイル
:visited 訪問済みのリンクのスタイル
:hover これはカーソルをリンクの上に持ってきた時のスタイル
:active リンクをクリックしてから放すまでの表示スタイル
これらの疑似要素を利用してリンクの表示方法に変化をつけていきます。
ちなみにtext-decorationを利用することで下線を表示させたり非表示にしたりできます。
ここでtext-decorationという言葉がでてきたので、text-decorationプロパティについて説明させていただきます。~
text-decorationという名前の通り、記述したテキストに打消し線を入れたり、下線を引いたり、上線を引いたりすることができます。点滅させたりもできるのですが多くのブラウザでサポートされていないため、これは使わない方がいいです。
text-decoration: none; 通常状態のテキストが表示されます。リンクの時はこれを指定する事によって表示れている下線を消すことができます。
text-decoration: underline; テキストに下線をひく事ができます。
text-decoration: overline; テキストに上線をひく事ができます。あまり見かけません。
text-decoration: line-through; テキストに打消し線が入ります。なにか修正した箇所を強調したい場合に使います。
