【HTML5】aタグの使い方を覚えよう

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

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

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

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

aタグの使い方

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

開始タグと終了タグの間に画面に表示させたいテキストを設定します。

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


<a>PROGRABI</a>
        

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

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

href属性(必須)

href(Hypertext Reference: エイチレフ)属性に遷移先のアドレスを設定します。
この属性に何も設定しないとただのテキストとなってしまうため、設定は必須です。

         
<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属性が優先されるケースが多いようです。
また、aタグを使用しなければならないという制約もあり、使い勝手はid属性の方がいいでしょう。

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

  1. id属性を使用してアンカーを作成しよう!
  2. アンカーに移動する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">PROGRABI 本社番号</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を使用する場合も、メール送信同様にバックエンドアプリケーションを利用しましょう。

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

第四期生募集中

2021年2月スタートの第四期生を募集中です。
詳細は各コースをご覧ください。

分からないところは聞いてみよう

24時間いつでも質問できる

「分からない」ところを調べてもなかなか理解できないかもしれません。PROGRABIなら24時間いつでも質問できます。

モチベーションを継続する

「分からない」が続くと継続することは難しいです。PROGRABIなら毎週授業があるため継続して学習することができます。

複数人参加可能な授業

PROGRABIは複数人で授業に参加することができます。一人では気づけない疑問や問題、その解決方法など他の受講者から得られることが多くあります。

目標を達成する

コースの課題を制作することで自らの力でコーディングできる力を身に付けます。目標の達成に向けて徹底的にサポートします。