<< HTML 内部リンク a(アンカー)要素 | Home | Mozilla Firefox 3 正規版リリース >>

HTML ページ内リンク a(アンカー)要素

今回もa(アンカー)要素を使ったHTMLをやりましょう。

前回、HTML 内部リンク a(アンカー)要素

前々回、webサイトの階層と相対パス

前々々回、HTML 外部リンク a(アンカー)要素

今回は、ページ内でのリンクの仕方です。

下の画像のようなサイトを作成したとしましょう。
左側がブラウザーで表示した内容で、右側がページのソースです。

HTML name属性

画像の右側を見てもらうとわかりますが、menu1からContents1にリンクをするには
「<a href="#cnt1">・menu1</a>」
とします。

これまでと違うのは「href="#リンク先名"」のように「#」記号が付くことと、「リンク先URL」ではなく「リンク先名」を使用することです。

「リンク先名」は、リンクしたい部分にa(アンカー)要素のname属性に入れる任意の文字のことです。

この場合は
「<a name="cnt1">・menu1</a>」
のように「href(ハイパーリファレンス)」属性ではなく「name」属性を使用し「name="任意の名"」のようにします。

よく使用されるのがページの先頭に戻るリンクです。

この場合は、以下のようにページの先頭にあたる「Site title」に「name」属性で位置名を付けておきます。
<h1><a name="top">Site title</a></h1>

そしてページ下の「^to top」に「href」属性を使用して
<a href="#top">^to top</a>
のように記序します。

このようにしておけば「^to top」をクリックするとページの先頭に戻るリンクを設定することが出来ます。

応用編、別ページの特定の位置へのリンク。

ページ1の「menu1」からページ2の「Contents1」にリンクするとします。

ページ2の「Contents1」には
「<a name="cnt1">・menu1</a>」
のように記序しておきます。

ページ1の「menu1」には
「<a href="ページ2/#cnt1">・menu1</a>」
のように「ページ名/#位置名」で記序します。

内部リンクで習ったのに「/#位置名」を加えるだけです。


最後にW3cによると「name」属性は、現在非推奨となっていて、今後は「id」属性を使用することが推奨されていて「XHTML1.1」では「id」属性しか使用できないことになっています。

現在は過渡期と言うこともあり、「name」属性、「id」属性の両方を入れることが薦められています。

ちなみに「#」記号は、「シャープ」ではなく「いげた」あるいは英語で「number sign」「numerical sign」「pound sign」「hash mark」などと言います。

「♯(シャープ)」記号と
「#(いげた)」記号はよく見ると違います。

日本ではシャープで通じるので、どうでも良いですがHTMLでは「#(いげた)」記号の半角を使用します。

Calendar

  12345
6789101112
13141516171819
20212223242526
2728293031  
<< October 2019 >>

Recent Entries


Categories


Archives


Profile


Valid XHTML 1.0 Transitional

Valid CSS!

Comments

Leave Comment










Trackbacks

Trackback URL

Recent Comments

Recent Trackbacks