【HTML5】a要素でURLや電話番号、メールアドレスをリンクさせる

画面のリンクをクリックして他の画面に移動したことはありませんか?

a要素はこのページ遷移(せんい)を表現する機能を持っているHTML要素です。

例えば、以下のコードでは 「https://prograbi.com」 に遷移するリンクを「PRPGRABI」というテキストで表示することができます。

         
<a href="https://prograbi.com">PROGRABI</a>
    

a要素の使い方

a要素には開始タグ終了タグが必要です。

開始タグと終了タグの間に画面に表示するテキストや他の要素を記述します
この記述を省略すると画面には何も表示されません。

例えば、以下のようにすると a要素の開始と終了タグに囲まれた「PROGRABI」というリンクが表示されます。


<a>PROGRABI</a>
        

しかし、今のままではリンク先のアドレスを設定していないためただのテキストとして扱われてしまうことがあります

aタグを正しく使用するためには、aタグのhref属性にリンクを設定します

a要素の属性

a要素特有の属性を一覧で紹介します。
特に使用する頻度の高い属性については後で詳しく説明します。

属性名 説明
download href属性に指定したリンク先のデータを保存するように促します。単にdownloadと指定することでも使用可能ですが、download="filename.jpg"のように値にファイル名を指定することも可能です。値を省略した場合、ブラウザは様々な情報からファイル名/拡張子を提案します。
href ハイパーリンク先のURLを指定します。URLの他に、メディアファイル、電話番号(tel:)、メールアドレス(mailto:)などを指定できます。値を省略した場合は、他の属性も機能しません。
ping リンク先に移動するときに、この属性に指定されたURLにpostリクエストを送信します。本文はPOSTとなります。この送信はバックグラウンドで実行されるため、主にトラッキングに使用されます。
rel リンク先のURLとの関係を示します。値には、別の(作者が管理していない)Webサイトであるであることを示すnofollowや、現在のページのアドレスを移動先のWebページに送信しないnoreferrerなどを設定できます。
target リンク先のページをどこに表示するかを指定します。

href属性

href(Hypertext Reference: エイチレフ)属性に移動先のアドレスを設定します。
この属性に何も設定しないとa要素内のテキストが表示されるのみで、リンクとして機能しません。

         
<a href="https://prograbi.com">PROGRABI</a>
    

他にも、電話番号やメールアドレスを指定することがあります。
この方法についてはこのページの最後の(おまけ)で説明しています。

target属性

リンク先のページの開く場所はtarget(ターゲット)属性に指定します。

初期値では _self が適用され、現在表示されているタブでリンク先のページを開きます。
よく使用する値として _blank 属性があり、この値を設定すると新しいタブでリンク先のページを開きます

意味
_blank リンク先のページを新しいタブで開きます。
_self 現在のタブでリンク先のページを開きます。(デフォルト)
_top iframeというタグを利用してページ(親)内に他のページ(子)を埋め込んだ場合に、子ページのリンクに_topを設定することで親ページでリンク先のページを開きます。
_parent _topと使い所は同じですが、子ページ内にさらに孫ページがある場合、孫ページのリンク先に_parentが設定されていると孫の親である子ページでリンク先のページを開きます。

コーディング例

次の例では、target属性に_blankを指定しています。
結果のリンクをクリックすると新しいタブでページが開きます。


<a href="https://prograbi.com" target="_blank">PROGRABI</a>
        

a要素を作成してみましょう

  • 好きなページに遷移するa要素を作成してみよう!
  • 新しいタブで開くa要素を作成してみよう!

ページ内の特定の場所に移動する

a要素は他のページへの遷移だけではなく、ページ内の特定の場所に移動するために使用することができます。
このページの上部にあるもくじはこの方法を利用しています。

id属性を使用する

特定の場所はアンカーと呼ばれ、ページ内で一意の値を設定する必要があります
このページ内で一つだけの値をタグに設定する場合はid属性を使用します。id属性はどの要素にも設定することができるグローバル属性となっており、a要素以外でも使うことができます。(例ではdiv要素を使用しています。)

