ページ同士をつなぐa要素。ページ内リンクの方法などを紹介

Webサイトやページ同士を繋ぐ役割を果たしているのが、a要素です。リンクと言われていますが、世界中のWebサイトはハイパーリンクで繋がっています。そして、検索エンジンもリンクの質によってサイトを評価していたりするので、Webの世界では非常に重要となります。

他のサイトとリンクで繋がることができますし、自分のサイト内でもリンクによってページを行き来することができます。引用元の紹介や詳しい説明ページへの誘導など、ユーザビリティに関わる部分ですから、適切に利用できるようにしましょう。

ここでは、a要素について解説をします。

 

a要素の使い方について

a要素でマークアップすると、全体的に青色となり下線が表示されます。これで、リンクがあると視覚的にも見分けが付くようになります。リンクするときには、<a>~</a>で囲みますが、href属性によってリンク先の指定をします。

また、リンク先を新しいウインドウで開くには、target属性で「_blank」と指定しなければいけません。具体的には、以下のようになります。

<a href=”リンク先URL” target=”_blank”>○○○</a>

一般的に、外部サイトの場合は新しいウインドウで、同じサイト内のリンクは同じウインドウにするのが基本です。

 

相対パスの記述方法

ちなみに、外部のページであれば、URL(絶対パス)で記述しますが、同じサイト内のリンクだと「相対パス」で記述することができます。相対パスにするとソースが短くなるので、ページの読み込み時間の短縮に繋がるわけです。

記述のルールとしては、上の階層のページだと「../ファイル名」となり、同じ階層だと「./ファイル名」もしくは、そのままファイル名となります。そして、下の階層だと「フォルダ名/ファイル名」と記述します。

相対パスは、リンク元の場所によって記述方法が異なります。なので、慣れないうちは記述ミスが多くなりがちですから、しっかりと確認するようにしてください。

 

ページ内リンクを付けるには?

Webページの中には、リンクをクリックすると、同じページ内にジャンプすることがあります。これを「ページ内リンク」と呼びます。情報量が多くてページが長くなってしまった時に、ページ内リンクを使うことがありますね。

他のページでなくても、同じページ内でもリンクできますから覚えておきましょう。記述方法としては、リンク先のアンカー名を指定して、そのアンカーへリンクを貼るという方法です。

<a href=”#link”>見出しへ飛ぶ</a>
<h2 id=”link”>見出しの内容</h2>

上記の例だと、h2要素にIDで「link」と指定しています。そして、「#link」にリンクを貼っています。こうすることで、ページ内リンクとして機能するわけです。また、「ファイル名#link」とすれば、他のページからでもリンクをすることができます。使い方によっては、かなり重宝するでしょう。

 

以上、a要素によるリンクを紹介しました。情報量が多い大規模サイトになってくると、効率良くリンクを貼ることが求められます。見やすいサイトにするために、適切なリンクを貼るようにしましょう。

サブコンテンツ

このページの先頭へ