リンク・アンカー

Since: 26th/May/2002; Last modified: 24th/Dec./2006

リンクアンカー擬似要素

a 要素の内容をリンク・アンカーと呼びます。特に、 href 属性（hyper reference 属性）で目的地が指定された a 要素の内容は、ハイパーリンクの始点なので、始点アンカーと呼びます。始点アンカーは、未訪問状態／訪問済状態／カーソルが上に乗っている状態の三つに区別する事が出来ます。それぞれに異なるスタイルシートを適用することで、利用者の便宜が図れます。

リンクの始点アンカーを区別して指定する例は次のようになります：

a:link { color: maroon } 	/* 未訪問: link */
a:visited { color: navy }	/* 訪問済み: visited */
a:active { color: yellow }	/* アクティブ状態 :active */
a:focus { text-decoration: blink }	/* 選択でフォーカスされている状態 :focus */
a:hover { color: red }   	/* カーソルが上に乗っている状態: hover */

本項では、始点アンカーへスタイルシートを適用するために、擬似要素 a:link, a:visited, a:hover をセレクタとするスタイルシートを紹介します。ＣＳＳプロパティは、本項までで紹介したものだけしか使いませんので、上のサンプルを見て用法が分かった方は飛ばしてください。

サンプル

HTML 文書の用意

実際の HTML 文書の表示を変えてみましょう。本稿でも、前節の HTML 文書 genji01_kiritsubo.html を基にして、リンクを作成します。

前節の HTML 文書 genji01_kiritsubo.html を次のように編集／保存します。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="./common.css" type="text/css" media="screen" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<link rel="stylesheet" href="./common.css" type="text/css" media="screen" />
<title>源氏物語 第一帖 桐壺 第一段</title>
<link rel="start" href="./index.html" />
<link rel="prev" href="./index.html" />
<link rel="next" href="./genji01_kiritsubo.html" />
</head>

<body>

<h1>源氏物語</h1>

<p class="navbar"><a href="./index.html">戻る</a> |
<a href="./index.html">表紙</a> |
<a href="./genji02_hahakigi.html">進む</a></p>

<h2>第一帖 桐壺</h2>

<h3>第一段</h3>

<div class="section">
<p>いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに、いとやむごとなき
際にはあらぬが、すぐれて時めきたまふありけり。</p>

<p>はじめより我はと思ひ上がりたまへる御方がた、めざましきものにおとしめ嫉みたま
ふ。同じほど、それより下臈の更衣たちは、ましてやすからず。朝夕の宮仕へにつけても
、人の心をのみ動かし、恨みを負ふ積もりにやありけむ、いと篤しくなりゆき、もの心細
げに里がちなるを、いよいよあかずあはれなるものに思ほして、人のそしりをもえ憚らせ
たまはず、世のためしにもなりぬべき御もてなしなり。</p>

<p>上達部、上人なども、あいなく目を側めつつ、「いとまばゆき人の御おぼえなり。唐
土にも、かかる事の起こりにこそ、世も乱れ、悪しかりけれ」と、やうやう天の下にもあ
ぢきなう、人のもてなやみぐさになりて、楊貴妃の例も引き出でつべくなりゆくに、いと
はしたなきこと多かれど、かたじけなき御心ばへのたぐひなきを頼みにてまじらひたまふ
。</p>

<p>父の大納言は亡くなりて、母北の方なむいにしへの人のよしあるにて、親うち具し、
さしあたりて世のおぼえはなやかなる御方がたにもいたう劣らず、なにごとの儀式をもも
てなしたまひけれど、とりたててはかばかしき後見しなければ、事ある時は、なほ拠り所
なく心細げなり。</p>
</div> <!-- END section -->

<p class="navbar"><a href="./index.html">戻る</a> |
<a href="./index.html">表紙</a> |
<a href="./genji02_hahakigi.html">進む</a></p>

<address>
Copyright (C) 2006
<a href="mailto:nextindex@gmail.com">SUGAI, Manabu</a>.
Some rights reserved.
</address>

</body>
</html>

同じディレクトリに次の HTML ソースを、ファイル名 index.html にして保存してください：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="./common.css" type="text/css" media="screen" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<link rel="stylesheet" href="./common.css" type="text/css" media="screen" />
<title>源氏物語 - 紫式部</title>
<link rel="start" href="./index.html" />
<link rel="next" href="./genji01_kiritsubo.html" />
</head>

