a とは
- ここで説明する a とは次の語句からなるHTMLの要素です。
- anchor
- 読み: アンカー
意味: 最終走者、船の錨
a 要素の概要
前述している通り、a とは anchor の頭文字であり、意味としては 「 リレーの最終走者 」 が一番しっくりくるものとなります。 実際にはもっと他の意味もありますが、ここでは 「 リレー 」、「 繋ぐ 」、「 綱 」というような意味と捉えていただくと理解しやすいと思います。
この要素は、ハイパーリンクを表し、リンクの出発点と到達点を指定するための要素です。
a 要素がリンクの出発点であり、この要素の href属性 がリンクの到達点を表します。 そのため、a 要素には href 属性が必須となり、この属性を指定することで他のサイトやページへのリンクを設定することができます。
リンクの URL の指定には 絶対参照と相対参照 を使うことができます。
この要素には開始タグと終了タグが必要です。
<a href="URL"> リンクテキスト </a>
サンプルコードと実行結果
この a 要素にはハイパーリンクを設定する上でのいくつかの重要な属性があります。 ここではその代表となる属性の説明を交えながらリンクのサンプルを作成してみます。
サンプルコード: HTML (通常のリンク)
<body>
<a href="リンク先URL"> YWORKのトップページに移動 </a>
</body>
通常のリンクを作成する場合には a 要素の必須属性となる href 属性 のみを使えば問題ありません。 href 属性の値にはリンク先の URL を記述します。
サンプルコード: HTML (新しいタブでリンク先を開く)
<body>
<a href="リンク先URL" target="_blank"> YWORK TOP 新しいタブで開く </a>
</body>
新しいタブでリンク先を開くには target 属性 を使用します。 target 属性の値には "_blank" を記述します。
サンプルコード: HTML (このページ内のリンク先に移動)
<body>
<a href="#idFooter"> このページのfooter要素に移動 </a>
<footer id="idFooter"> ここがidFooterです </footer>
</body>
a 要素の href 属性に 他の要素の id 属性値を指定すると、同じページ内の任意の要素に移動することができます。
ここでは、このページの footer 要素に id 属性をつけて "idFooter" の値を設定しています。
なお、弊サイトでは jQuery の
スムーススクロール
を導入していますので、ページ内移動がスクロールで行われます。