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>
リンク先との関係性を示す
リンク先と自分との関係を示すこともできます。
例えば、このページの次のページへのリンクとかを指定できます。この関係性を指定するには
- rel:自分からみたリンク先の関係
- rev:リンク先からみた自分との関係
を使用します。
次のページへのリンクの場合は
<a href="次のページのURL" rel="next" rev="prev">次のページへ</a>
となります。自分からみた相手のページは次のページ「next」で、相手からみた自分は前のページ「prev」となります。
また、この方法を使って、検索エンジンにリンク先へリンクを飛ばさない設定もできます。
その方法は
<a href="URL" rel="nofollow">ページへのリンク</a>
のようにnofollowを指定する方法です。これで検索エンジンがこのリンクを無視するようになります。
こちらから発リンクを出したくない場合に使用します(コメントからのリンクなど)。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー