aタグとは?HTMLを使ったリンクの作り方・書き方を初心者向けに解説する

この記事の概要

HTMLには、Webサイトのページとページをつなげる「リンク」という機能があります。リンクををクリックすると、別のページに飛ぶ事が出来ます。一番身近な例だと、Googleで検索した時に表示される青色のテキストがその「リンク」です。

この記事では、Webプログラマのアキ(@hackablejp )が、HTMLでリンクを作る書き方や方法をと、そのリンクをクリックしやすい(見やすい)ように、デザインをする方法を簡単に紹介します!

少し応用の話になりますが、aタグは別のWebページに飛ばすだけではなく、PDFファイルを開いたり、何かファイルをダウンロードしたりも出来るんですよ!

aタグの基本!: リンクとは?

まず、aタグについて解説する前に「リンク」と呼ばれるものについて解説します。aタグを理解する前の前提知識なので、飛ばさずに見てくださいね!

  1. インターネットには、沢山のページがあります。その数なんと1兆ページ以上!
  2. これらを管理するために、人が1つ1つURLを覚えてアクセスするのは大変です!
  3. そこで、1つのページURLを覚えたら、それに関連するその他のページのURLもわかる仕組みを考えました
  4. それが「リンク」と言われる機能です。
  5. もちろん、ドメインだけではなくパス同士でリンクすることも出来ます。
  6. 「リンク」の繋がりによって、文章をページごと分類出来るようになりました

更に、リンクによって文章の関連が機械でも理解できるようになったので、Googleのような検索エンジンが生まれたんですよ

aタグを使ったリンクの書き方・作り方: テキストで作成

リンクを作るには2つ必要になるものがあります。

  1. リンク先のURL
  2. リンクテキスト

「リンク先のURL」は実際に飛ばす先のURLです。このURLは別ドメインなら、https://〜〜から始まる形式の文字を使います。また、同じドメインなら /〜〜から始めるのもOKです!

「リンクテキスト」は、実際にクリックしてもらうテキストの事です。

それでは、実際にリンクを作ってみましょう!

STEP.1
aタグを書く

まず、下記のようにaタグ(<a></a>)を書きます。

STEP.2
リンク先のURLを設定する

そうしたら、その中に下記のようにhref="〜〜"と書きましょう。そして、〜〜の部分にURLを入れます。

また、<a href="〜〜"></a>のように、「a」と「href」の間には半角スペースを入れるようにします。全角スペースを使う人がたまにいるのですが、それでは動かないので注意してください

STEP.3
リンクテキストを書く

更に、実際にクリックするテキストを<a href="">〜〜</a>〜〜の部分に入れましょう。

完成!

完成形は、下記のようになります。リンク先のURLには「https://example.com」、リンクテキストには「エグザンプル ドット コム」を使っています。実際に使うときには、飛ばしたいURLとテキストを変更して使ってくださいね

aタグを使ったリンクの書き方・作り方: 画像で作成

次に、リンクを画像で作ってみましょう!

作り方は、テキストでのリンク作成方法とほとんど同じです

  1. aタグを書きます(前章と同じ)
  2. href="〜〜"を書きます(前章と同じ)
  3. <a href="">〜〜</a>の部分を書きます(ここが違う!)

3番目の<a href="">〜〜</a>〜〜は前章では、テキストをそのまま入れましたが、今回はここに画像を挿入します。画像を挿入するには、HTMLのimgタグを使います。

その前に、画像をインターネットのどこからでも見れるように、サーバーを用意してアップロードしなくてはいけません。初心者には結構大変なので、今回はサンプルを用意しました。

