ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

リンク色の変更と装飾

リンクの色と、リンクテキストの装飾

リンクの色を変える方法

リンクの色を変えるには、セレクタにaを指定します。
例えば、リンク色を赤色に指定する場合、以下のようなスタイルを記述します。

[CSSの記述例]
a {
color:#F00;
}
[表示サンプル]

リンクを装飾する

色を変える以外にも様々な装飾を行うことができます。
例えば、リンクテキストに下線を表示するには、前のページで学習したtext-decoration:underline;を追加します。

[CSSの記述例]
a {
color:#F00;
text-decoration:underline;
}
[表示サンプル]

覚えておきたいポイント

バランスが大事

CSSを使えば、ホームページのデザインに合わせたリンクカラーの変更を行うことができます。ただし、あまりにもリンクカラーと分かりづらい色を使うと利用者は混乱してしまいます。奇抜になりすぎないよう、全体のバランスを見ながら調整するようにしましょう。

リンクの状態に応じてスタイルを変化させる

CSSを上手く使えば、動きのある表現が可能です。
例えば、下のようなリンクを見かけたことはありませんか?

[テキストの上にマウスを乗せてみてください] ※スマートフォンやタブレットでは再現不可

マウスを乗せると、下線が付いて色が変化しましたね!色んなサイトで見かける、よく使われるテクニックの1つです。

これは、「マウスがテキストの上に乗ったら、アンダーラインを引いて、色を緑にしてください」とCSSで指定しています。

マウスオーバーでの表現

こういった演出を行えば「どのテキストがリンクなのか」が判別しやすく、使いやすくわかりやすいホームページとなります。

リンクをコントロールするスタイル

リンクに変化をつけるには、主に下の4つの要素でコントロールします。

  • a:link :アクセスしたことのないリンク
  • a:visited :アクセスしたことのあるリンク
  • a:hover :マウスが上に乗っている状態のリンク
  • a:active :クリック中のリンク

これらの要素を使えば、リンク状態に変化をつけることができます。
なお、「記述する順番」があるので注意しましょう。かならず、「a:link」→「a:visited」→「a:hover」→「a:active」の順に記述しなければなりません。

記述する順番

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

状態が変化するリンクの作成手順

それでは試しに1つ、マウスを乗せると状態が変化するリンクを作ってみましょう。

step.1

まずは始めに、元となる「a」のスタイルを作成します。

a {
font-weight:bold;
text-decoration:none;
}

わかりやすいように、ちょっと太めの文字に指定しておきましょう。
飾り付けも無しにします。

step.2

次に、上の「a」に対して、下の4つのスタイルで飾り付けを行っていきます。順番に気をつけながら記述しましょう。

a:link { /*アクセスしたことのないリンク*/
color:#0000FF; ←青色
}
a:visited { /*アクセスしたことのあるリンク*/
color:#6600FF; ←紫色
}
a:hover {/*マウスが上に乗っている状態*/
color:#FF0099; ←ピンク色
text-decoration:underline; ←下線を表示
}
a:active {/*クリック中*/
color:#33CC00; ←緑色
}

これらをまとめると、以下のような記述になります。

[CSSの記述例]

a {
font-weight:bold;
text-decoration:none;
}

a:link {
color:#0000FF;
}

a:visited {
color:#6600FF;
}

a:hover {
color:#FF0099;
text-decoration:underline;
}

a:active {
color:#33CC00;
}

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>リンク色の変更と装飾</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<a href="https://www.google.co.jp/" target="_blank">Googleへのリンク</a>

</body>
</html>

step.3

入力が完了したらブラウザで確認してみましょう。
完成サンプルと同じように動けばOKです。

[完成サンプル] ※スマートフォンやタブレットでは再現不可

つまり、ここで作ったリンクは、

  1. 未アクセスリンクなので青の太文字
  2. マウスを上に乗せると、下線が表示されピンク色
  3. クリックしている間は緑色
  4. クリック後は紫色

になります。

※シークレットモードなどを使っている場合、履歴を残さないのでa:visitedが動作しない場合があります。

ちなみに、今のは基本的な「a:~」の使い方で、応用次第ではもっと面白い素敵なリンクを作ることもできます。
慣れたきたら、色々試してみるのも勉強になりますよ!

覚えておきたいポイント

記述順序を守ろう

a:には決められた順序があります。順序を無視して書くことも出来ますが、予期せぬ動作の原因になりますので、キチンと決められた順序で書くようにしましょう。

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

これらの要素は、一般的に「疑似セレクタ」と呼ばれています。

条件によっては動作しない場合も

ブラウザのシークレットモードなどを使っている場合、履歴を残さないのでa:visitedが動作しない場合があります。

文字の中央揃えや左・右揃え
« 前のページへ 文字の装飾

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。