<body>

<h1>源氏物語 - 紫式部</h1>

<p class="navbar"><a href="./genji01_kiritsubo.html">進む</a></p>

<div class="section">
<p><cite>源氏物語</cite>は日本の平安時代中期に成立した長編物語。成立が古いため、
版がたくさんあり、現在では便宜的に、青表紙本系、河内本系、その他と考えることが多
い。</p>

<p>王朝文学というカテゴリがあり、古くから注釈書／研究が多い。本居宣長、池田亀鑑
、秋山虔、池田弥三郎、河添房江、藤井貞和らの注釈書／梗概書が良く読まれている。</p>

<p>現代語訳、翻案も数多く、一つのジャンルをなしている。翻訳では、与謝野晶子、谷
崎潤一郎、円地文子、瀬戸内寂聴らのものがよく知られている。また、翻案では、江戸時
代後期の『偐紫田舎源氏』などのほか、寂聴の『女人源氏』、橋本治の『窯変源氏』が新
しい。まんがでは大和和紀の『あさきゆめみし』が決定版だ。これは田辺源氏を原典とし
ているらしい。</p>

<ul>
<li><a href="./genji01_kiritsubo.html">第一帖 桐壺冒頭</a></li>
<li><a href="./genji02_hahakigi.html">第二帖 帚木冒頭</a></li>
</ul>

<p><cite>源氏物語</cite>の原文は、
<a href="http://www.sainet.or.jp/%7Eeshibuya/">渋谷栄一研究所</a>に拠った。</p>
</div>    <!-- END section -->

<p class="navbar"><a href="./genji01_kiritsubo.html">進む</a></p>

<address>
Copyright (C) 2006
<a href="mailto:nextindex@gmail.com">SUGAI, Manabu</a>.
Some rights reserved.
</address>

</body>
</html>

更に、同じディレクトリに次の HTML ソースを、ファイル名 genji02_hahakigi.html にして保存してください：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="./common.css" type="text/css" media="screen" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<link rel="stylesheet" href="./common.css" type="text/css" media="screen" />
<title>源氏物語 第二帖 帚木 第一段</title>
<link rel="start" href="./index.html" />
<link rel="prev" href="./genji01_kiritsubo.html" />
</head>

<body>

<h1>源氏物語</h1>

<p class="navbar"><a href="./genji01_kiritsubo.html">戻る</a> | 
<a href="./index.html">表紙</a> | 
進む</p>

<h2>第二帖 帚木</h2>

<h3>第一段</h3>

<div class="section">
<p>光源氏、名のみことことしう、言ひ消たれたまふ咎多かなるに、いとど、かかる好き
ごとどもを、末の世にも聞き伝へて、軽びたる名をや流さむと、忍びたまひける隠ろへご
とをさへ、語り伝へけむ人のもの言ひさがなさよ。さるは、いといたく世を憚り、まめだ
ちたまひけるほど、なよびかにをかしきことはなくて、交野少将には笑はれたまひけむか
し。</p>

<p>まだ中将などにものしたまひし時は、内裏にのみさぶらひようしたまひて、大殿には
絶え絶えまかでたまふ。忍ぶの乱れやと、疑ひきこゆることもありしかど、さしもあだめ
き目馴れたるうちつけの好き好きしさなどは好ましからぬ御本性にて、まれには、あなが
ちに引き違へ心尽くしなることを、御心に思しとどむる癖なむ、あやにくにて、さるまじ
き御振る舞ひもうち混じりける。</p>
</div> <!-- END section -->

<p class="navbar"><a href="./genji01_kiritsubo.html">戻る</a> | 
<a href="./index.html">表紙</a> | 
進む</p>

<address>
Copyright (C) 2006
<a href="mailto:nextindex@gmail.com">SUGAI, Manabu</a>.
Some rights reserved.
</address>

</body>
</html>

画像ファイル

また、次の画像ファイルを保存して利用しています：

図： rindou5.gif

前提の確認

以上の５つのファイルを作成していない方は、５つのファイルを同じディレクトリに作成／保存してください。

index.html をブラウザで開いて表示を確認してください。

本項で用意した HTML 文書にしたいして、次項でリンクアンカーの表示指定をしてみましょう。本項で用意した HTML 文書は単なるサンプルなので、内容は問いません。