[サンプル画像: https://hackable.jp/〜〜〜]

この画像を使ってリンクを作成します。

imgタグのsrc="〜〜"の中に画像のURLを挿入して、そのimgタグ自体を<a href="">〜〜</a>に挿入します。

完成形は、下記のようになります。

[完成形ソースコードとイメージ図]

別タブで開くリンクをaタグで作ってみよう

先程作ったリンクは、クリックすると別のタブではなく見ていたタブでページが開かれます。amazonのページのように、クリックすると別のタブとして開くようにする時はaタグの中に<a href="〜〜" target="_blank">〜〜</a>のようにtarget="_blank"を挿入します。

<a href="〜〜" target="_blank">
    リンクテキスト
</a>

href="〜〜"target="_blank"の間には、半角スペースを入れます。ここでも全角スペースを使わないように注意しましょう。

実際に、別タブで開くテキストリンクを作ると、下記のようになります。

[リンクテキストの例]

これで、別タブで開くリンクを作ることが出来ました。

別タブで開くリンクは、今見ているページを開いたままに出来るので便利なのですが、すべてのリンクでtarget="_blank"を使うと、鬱陶しく感じる場合もあります。 そのページは、本当に別ページで開いたほうがいいのか、考えるようにしましょう。

参考ですが、別ドメインのページを開く時はtarget="_blank"を使ったほうが良い場合が多いですよ。

aタグで作ったリンクのデザインを変え方: 基本

aタグのデザインを変更するには「CSS」という言語を使います。

例えば、リンクの下線をを消したい場合は、下記のようなCSSを書きます。

[画像 リンク下線有りと無しの比較の画像]
a {
    text-decoration: none;
}

そのCSSを何処に書くかというと、HTMLに直接書く方法と、別ファイルから読み込ませる方法の2種類があります。

別ファイルから読み込ませる方法は、インターネット上の何処からでも見れるように、サーバーを設置してファイルをアップロードする等の前準備が無いと使うことが出来ません。そのような環境がない場合は、HTMLに直接書く方法を使いましょう。

HTMLにCSSを直接書く方法

HTMLに直接書くには、<head>のかなに<style>タグを使って、その中に書きます。実際に書くと、下記のようになります。

<!DOCTYPE html>
<html>
<head>
    <title>タイトル</title>
    <style>
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="https://example.com">リンクテキスト</a>
</body>
</html>

このままでは、Webページ上のすべてのリンクにtext-decoration: noneが適用されて下線が消えてしまうので、普通は「CSSセレクタ」と呼ばれるCSSの適用範囲を制御出来る書き方を使うことが多いです。

これは、記事の後半で少し解説しますね。

別ファイルからCSSを読み込ませる方法

別ファイルを用意して、そこから読み込む方法を解説します。

まず、CSSだけを書いたファイルを用意します。ファイル名は拡張子が「.css」になるようにしてください。(.cssではなくても仕組み上は可能ですが、.css以外を使うメリットはありません)

a {
    text-decoration: none;
}

次に、このファイルをサーバーにアップロードします。サーバーは安いものでOKです。初心者に扱いやすい「Conohaサーバー」や「さくらのレンタルサーバー」を使うのがいいでしょう。

サーバーにアップロードしたら、IPアドレスやドメイン名を使ったURLでcssファイルにアクセス出来るようにします。この部分は、サーバーによって設定が異なるので、割愛します。設定方法は「さくらのレンタルサーバー ホームページ」や「conoha Webサーバー」などで検索すると、情報を得ることが出来ますよ。

アクセス出来るURLが「 https://example.com/css/style.css 」だとします。これをHTMLファイルから読み込むHTMLファイルは下記のようになります。

<!DOCTYPE html>
<html>
<head>
    <title>タイトル</title>
    <link rel="stylesheet" href="https://example.com/css/style.css">
</head>
<body>
    <a href="https://example.com">リンクテキスト</a>
</body>
</html>

見ての通り、別ファイルで利用する場合は<link>という別のタグを使用することに注意しましょう!

特定のaタグだけデザインを変更するにはどうする?

先程のように、aタグに対してCSSを書くと、Webページ内のすべてのaタグのデザインが変わってしまいます。「一部分だけ!1つだけ変えたい!」といった場合は対応する事が出来ません。

そんな時は、classidを呼ばれる機能を使うと、対応することが出来ます。classidは、「HTML上のまとまりを表すタグのようなもの」です。

クラス名を使って特定の部分だけCSSを使う

例えば、下記のようにclassを使って1つのまとまりにlinksという名前をつけるには下記のようにします。

<div class="links">
    <a href="https://example.com/1">リンクテキスト1</a>
    <a href="https://example.com/2">リンクテキスト2</a>
    <a href="https://example.com/3">リンクテキスト3</a>
</div>

このようにまとまりを作っると、「linksの中のaタグ」を狙って、CSSを適用できるようになります。それを狙ったCSSは下記のようになります。

.links a {
    text-decoration: none;
}

.linksは「クラス名がlinksという部分の」という意味になります。

ID名を使って特定の部分だけCSSを使う

同じ要領で、idという機能も使えます。ただし、idは同じWebページ上で1回しか使うことが許されないので注意しましょう。何回使っても、動く場合もありますが高確率でバグに遭遇します。

idを使ったHTMLとCSSの例は下記のようになります。

<div id="links">
    <a href="https://example.com/1">リンクテキスト1</a>
    <a href="https://example.com/2">リンクテキスト2</a>
    <a href="https://example.com/3">リンクテキスト3</a>
</div>
#links a {
    text-decoration: none;
}