idに値を設定したら、a要素のhref属性にシャープ(#)を使用して以下のように設定します。


<a href="#anchor">移動します。</a>
<div id="anchor">ここに移動します。</div>
    
移動します。
ここに移動します。

a要素のname属性を使用する

a要素のname属性を使用することもできます。この方法は、アンカーにa要素を使用する必要があります


<a href="#nameAnchor">移動します。</a>
<div>
    <a name="nameAnchor">ここに移動します。</a>
</div>
    

もしname属性の値とid属性の値が重複していた場合は、id属性が優先されるケースが多いようです。
また、name属性を使用する場合は、a要素を使用しなければならないという制約もあり、使い勝手はid属性の方がいいでしょう。

ページ内の特定の場所に移動するaタグを作成してみましょう

  1. id属性を使用してアンカーを作成しよう!
  2. アンカーに移動するa要素を作成してみよう!

CSSでデザインする

文字を装飾


a {
    text-decoration: none;
}

a.ff-original-surfer {
    font-family: 'Original Surfer', cursive;
}

a.pink {
    color: #e91e63;
    font-size: 1.6rem;
    font-weight: bold; 
    transition: all 300ms 0s ease;
}

a.pink:hover {
    color: #c2185b;
}
    

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Original+Surfer&display=swap" rel="stylesheet">
</head>
    

<a href="https://prograbi.com" target="_blank" class="ff-original-surfer pink">PROGRABI</a>
    

ボタン風に装飾


a {
    text-decoration: none;
}

a.btn-indigo {
    display: inline-block;
    background-color: #3f51b5;
    color: #fff;
    padding: 12px 16px;
    border-radius: 4px;
    transition: all 300ms 0s ease;
}

a.btn-indigo:hover {
    background-color: #303f9f;
}
    

<a href="https://prograbi.com" target="_blank" class="btn-indigo">PROGRABI</a>
    

(おまけ)メール作成リンク

a要素を使ってメールを作成するリンクを設定できます。
以下のように、href属性にmailtoを指定することでメールアプリが起動します。


<a href="mailto:info@prograbi.com">MAIL</a>
        

パラメータでメールの内容を設定する

mailtoパラメータを設定すれば、任意の内容を設定したメールを作成できます

このパラメータ(変数)は、[パラメータ名]=[値]というパラメータとそののセットで記述します。
記述するイコール(=)は半角で前後に空白文字を入力しません。

パラメータ 意味 コード例 例の結果
subject 表題に項目を記入できます。
<a href="mailto:info@prograbi.com?subject=PROGRABIに送信!">MAIL</a>
MAIL
cc CCに他のメアドを設定できます。
<a href="mailto:info@prograbi.com?cc=contact@prograbi.com">MAIL</a>
MAIL
body 本文に文章を記入できます。
<a href="mailto:info@prograbi.com?body=ご感想をお願いします。">MAIL</a>
MAIL

このパラメータと値は、アンパサンド(&)で結合することで複数設定することができます

パラメータを結合した例

<a href="mailto:info@prograbi.com?subject=PROGRABIに送信!&body=ご感想をお願いします。">MAIL</a>
    

本文に改行を入れる

本文の内容を改行させる場合は%0D%0Aを改行させたい位置に設定します。


<a href="mailto:info@prograbi.com?body=【氏名】%0D%0A【誕生日】">MAIL</a>
    

日本語の文字化け

パラメータに設定する値は日本語をそのまま設定することができます

しかし、メールを起動するアプリによっては日本語が文字化けしてしまうこともあり、ユーザーが起動するメールアプリやバージョンによって動作が異なります

そのため、メールリンクを本番で導入する場合は開発の対象とするデバイス、ブラウザ、メールアプリなどで動作確認が必要です。
しかし、これらに対応するためには多くの時間を必要とするため、重要な内容を確実に送信する必要がある場合はformタグとバックエンドアプリケーションを利用してメールを送信します

(おまけ)電話発信リンクを作成

a要素を使用して電話を発信することもできます。

次の例は、a要素を使って電話を発信するリンクを作成しています。


<a href="tel:086-207-2283">086-207-2283</a>
        

電話番号はすべて半角数字半角記号で入力します。
また、ハイフン(-)はあってもなくてもどちらでも結構です。

(おまけ)SMSリンクを作成

SMS(Short Message Service: エス・エム・エス)のリンクを作成することもできます。

ただ、このSMSの設定はAndroid(アンドロイド)とiOS(アイ・オー・エス)で書き方が異なります。

Android

<a href="sms:000-0000-0000?body=Hello, World">SMS</a>
    
iOS(8以降)

<a href="sms:000-0000-0000&body=Hello, World">SMS</a>
    
iOS(8以前)

<a href="sms:000-0000-0000;body=Hello, World">SMS</a>
    

デバイスやバージョンによって書き方が異なり、この書き方も将来変更される可能性もあります。

SMSを使用する場合も、メール送信同様にバックエンドアプリケーションを利用しましょう。

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。