ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！
リンクの色を変えるには、セレクタにaを指定します。
例えば、リンク色を赤色に指定する場合、以下のようなスタイルを記述します。
色を変える以外にも様々な装飾を行うことができます。
例えば、リンクテキストに下線を表示するには、前のページで学習したtext-decoration:underline;を追加します。
CSSを使えば、ホームページのデザインに合わせたリンクカラーの変更を行うことができます。ただし、あまりにもリンクカラーと分かりづらい色を使うと利用者は混乱してしまいます。奇抜になりすぎないよう、全体のバランスを見ながら調整するようにしましょう。
CSSを上手く使えば、動きのある表現が可能です。
例えば、下のようなリンクを見かけたことはありませんか？
マウスを乗せると、下線が付いて色が変化しましたね！色んなサイトで見かける、よく使われるテクニックの１つです。
これは、「マウスがテキストの上に乗ったら、アンダーラインを引いて、色を緑にしてください」とCSSで指定しています。
こういった演出を行えば「どのテキストがリンクなのか」が判別しやすく、使いやすくわかりやすいホームページとなります。
リンクに変化をつけるには、主に下の4つの要素でコントロールします。
これらの要素を使えば、リンク状態に変化をつけることができます。
なお、「記述する順番」があるので注意しましょう。かならず、「a:link」→「a:visited」→「a:hover」→「a:active」の順に記述しなければなりません。
それでは試しに1つ、マウスを乗せると状態が変化するリンクを作ってみましょう。
まずは始めに、元となる「a」のスタイルを作成します。
a {
font-weight:bold;
text-decoration:none;
}
わかりやすいように、ちょっと太めの文字に指定しておきましょう。
飾り付けも無しにします。
次に、上の「a」に対して、下の4つのスタイルで飾り付けを行っていきます。順番に気をつけながら記述しましょう。
これらをまとめると、以下のような記述になります。
[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;
}
<!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>
入力が完了したらブラウザで確認してみましょう。
完成サンプルと同じように動けばOKです。
つまり、ここで作ったリンクは、
になります。
※シークレットモードなどを使っている場合、履歴を残さないのでa:visitedが動作しない場合があります。
ちなみに、今のは基本的な「a:～」の使い方で、応用次第ではもっと面白い素敵なリンクを作ることもできます。
慣れたきたら、色々試してみるのも勉強になりますよ！
a:には決められた順序があります。順序を無視して書くことも出来ますが、予期せぬ動作の原因になりますので、キチンと決められた順序で書くようにしましょう。
これらの要素は、一般的に「疑似セレクタ」と呼ばれています。
ブラウザのシークレットモードなどを使っている場合、履歴を残さないのでa:visitedが動作しない場合があります。
安心してホームページを運営するための心がけ。
よく使う、HTMLの特殊文字・記号の一覧表。
HTML・CSSで使えるカラーコードの一覧表。
当サイトをご利用になる前に、必ずご確認ください。
よくあるご質問など。
さきちんWEBについてのお問い合わせはこちらから。
個人情報管理とWeb広告配信について。
さきちんWEBの管理・運営者、さきちんについて。
さきちんWEBのサイトマップ。