#linksは「ID名がlinksという部分の」という意味になります。

合わせて読みたい

その他にも、「子孫セレクタ」や「隣接セレクタ」など様々な方法があります。詳しくは下記でまとめいているので、クリックして見てください。

aタグで作ったリンクのデザインを変え方: 応用

ここでは、リンクテキストの下線を消す方法の他に、下記のような様々な方法を紹介します。

  1. リンクの色を変える方法
  2. カーソルを乗せた時の色を変える方法
  3. 画像リンクでマウスカーソルを乗せた時のデザインを変える方法
  4. 訪問済みのリンクデザインを変える方法
  5. リンクをボタン風に変える方法

リンクの色を変える方法

a {
    color: red;
}

リンクの色を変えるには、aタグに対してcolorを使って「色コード 又は 色名」を指定します。

赤くしたい場合はcolor: red;、灰色にしたい場合はcolor: gray;などを指定します。

また、色コードと呼ばれる16進数で色を表したコードを使うことも出来ます。例えば、色コードを使って白にしたければcolor: #ffffff;、水色寄りの青にしたければcolor: #3872B8;等を指定します。色コードを使うと、1677万色の中から選ぶことが出来、世の中のほとんどの色が表現出来ます。

具体例として、文字色が赤色のリンクを作成してみます。

[赤色のリンク作成例]

ちなみに、リンク色は基本的に青系がベストです。なぜなら、世の中のほとんどのリンクが既に青系の色で作られており、「それがリンクだ!」と認識しているからです。

リンク色の選択に迷った場合は、下記のオススメです。

  • 背景が白系の場合: #1a0dab
  • 背景が黒系の場合: #3ea6ff

その他、有名のサービスで使われているリンク色も紹介します。参考にどうぞ!

カーソルを乗せた時の色を変える方法

a:hover {
    color: red;
}

カーソルを乗せた時にデザインを変えるには、「CSSCセレクタ」の1つ:hoverを使うと実現出来ます。

[画像 hoverさせると実際にデザインがコロコロ変わっている画像]

色の変え方の前に、:hoverの書き方について少し解説しますね。

MEMO

:hoverは、見慣れない書き方だと思います。この:が付いている書き方を「擬似クラス」といいます。

本来、CSSではHTMLにclassidをつけてデザインを制御します。そのため、擬似クラス無しでは、マウスカーソルが要素の乗った時にjavascript等でそれを検知してclassを付与する必要があります。

これでは手間がかかってしまいます…。

このようなよく使うデザインはjavascript無しにCSS側から設定出来るための書き方が「疑似クラス」と呼ばれるものです。擬似クラスを使うと「要素が特定の状態の時」や「要素の出現パターン」を利用して、CSSから直接設定できます。

例えば、

  1. マウスカーソルが乗せられた時
  2. 左クリックしてから離すまで
  3. リンク先が訪問済みだった時
  4. 偶数で出現する要素のみ
  5. 1番目の要素のみ

等、指定できる指定できるものは様々です。

それでは、カーソルを乗せた時の色を変える方法を解説します。

:hoverは、様々なデザインを適用できるので、今回は「背景色、文字色」を少し変化させてホバーしていることわかりやすいようにデザインしてみます。

\ 本気でWeb制作をマスターするなら「CodeCamp」が断然おすすめ! /

  • 東証一部上場企業での研修実績あり!
  • NHKや日経などのメディア掲載あり!
  • オンラインレッスン満足度 No.1!
  • コスパ No.1!