元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

HTML入門(aタグの使い方)

aタグの基本的な使い方についてまとめます。

aタグの使い方

aタグは、他のサイトやページにリンクしたいときに使います。

<!-- aタグの記述例(絶対パスで指定) -->
<a href="https://www.google.com/">Googleのサイトへ移動</a>

href属性にリンク先のURLを指定します。また、aタグの間に任意の文言を記述します。外部サイトにリンクする場合、上記のように絶対パスで指定します。自サイト内の別ページにリンクする場合は、現在のページを起点にして相対パスで指定します。

<!-- 相対パスで指定する例 -->
<a href="./about.html">Aboutページへ</a>
<a href="./contact/contact.html">お問い合わせへ</a>

別タブで開く

外部サイトにリンクする場合に使われることが多いです。外部サイトを別タブで開くことで、今いるサイトと区別するような働きが期待されます。

<!-- 記述例 -->
<a href="https://www.yahoo.co.jp/" target="_blank">Yahooのサイトへ移動</a>

ページ内リンク

同じページ内の特定の箇所にジャンプ(移動・遷移)するリンクのことです。当ブログでは、「記事の目次」のところが、ページ内リンクになっています。

<!-- 遷移元の記述 -->
<a href="#article">タイトルの位置へジャンプする</a>

<!-- 遷移先の記述 -->
<h1 id="article">タイトル</h1>

遷移元のhref属性に#id名と指定します。遷移先のid属性にid名を指定します。

よくページトップへスクロールして戻るボタンがありますが、それはJavaScript(jQuery)で作ります。機会があれば他の記事で取り上げたいと思います。

リンクが飛ばない原因

  • スペルミス
  • 記号の間違い("と`など)
  • URLの間違い
  • aタグの閉じタグがない

おまけ(次への>>記号の表示の仕方)

「>>」のように2文字ではなく1文字で表示するには、特殊文字を使います。

  • 「»」は、「&raquo;」と記述します。
    • 次へ»
  • 「«」は、「&laquo;」と記述します。
    • «前へ