MB-Support

パソコン初心者のサポートページ

a href に関する疑似クラス


ハイパーリンクに記述した文字や画像を制御できます。例えば、以下はスタイルを適用しない通常のハイパーリンクです。


基本となるHTMLソース

<a href=”URL”>これはハイパーリンクです</a>

ブラウザ


通常、ハイパーリンクに記述した文字は、未アクセス、アクセス中、アクセス済みの状態により文字色や画像の枠線が変化します。 これは、閲覧者がリンクテキストや画像を一目しただけで、自分がアクセスした事があるのか、無いのかを判断可能になっています。


未アクセス アクセス中 アクセス済み

アクセス済みの状態から未アクセスの状態に戻すには、閲覧者がブラウザの履歴をクリアする事で可能です。 しかし、ホームページをデザインする時に、ハイパーリンクの文字が勝手に変更されてしまう事に不都合を感じる事もあるでしょう。

例えば、文章中のハイパーリンクは通常動作で問題が無いと判断しても、メニューのハイパーリンクで状態により文字色が変更されるのは、デザインを統一する事が難しくなります。 または、多くのハイパーリンクを埋め込んだ文章は、文字色が至る所で変更されるので、ハイパーリンクを容易に判断できたとして、文章としては非常に読みにくい状態になります。



そこで、CSS の疑似クラスを利用して、ハイパーリンクの状態による文字色の変化を統一する事ができます。問題は、これらの状態が通常状態で変化する意味を失う事です。 つまり、ハイパーリンクがどこに存在するのかを、閲覧者に積極的に知らせる事ができません。 この相反する二つの事がらは、良い解決策は無いと思われます。つまり、制作者がどちらかを優先する事になります。 また、ハイパーリンクは文字色が変更されなくても、マウスのポインターを乗せる事で矢印が手のマークに変更されます。 これだけでハイパーリンクの存在を閲覧者に判断してもらうと割り切る必要があります。



ページの上部や左右には、メニューである場合が多いです。 メニューは、サイト内のハイパーリンクの集まりと考えられますが、それを誰でも判断できるとは限りません。 もちろん、何度かサイトにアクセスして頂くことで、閲覧者は自然とハイパーリンクを知る事ができると思いますが、それを期待しすぎるのもどうかと思われます。



疑似クラス

以下は未アクセス、アクセス済み、アクセス中のいずれの場合も、文字色 [黒 ( #000 ) ] 、デコレーション無し(つまり、通常のハイパーリンクで表示される下線を除去)に設定した例です。

a:link 未アクセス

a:link {
color:#000;text-decoration:none;
}

a:active アクセス中

a:active {
color:#000;text-decoration:none;
}

a:visited アクセス済み

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

全ての状態で同じ文字色とデコレーションを維持するならば、以下の様に省略して記述できます。

a:link, a:visited, a:active {color:#000;text-decoration:none;}



HTMLソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スタイルシート サンプル</title>
<style type="text/css">
<!--
a:link, a:visited, a:active {color:#000;text-decoration:none;}
-->
</style>
</head>
<body>
<a href="URL">ハイパーリンク</a>
</body>
</html>

ブラウザ


active はアクセス中となりますが、ハイパーリンクを左クリックした状態を意味します(ボタンを放していない状態)。 例えば、左クリックした状態だけフォントウェイトをボールドに設定したのが以下。


HTMLソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スタイルシート サンプル</title>
<style type="text/css">
<!--
a:link, a:visited {color:#000;text-decoration:none;}
a:active {color:#000;font-weight:bold;text-decoration:none;}
-->
</style>
</head>
<body>
<a href="URL">ハイパーリンク</a>
</body>
</html>

ブラウザ


いずれの状態も、文字色 [黒 ( #000 ) ] 、テキストデコレーション [無し] は共通で、クリックした状態だけフォントウェイトが太字になります。



動的疑似クラス

ハイパーリンクにマウスのポインターが乗った時の動作を指定します。 Active で選択した状態を表現できますが、クリック無しでポインターが乗っただけでは動作が変更されません。

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

上のサンプルでは、ハイパーリンクにマウスのポインターがのった時に、文字色 [赤] [太字] 、デコレーション [無し] の状態になります。 これを、a:link , a:visited , a:active と組み合わせると、以下になります。


HTMLソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スタイルシート サンプル</title>
<style type="text/css">
<!--
a:link, a:visited,a:active {color:#000;text-decoration:none;}
a:hover {color:red;font-weight:bold;text-decoration:none;}
-->
</style>
</head>
<body>
<a href="URL">ハイパーリンク</a>
</body>
</html>

ブラウザ


hoverにposition:relative; と top: 数字 px;left: 数字 px; を加えると、ハイパーリンクの文字や画像がボタン形式に似た動作をします。


CSS

<style type="text/css">
<!--
a:link, a:visited,a:active {color:#000;text-decoration:none;}
a:hover {
color:red;font-weight:bold;text-decoration:none;position:relative;top:5px;left:5px;
}
-->
</style>

ブラウザ

relativeは通常表示される位置から相対的な配置を意味して、top(上)とleft(左)からピクセル単位で移動する事ができます。



focus

選択された状態の動作は、focusで指定します。この選択された状態とは、キーボードの[TAB]キーでリンクをフォーカスした時です。マウスのポインターを乗せた状態(hover)、クリックした状態(active)とは区別されます。


CSS

<style type="text/css">
<!--
a:focus {color:red;font-weight:bold;text-decoration:none}
}
-->
</style>

ブラウザ
以下のハイパーリンク以外の部分を左クリックして、キーボードの[TAB]キーを押します。fouceを強調するため、他の指定は除去してあります。

上のサンプルでは、[TAB] キーを使ってハイパーリンクを移動すると、focus で指定した文字色 [赤] [太字] 、テキストデコレーション [無し] の状態になります。 フォーカスした状態は、標準で周りに点線が表示されます。



その他

a:link 、a:visited 、a:active 、a:hover 、a:focus に指定する内容の例として、フォントスタイルも変更できます。 例えば、右の例ではマウスのカーソルが乗ると、文字がイタリックに変化します。


CSS

<style type="text/css">
<!--
a:link,a:visited,a:active,a:focus {color:#000;text-decoration:none;}
a:hover {color:#000;text-decoration:none;font-style:italic}
}
-->
</style>

ブラウザ


親要素

a:link 、a:visited 、a:active 、a:hover 、a:focus を親要素に分けて変更できます。例えば、ページ全体に適用する場合は以下。


CSS

<style type="text/css">
<!--
body a:link,body a:visited,body a:active,body a:focus{
color:#000;text-decoration:none;}
body a:hover {color:#000;text-decoration:none;font-style:italic}
}
-->
</style>

二つの div を作成して、"menu"、"doc"とクラスを設定して、二つの DIV で異なる動作をさせる例


HTML ソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スタイルシート サンプル</title>
<style type="text/css">
<!--
body a:link,body a:visited,body a:active,body a:focus{
color:#000;text-decoration:none;}
.menu a:hover {color:blue;text-decoration:none;}
.doc a:hover {color:red;text-decoration:none;}
-->
</style>
</head>
<body>
<div class="menu">
<a href="URL">ハイパーリンク</a>
</div>
<div class="doc">
<a href="URL">ハイパーリンク</a>
</div>
</body>
</html>

ブラウザ

<div class="menu">〜</div>のハイパーリンクは、マウスのポインターを乗せると文字色が [青 ( blue ) ] になり、 <div class="doc">〜</div>のハイパーリンクは、マウスのポインターを乗せると文字色が [赤 ( red ) ] になります。




戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項