HTML -リンクタグ-
リンクタグ
テキストや画像にリンクを設定するには<a>タグを使用します。
一般的なブラウザではリンク色は青で表示され、下線が追加されます。一度訪れたリンク先は紫色で表示されます。
これらのデザインは、スタイルシートで自由に変更することができます。
<a href="リンク先"> ~ </a>
リンク先指定
絶対パス
通常、他のWebサイトへのリンクを記述する場合には指定します。
例:<a href="http://www.xxxx.com/index.html"> ~ </a>
相対パス
現在編集中のファイルから見た、リンク先の場所を相対的に指定します。
相対パス記述時のルール
- 現在編集中のHTML文書とリンク先ファイルが同一ディレクトリに存在する場合
構文
<a href="ファイル名"> ~ </a>
- 現在編集中のHTML文書と同じディレクトリにリンク先ディレクトリが存在し、その中にリンク先がファイルが ある場合
構文
<a href="ディレクトリ名/ファイル名"> ~ </a>
ディレクトリ名とファイル名を「/」で区切って指定します。 - 現在編集中のHTML文書の親ディレクトリにリンク先ファイルが存在する場合
構文
<a href="../ファイル名"> ~ </a>
ディレクトリが1つ上がる度に「../」を指定します。
電子メール
a要素のhref属性に「mailto:(送信先メールアドレス)」を指定します。
<a href="mailto:xxxx@yyyy.com"> ~ </a>
ページ内の特定場所へのリンク
Webページ内の特定の場所(特定の見出しなど)に移動したい場合は、移動先の要素にid属性を設定するこ とにより可能になります。
この時a要素のリンク自体をアンカーというのに対して移動先のid属性をアンカーポイントといいます。
id属性の属性値には、好きな名前をつけることができますが、id属性は、スタイルシートをデザインする ために利用することが多く、最低限のルールがあります。
- 移動先側のid属性の属性値の設定
-
例
<h3 id="mypoint"> ~ </h3>
- 移動元のリンク先設定
-
例
<a href="#mypoint"> ~ </a>
属性値の前に「#」を付けます。
また、別ページの場合は、ファイル名.#属性名で指定します。