aタグ

2012年4月25日：HTML

ホームページは通常のテキストと異なり、リンクと呼ばれる「URLが埋め込まれたテキスト」が存在します。

リンクをクリックすることで、他のページに移る仕組みになっているのです。

もしも、このリンクがないと、ブラウザにURLを打ち込んでサイトを移動する必要があります。

 

ここでは、他のページヘのリンクを貼るためのタグであるaタグの使い方を紹介します。

 

他のURLへリンクする

他のURLへリンクさせる場合は「aタグ」を使用します。

使い方は以下のようになります。

<a href="URL">文字</a>

URLのところにリンクさせたいURLを記入します。

そして、文字のところに文章をかきます。

この文字をクリックするとリンク先にとぶようになります。

新しいタブで表示

上記の状態では、リンクをクリックすると今いるページにリンク先が表示されます。

通常、他のサイトのページを開くときは、新しいタブに表示させるようにします。

 

新しいタブでリンク先を開きたい場合は

<a href="URL" target="_blank">文字</a>

として「target=”_blank”」を追加します。

これにより、ブラウザの新しいタブにページが表示されるようになります。

ページ内の場所を指定する

リンクをクリックするとページのある位置へ移動させるということがaタグでできます。

例えば、

<a name="abc">ここへ移動させたい</a>

<p>文章...</p>

<a href="#abc">abcへ移動する</a>

とすれば、「abcへ移動する」をクリックすると、「ここへ移動させたい」へ移動します。

 

さらにaタグを使う

上記の使い方を身に付ければ、最低限のことは問題ありません。

以下、もう少し細かい使い方を紹介します。

使えそうなものがあれば使ってみましょう。

アクセスキーの指定

リンクをキー操作で動作させることができます。

この仕組をアクセスキーといい

<a href="sample.html" accesskey="S">サンプルページへ(S)</a>

のように指定します。

ポインタをリンクに合わせた際に説明を表示

リンクにカーソルを合わせたら、リンクの補足説明を表示させることができます。

例えば

<a href="index.html" title="補足説明です。">リンク</a>

とすれば、リンクへポインタを合わせると、「補足説明です」が表示されます。

メールや電話

リンク先を

<a href="mailto:XXX@YYY.com" />メールを送信</a>

のように指定すれば、メールウインドウを開かせることができます。

このリンクをクリックすると、指定したメールアドレスを送信先としたメールウインドウがひらきます。

 

携帯端末の場合、リンクを押すと電話をかけるようにすることが可能です。

以下のように設定します。

<a href="tel:電話番号">電話をかける</a>

リンク先との関係性を示す

リンク先と自分との関係を示すこともできます。

例えば、このページの次のページへのリンクとかを指定できます。この関係性を指定するには

  1. rel：自分からみたリンク先の関係
  2. rev：リンク先からみた自分との関係

を使用します。

次のページへのリンクの場合は

<a href="次のページのURL" rel="next" rev="prev">次のページへ</a>

となります。自分からみた相手のページは次のページ「next」で、相手からみた自分は前のページ「prev」となります。

 

また、この方法を使って、検索エンジンにリンク先へリンクを飛ばさない設定もできます。

その方法は

<a href="URL" rel="nofollow">ページへのリンク</a>

のようにnofollowを指定する方法です。これで検索エンジンがこのリンクを無視するようになります。

こちらから発リンクを出したくない場合に使用します（コメントからのリンクなど）。

著者：安井 真人(やすい　まさと)

TOP