スタイルシートでリンクの色やスタイルを設定するコードを紹介します。
書式
リンクのスタイル設定
a:link{
(リンクのスタイル)
}
訪問済みのリンクのスタイル設定
a:visited{
(リンクのスタイル)
}
リンクにマウスポインタが乗った状態のスタイル設定
a:hover{
(リンクのスタイル)
}
リンクがクリックされた状態のスタイル設定
a:active{
(リンクのスタイル)
}
例1
コード
下記のコードを記述します。
a:link {
color:#FF0000;
}
a:visited {
color:#A0A0A0;
}
a:hover {
color:#80FF00;
}
a:active {
color:#0000Ff;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="LinkSelector.css" />
</head>
<body>
<a href="page1.html">Link1</a><br />
<a href="page2.html">Link2</a><br />
<a href="page3.html">Link3</a><br />
<a href="page4.html">Link4</a><br />
</body>
</html>
解説
未訪問のリンクのスタイルです。赤色の文字で表示します。
a:link {
color:#FF0000;
}
リンクをクリックしてリンク先のページが訪問されたリンクのスタイルです。
グレーの文字で表示します。
a:visited {
color:#A0A0A0;
}
マウスポインタをリンクに重ねた時のスタイルです。明るい緑色の文字で表示します。
a:hover {
color:#80FF00;
}
リンクをクリックしたときのスタイルです。青色で表示します。
a:active {
color:#0000FF;
}
表示結果
上記HTMLファイルをWebブラウザで表示します。下図のページが表示されます。
マウスポインタをリンクに重ねると、リンクの文字色が緑に変わります。
Link4をクリックした状態です。クリック時のスタイルが反映されリンクの文字色が青色になります。
Link4のリンクをクリックしてページ遷移後、元のページに戻ってきた状態です。
訪問済みのページへのリンクは灰色に変化します。
例2: アンダーラインの非表示
リンクのアンダーラインを表示しない動作に変更し、マウスポインタが重なった場合にアンダーラインを表示する動作に変更します。
コード
下記のコードを記述します。
a:link {
text-decoration:none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="LinkSelectorUL.css" />
</head>
<body>
<a href="IdSelector.html">HyperLink-01</a><br />
<a href="ClassSelector.html">HyperLink-02</a><br />
<a href="ElementSelector.html">HyperLink-03</a><br />
<a href="LangSelector.html">HyperLink-04</a><br />
</body>
</html>
解説
text-decoration:none; を設定して、未訪問時と訪問済みリンクの下線表示を無くします。
a:link {
text-decoration:none;
}
a:visited {
text-decoration: none;
}
マウスポインタが重なった場合と、リンクをクリックした場合のリンクには、
text-decoration: underline;を指定して、下線を表示します。
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
表示結果
上記HTMLファイルをWebブラウザで表示します。下図のページが表示されます。リンクに下線が表示されていないことが確認できます。
マウスポインタをリンクに重ねると、リンクに下線が表示されます。
訪問済みリンクにも下線は表示されない状態になりました。
リンクの状態ごとに色やスタイルを変更できました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
- タグ/ID/クラスのセレクター
- 階層のセレクター
- 順番のセレクター
- 属性のセレクター
- コントロールのセレクタ
- その他
最終更新日: 2024-05-27
作成日: 2013-01-11
