リンクのある文字の色を変えよう

クリックしていない状態、クリック済み、マウスが上に乗った状態、クリックした瞬間とそれぞれ指定することができます。

クリックしていない状態の文字色を変えよう

クリックしていない文字色（画像のオレンジ枠内）を変えましょう。

1. ソースの書きかえ

CSSの21行目「a:link, #navEZPagesTOC ul li a」で文字色が「color: #3300FF;」と指定されています。これを「color: #626063;」と書きかえ上書き保存します。

変更前

    a:link, #navEZPagesTOC ul li a {
    	color: #3300FF;
    	text-decoration: none;
    	}

変更後

    a:link, #navEZPagesTOC ul li a {
    	color: #626063;
    	text-decoration: none;
    	}

2. 確認

ブラウザの更新をクリックし確認します。 文字の色が変わりました。

クリック済みの文字色を変えよう

クリック済みの文字色（画像の青色の文字）を変えましょう。

1. ソースの書きかえ

CSSの26行目「a:visited」で文字色が「color: #3300FF;」と指定されています。これを「color: #f39800;」と書きかえ上書き保存します。

変更前

    a:visited {
    	color: #3300FF;
    	text-decoration: none;
    	}

変更後

    a:visited {
    	color: #f39800;
    	text-decoration: none;
    	}

2. 確認

ブラウザの更新をクリックし確認します。

文字の色が変わりました。

マウスが上に乗った状態の文字色を変えよう

マウスが乗った時の文字色（画像の赤色の文字）を変えましょう。

1. ソースの書きかえ

CSSの31行目「a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover」で文字色が「color: #FF0000;」と指定されています。これを「color: #66cc33;」と書きかえ上書き保存します。

変更前

    a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    	color: #FF0000;
    	}

変更後

    a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    	color: #66cc33;
    	}

2. 確認

ブラウザの更新をクリックし確認します。

文字の色が変わりました。

クリックした瞬間の文字色を変えよう

クリックした瞬間の文字色（画像の青色の文字）を変えましょう。

1. ソースの書きかえ

CSSの35行目「a:active 」で文字色が「color: #0000FF;」と指定されています。これを「color: #ffd700;」と書きかえ上書き保存します。

変更前

    a:active {
    	color: #0000FF;
    	}

変更後

    a:active {
    	color: #ffd700;
    	}

2. 確認

ブラウザの更新をクリックし確認します。

文字の色が変わりました。

画像