Ⅳ-８　ページ内のコンテンツにリンクを張る

１）リンク先に名前を付けます

見出し一覧からページ内の見出しをリンク先として表示するため、
文章の見出し部分に名前を付けます。
見出しの文字を<a name="～">～</a>で囲み、
ここではnameの値として「空色」には「c1」「水色鼠」には「c2」「浅縹」には「c3」とします。
それぞれ「<a name="c1">」「<a name="c2">」「<a name="c3">」と書きます

２）見出し一覧にリンクを設定します

見出し一覧にリンクを設定し、各見出しにアクセス出来るようにします。
リンクを設定したいテキストを<a href="～">と</a>で囲みます。
hrefの値として、先ほど設定したリンク先の名前を指定します。
このとき名前には「#」を付けて指定します。
「<a href="#c1">」のように書きます。

３）リンクの部分の色を変更します

リンクの部分はa:link{～}などで指定した色で表示されます。
デザイン的に宜しくないのでa:visited{～}で指定する色を最初に設定したカラーに変更します。
a:visited{color:#98d1e9}にします。

４）リンク部分のアンダーラインを消します

リンク部分のアンダーラインも宜しくないので消すことにします。
a{text-decoration:none}を追加します

５）リンク動作を確認します

リンクをクリックすると、リンク先として指定した見出しが表示されます
ウィンドウの高さを短くするとどのように作動するか分かりやすくなります。

<html>
<head>
<title>色の景色</title>
<style type="text/css"></style>
</head>
<body>

<div align="center">
<h1>春の色</h1>
<div>
<a href="#c1">空色・・・そらいろ</a><br>
<a href="#c2">水色鼠・・・みずいろねず</a><br>
<a href="#c3">浅縹・・・あさはなだ</a><br>
</div>
<h2><a name="c1">空色</a>・・・そらいろ</h2>
<p class="text01">
青空は季節によってかなり濃さが違ってくる<br>
天空と低空でも違って見える<br>
「空色」と言う色見本に近いのは待ちこがれたいた春の明るい空の<br>
地平線近くの色だろうか<br>
「天色」を「てんしょく」と読めば空模様のことだが<br>
「あまいろ」とか「そらいろ」と読むことで明るい青空の色になる</p>

<h2><a name="c2">水色鼠</a>・・・みずいろねず</h2>
<p class="text01">
雪解け水には独特の白い濁りがある<br>
この色が「水色鼠」だろうか。<br>
「四十八茶、百鼠」と言われた江戸時代の色名には「水色鼠」がある。<br>
青みを帯びた灰色が「藍鼠」なので<br>
青みを薄めた灰白色を「水色鼠」としてみた。<br>
「港鼠」や「深川鼠」という色も鼠色がかった淡い藍である</p>

<h2><a name="c3">浅縹</a>・・・あさはなだ</h2>
<p class="text01">
風のない湖の水面は<br>
鏡面となって周囲の森を映しこんでいる<br>
ブナの若葉に染められた水の色は<br>
「浅緑」であろうか。<br>
残雪の山の色を色見本で探してみたら<br>
「浅縹」と言う色に近かった</p>
<hr>
<div><a href="index.htm">Sky&Water by sora</a></div>
</div>
</body>
</html>

５）他のページからコンテンツにリンクを張る

他のページからもコンテンツにリンクを張ることが出来ます。
通常のリンクの最後に「#名前」を追加します。
例えばトップページ（index.htm）から、コンテンツページ（contents.htm）の各コンテンツにリンクを張る場合
<a href="contents.htm#c1">と</a>で囲みます【参考】
Yここで一応このインデックスページを＜ファイル→上書き保存＞で閉じてください