リンクタグ(aタグ)とは？基本的な使い方やデザインの変更方法を紹介
リンクタグとは
リンクタグとは、現在表示しているWebページから、テキストや画像など一部の要素をクリックした際に、別のページや同一ページ内の別の位置に素早く移動できるようにする際に設定するタグです。
ほかにも、リンクタグを設置した箇所をクリックすることでファイルをダウンロードしたり、メール画面を開いたりするといったアクションも可能なため、Webサイト上のさまざまな場所で使われています。
なお、リンクタグは<a href="">～</a>のかたちで記述するため、aタグとも呼ばれます。
リンクタグの表示例
リンクタグはテキストに設定した場合、Webページ上では以下のように表示されます。
バンソウは、あなたのマーケティングサポーターです。
上記の文章では「バンソウ」の箇所に、バンソウのトップページである「https://www.sales-dx.jp/」のリンクを設定しています。
ユーザーが「バンソウ」をクリックすると、ユーザーの画面は現在表示されているページから、バンソウのトップページに遷移します。
リンクタグの使い方
ここまで、リンクタグの概要についてご紹介しました。ここからは、リンクタグの基本的な記述方法などの使い方をご紹介します。
なお、実際にタグを利用する際は、以下でご紹介するタグの記述例のうち、青文字で記述している箇所を任意の内容に変更してください。
別のページへ移動する
先述のとおり、リンクタグを設置する際は、<a href="">～</a>の形式で記述します。
href属性の属性値（"と"の間）には遷移先のURLを記入し、タグで囲まれた箇所にリンクを設定するテキストを記述することで、テキスト形式のリンクを作成できます。
■記述例
<a href="https://www.sales-dx.jp/">バンソウ</a>は、あなたのマーケティングサポーターです。
別タブで開くよう設定する場合
先ほどご紹介したタグは、リンクをクリックした際に、同一のタブでページが遷移するようデフォルトで設定されています。
新しくタブを開いたうえでページを遷移させたい場合は、以下のように、<a href="">に「target="_blank"」の記述を加え、target属性を付与します。
■記述例
<a href="https://www.sales-dx.jp/" target="_blank">バンソウ</a>
は、あなたのマーケティングサポーターです。
同一ページ内の画面上部(トップ)へ移動する
ページを読み進めたユーザーを、画面上部（トップ）に移動させたい場合は、<a href="">内を特定のURLではなく、「#」と記述します。記述例は、以下のとおりです。
■記述例
<a href="#">トップに移動する</a>
同一ページ内の指定した位置に移動する(ページ内リンク)
ページ内の特定の見出しに移動させるなど、ページ内リンクを作成する場合は、リンクタグとあわせて、遷移先となる要素にid属性を付与する必要があります。
例えば、「ページ内リンクの作成方法はこちら」というテキストをクリックすることで、「ページ内リンクを作成する」という見出しタイトルのh2要素に遷移させたい場合は、以下のように記述します。
■記述例
<a href="#section1">ページ内リンクの作成方法はこちら</a>
<h2 id="section1">ページ内リンクを作成する</h2>
上記のように、<a href="">内に記述する属性値には、「#」が必要になるため、記述し忘れることのないようご注意ください。
ページ遷移以外のリンクタグの使い方
先ほど触れたように、リンクタグでは特定のページに遷移する役割を持つだけでなく、ファイルをダウンロードしたり、メールソフトを開いたりするといったアクションも可能です。
アクションごとのリンクタグの設定方法は、次のとおりです。
ファイルをダウンロードする
リンクをクリックすると同時にファイルダウンロードを始めるように設定する場合は、<a href="">にdownload=""の記述を加え、download属性を付与します。
■記述例
<a href="bansou/sample.pdf" download="バンソウ資料.pdf">資料をダウンロードする</a>
なお、download属性内には値（ファイル名）を指定せずとも、ファイルのダウンロードは設定可能です。しかし、download属性を設定することで、設定した値の名称でファイルをダウンロードさせられるようになります。
メールソフトを開く
リンクをクリックした際にメールソフトを起動させるよう設定する場合は、href属性内にmailto:とメールアドレスの記述を加えます。
■記述例
<a href="mailto:sample@bansou.com">メールで問い合わせる</a>
ただし、リンクタグからメールソフトを起動することで、文字化けが起こりやすくなったり、迷惑メールやスパムメールの標的になりやすくなったりすることから、現在はリンクタグを使用するのではなく、専用の問い合わせフォームをWebサイト内に設置するなどの方法がよく使われています。
電話をかける
リンクをクリックすることで電話を発信させるよう設定する際は、href属性内にtel:と電話番号の記述を加えます。
■記述例
<a href="tel:0123-xxx-xxx">電話で無料相談</a>
なお、電話番号はハイフンあり・ハイフンなしどちらの書き方でも問題ありません。
国際電話を設定する場合は、「tel:+81-90-xxxx-xxxx」のように国番号を入れることで、日本国外の電話番号も記述できます。
リンクタグのデザインの変更方法
ここまで、基本的なリンクタグの記述方法についてご紹介しました。リンクタグは、CSSを用いることで、リンクの文字色を変更するなどの装飾も行えます。
リンクの文字色の変更
リンクの文字色を任意の色に設定したい場合は、CSSでリンクタグ（aタグ）を指定し、変更したい色のカラーコードを記述します。
■HTMLの記述例
<a href="https://www.sales-dx.jp/">バンソウ</a>は、あなたのマーケティングサポーターです。
■CSSの記述例
a{
color: #ff0000;
}
なお、CSSで要素を指定する際は、aタグの親要素ではなく直接aタグを指定するようご注意ください。
ホバー時に特定のスタイルを適用する
リンクにマウスカーソルを合わせたとき（ホバー時）に文字色が変わるなど、特定の装飾に変更したい場合は、CSSでaタグを指定する際に、「a:hover」の書き方で指定します。
例えば、ホバー時にテキストの文字色を変更する場合は、以下のように記述します。
■HTMLの記述例
<a href="https://www.sales-dx.jp/">バンソウ</a>は、あなたのマーケティングサポーターです。
■CSSの記述例
a:hover{
color: #ff0000;
}
テキストの下線をなくす
リンクを設置した際は、テキストの下に下線が入ることがあります。下線を消したいときは、CSSでaタグを指定し、以下のように「text-decoration: none;」と記述することで、下線が削除されます。
■HTMLの記述例
<a href="https://www.sales-dx.jp/">バンソウ</a>は、あなたのマーケティングサポーターです。
■CSSの記述例
a{
text-decoration: none;
}
リンクタグの絶対リンクと相対リンクとは
リンクタグでは、絶対リンクと相対リンクの2種類を設定できます。
絶対リンクとは「https://」で始まる部分をすべて記述するリンクで、自社サイトから外部サイトへリンクを張る際は、絶対リンクで記述する必要があります。
一方で、相対リンクは現在のページから見た相対的な位置のみを記述するため、「https://」やドメイン部分は省略でき、自社サイト内の別のページへ誘導する際に便利です。
それぞれのリンクの記述方法や、使用するメリット・デメリットは次のとおりです。
リンクの記述方法
絶対リンクは、ここまでの例でご紹介したものと同様に、「https://www.sales-dx.jp/service/contentsseo/」などURLをすべて記述します。
■絶対リンクの記述例
<a href="https://www.sales-dx.jp/service/contentsseo/">バンソウ</a>
は、あなたのマーケティングサポーターです。
現在表示しているページが「https://www.sales-dx.jp」で、「https://www.sales-dx.jp/service/contentsseo/」に向けたリンクを設定したい場合、相対リンクでは現在のページのURLと共通する部分を省略できます。
■相対リンクの記述例
<a href="./service/contentsseo/">バンソウ</a>は、あなたのマーケティングサポーターです。
「./」はカレントディレクトリといい、現在のフォルダを表す際に用いられる記述です。なお、カレントディレクトリを用いない場合は、以下のように記述します。
■相対リンクの記述例
<a href="service/contentsseo/">バンソウ</a>は、あなたのマーケティングサポーターです。
絶対リンクと相対リンクのメリット・デメリット
絶対リンクと相対リンクにはそれぞれ記述しやすさやURLが変更となったときの対応の手間など、メリットやデメリットが異なります。それぞれの特徴を踏まえて、どちらのリンクを使用するか決めるとよいでしょう。
絶対リンクのメリット・デメリット
絶対リンクは、URLをすべて記述するため、URLがどのような階層になっているのかを把握しやすいです。また、URLの入力時も、該当のページのURLをそのままコピー＆ペーストすればよいため、入力ミスを減らせる点が特長です。
しかし、記述が長くなるため、URLの長さによってはコードが複雑になってしまうこともあるでしょう。また、ドメインが変更となった場合は、URLの修正対応に手間がかかる場合があります。
相対リンクのメリット・デメリット
相対リンクは、ドメイン部分など現在のページと共通する箇所を省略できるため、コードを簡潔にまとめられます。
一方で、URLの変更や入力ミスなどによるリンク切れを起こしやすくなるため、相対リンクの記載時は記述に間違いがないか入念に確認しましょう。
リンクタグのrel属性とは
ここまで、リンクタグで使用できるリンクの記述方法についてご紹介しました。
ほかにも、リンクとあわせて記述する要素のひとつにrel属性があります。rel属性を用いることで、ページを閲覧するユーザーではなく検索エンジンに対してさまざまな指示が行えます。
ここでは、特に覚えておきたい「noreferrer」「noopener」「nofollow」の3つの値をご紹介します。
noopener
noopenerは、外部リンクを新しいタブで開くように設定した際に使う値です。
先述のとおり、新しいタブでリンク先のページを開く際はtarget="_blank"を使用しますが、一部ブラウザや古いブラウザでは、target="_blank"によってリンク先のページを開いた場合、window.openerというオブジェクトを使用することでリンク元のページが操作できてしまい、ハッキングや不正アクセスが行われる恐れがあります。
このとき、rel属性内にnoopenerを記述することで、window.openerによるリンク元の操作をブロックできます。
■記述例
<a href="https://www.sales-dx.jp/" target="_blank" rel="noopener">バンソウ</a>
は、あなたのマーケティングサポーターです。
なお、WordPressなどのCMSを使用してリンクを設定する場合は、新しいタブで開くように指定した際に、自動的にnoopenerも設定されます。
noreferrer
noreferrerは、リンク先のページに遷移した際にどのページから来たのか、参照元のリンク情報を渡さないように設定できる値です。
アクセス解析ツールであるGA4では、ユーザーがどのページから自社サイトにアクセスしたかなどを参照元から調べられますが、noreferrerを設定したリンクに対してはリンク元の情報が渡されないため、計測できなくなります。
■記述例
<a href="https://www.sales-dx.jp/" target="_blank" rel="noreferrer">バンソウ</a>
は、あなたのマーケティングサポーターです。
nofollow
nofollowは、検索エンジンに対して、リンク先のページを巡回しないように指示する値で、SEO対策でよく用いられます。
検索エンジンはリンクでつながれたページ同士の関連性もチェックしてページを評価するため、関連性の薄いページへのリンクや質の低いページへのリンクにはnofollowを設定することで、自社サイトの評価の低下を防げます。
■記述例
<a href="https://www.sales-dx.jp/" target="_blank" rel="nofollow">バンソウ</a>
は、あなたのマーケティングサポーターです。
rel属性は同時に複数の値を設定可能
ここまで、主に使用するrel属性の値についてご紹介しました。これらの値は、rel属性内に複数設定できます。
例えば、noopener、noreferrer、nofollowを同時に使用する場合は、半角スペースを入れて、以下のように記述します。
■記述例
<a href="https://www.sales-dx.jp/" target="_blank" rel="noopener noreferrer nofollow">
バンソウ</a>は、あなたのマーケティングサポーターです。
まとめ
この記事では、リンクタグの基本的な使い方やデザインの変更方法、設定できるリンクの種類などをご紹介しました。
リンクタグは、通常のページ同士をつなぐリンク以外にも、ファイルをダウンロードさせるといった設定も可能です。それぞれの記述方法やデザインの変更方法などは、ぜひ記事内でご紹介した記述例を参考にご活用ください。
