rindou5.gifSince: 26th/May/2002
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 文書 yonagahime.html を基にして、リンクを作成します。
前節の HTML 文書 yonagahime.html を次のように編集／保存します。
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!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>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<title>「夜長姫と耳男」を読む</title>
<link rel="stylesheet" href="./ango.css" type="text/css" media="screen" />
<?xml-stylesheet href="./ango.css" type="text/css" media="screen" ?>
</head>
<body>
<h1>「夜長姫と耳男」を読む</h1>
<p><a href="./index.html">戻る</a> | <a href="./kazehakase.html">進む</a></p>
<p>昭和２７年初出、３０年に没した安吾晩年の作品に分類できます。自己模倣の罠には
まっている恨みもありますが、美しい小品です。</p>
<p>この短編のキーワードは「イノチ」。「イノチ」とは呪うほど強く望むこと、苦悶す
る衒気が描かれています。人は、ギリギリの、のっぴきならない場に居続ける事に疲れ
て、ややもすると悟達や諦念、成熟に安堵する。呪詛、苦悶、己の欲望から目を背けてし
まう。それは自己韜晦であり、己の魂の簒奪です。</p>
<p>安吾は「欲望」、「堕落」を称揚するかのようですが、それは「人間」を描く事であ
り、人品の卑しさを嫌悪し、魂の純潔を尊ぶことです。そしてあらゆる形の愛に収斂して
いくものです。</p>
<p><a href="./index.html">戻る</a> | <a href="./kazehakase.html">進む</a></p>
<address>
Copyright (C) 2002 <a href="mailto:メールアドレス">SUGAI, Manabu</a>.
All rights reserved.
</address>
</body>
</html>
同じディレクトリに次の HTML ソースを、ファイル名 index.html にして保存してください：
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!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>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<title>坂口安吾を考える</title>
<link rel="stylesheet" href="./ango.css" type="text/css" media="screen" />
<?xml-stylesheet href="./ango.css" type="text/css" media="screen" ?>
</head>
<body>
<h1>坂口安吾を考える</h1>
<p><a href="./yonagahime.html">進む</a></p>
<p>坂口安吾は、「堕落論」、「日本文化私観」、「白恥」、「桜の森の満開の下」、
「夜長姫と耳男」などが有名な物書きです。明治３９年新潟に生まれ、第二次大戦後１０
年、昭和３０年に脳溢血で没しました。享年４８歳。無頼派として有名であり、「反逆」
と「堕落」がキーワードです。神田のアテネ・フランセで仏文を学んでいた経験からか、
「生」、「生活」、「肉体」、「実質」にこだわり、「枯淡」、「諦念」、「侘び錆び」
を徹頭徹尾否定します。</p>
<p>私は自分の欲望に忠実である事が「誠実」と言う事だと考えます。己の欲するところ
を外的要因で為さぬのならば、それは単純に敗北を意味する。この点で、常軌を逸したと
ころには必ず真実が宿り、強靭であれば正義だと思っています。逆に言えば、己の為すと
ころは、己の欲するところである事が必然的な結論になります。絶望は愚か者の結論。坂
口安吾は絶望して取り澄ますことを嫌い、七転八倒、顛倒混乱、羞恥の底にもがき苦しむ
ことを望みます。</p>
<p>「好きなものは咒うか殺すか争うかしなければならないのよ。」全く同感です。</p>
<p><a href="./yonagahime.html">進む</a></p>
<address>
Copyright (C) 2002 <a href="mailto:メールアドレス">SUGAI, Manabu</a>.
All rights reserved.
</address>
</body>
</html>
更に、同じディレクトリに次の HTML ソースを、ファイル名 kazehakase.html にして保存してください：
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!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>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>「風博士」を読む</title>
<link rel="stylesheet" href="./ango.css" type="text/css" media="screen" />
<?xml-stylesheet href="./ango.css" type="text/css" media="screen" ?>
</head>
<body>
<h1>「風博士」を読む</h1>
<p><a href="./yonagahime.html">戻る</a></p>
<p>昭和６年初出、安吾最初期の作品に分類できます。安吾の堕落への強い渇望は未だ見
られませんが、独特の衒気漲る佳作です。彼の敬愛する師匠である牧野真一に激賞された
そうです。</p>
<p>「衒気漲る」と書きましたが、私はこれを読むと涙が滲みます。安吾は、人間が踏み
迷い、赤面顛倒、惑乱狂態を演ずる様を真なりと観じています。その滑稽で惨めとも見え
る人間本来のザマが「風博士」その人であり、掌編「風博士」そのものなのでしょう。ど
こまでも、どこまでも突っ張って、ハッタリ倒して、時にはポキッと折れる、そんな安吾
の荒削りな衒気が伺えます。</p>
<p>この作品では、人品の卑しさは露骨に顕れていませんが、滑稽で惨めなことが卑賤な
こととして描かれているわけではありません。ただ専心に、クダラナイことが志向されて
います。安吾が創作の初期から戯作者を任じて、生きんが為に書いていたこと、気骨の士
であらんと願っていたことの証拠だと思います。</p>
<p><a href="./yonagahime.html">戻る</a></p>
<address>
Copyright (C) 2002 <a href="mailto:メールアドレス">SUGAI, Manabu</a>.
All rights reserved.
</address>
</body>
</html>
外部スタイルシート ango.css は次のようになっています：
body { background: url("./rindou5.gif") navy;
color: #ccf }
h1 { font-style: italic;
font-weight: normal;
font-size: 3em;
font-family: cursive;
text-align: center;
text-decoration: underline overline }
p { background : #ccf;
color: navy;
font-weight: bold;
line-height: 1.5;
font-family: serif;
text-indent:1em;
letter-spacing: 0.2em }
address { font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 0.9em;
line-height: 1;
font-family: monospace;
text-align: right }
また、次の画像ファイルを保存して利用しています：
|
図： rindou5.gif |
以上の５つのファイルを作成していない方は、５つのファイルを同じディレクトリに作成／保存してください。
 |
| 図：保存した５つのファイルの Windows 上のアイコン |
index.html をブラウザで開いて表示を確認してください。
本項で用意した HTML 文書にしたいして、 次項でリンクアンカーの表示指定をしてみましょう。本項で用意した HTML 文書は単なるサンプルなので、内容は問いません。問わないでください。
