ホーム > HTML/CSS > リンクタグ

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>

属性値の前に「#」を付けます。

また、別ページの場合は、ファイル名.#属性名で指定します。

Copyright © 2018   MitoRoid  All Rights Reserved.