LINEで現役エンジニアに直接質問してみよう!登録無料

HTML aタグとは?hrefを使ったリンクの作成する方法

この記事の概要

この記事では、HTMLでWebページの一番基本的な機能である「<a>タグでリンクを作成する方法」を解説します。イラストを豊富に使用しているので、ザクザク行けば1分ぐらいで<a>タグの基本的な使い方が理解出来ます。

PDFファイルを開く、ファイルをダウンロードする、メールを起動させるなど、<a>タグを使った応用的な使い方も解説していきます。

たくさん知識を詰め込みましたが、一度に全部覚える必要はありません。ザックリと「このようなものがあるんだかー」と心の片隅においておけば大丈夫です。

  • HTMLの<a>って書いてある部分の役割・意味を知りたい 😭
  • HTMLを書いてみたいけど、基本の<a>タグがよくわからない 👻

というHTMLに詳しくない初心者向けの内容ですので、気張らずに読んでくださいね!

HTMLのaタグで作るリンクとは?

HTMLのリンクとは、クリックしたりタップすると別の記事やページに飛ぶテキストや画像のことです。

Webサイトを1度でも使ったことがある人はみんな使ったことのあると思います。

例えば、下記のような画像やテキストが「リンク」です。

HTMLの<link>タグとの違いは?

HTTMLには<link>というタグもあります。<a>のリンクと<link>のリンクはどう違うのでしょうか?

<link>のリンクは、CSSなどの外部ファイルを指定して、Webページに読み込ませるためのタグです。

一方で、<a>のリンクは、外部のページに移動するためのタグです。

HTMLでaタグを使ったリンクの書き方

一に、HTMLを使ったリンクの書き方の手順をまとめます

  1. リンクにしたい内容を<a>タグで囲む
  2. href属性を書く
  3. 飛ばしたいリンク先のURLを設定する
  4. 完成
STEP.1
リンクにしたい内容を<a>タグで囲む

リンクにしたいテキストや画像を<a>タグで囲みましょう!

HTMLではスペースが無視されるので、このようにスペース(インデント)を入れて見やすくしてもOKです。

STEP.2
href属性を書く

href属性を入れましょう!

<a>タグにhref=""と書きます。

ちなみにhrefは「エイチレフ」と読みます。

MEMO

なお、<ahref=""の間にはスペースを必ず入れてくだいさい。でないと正常に機能しません。

STEP.3
飛ばしたいリンク先のURLを設定する

href属性の中に飛ばしたい先のURLを書きましょう!

https: //から始めると、どのWebページでも同じリンクに飛ぶようになります。/から始めると、同じドメインのそのパスに飛ぶようになります。

完了!

このようなリンクが完成します。

画像をリンクにしよう

先程テキストをリンクにしましたが、同じように内容を画像に変更すれば画像のリンクを作成できます。

<a href="https://hackable.jp/">
<img src="https://hackable.jp/s3/2020/3/a48ef3d2-5d1a-4307-91e0-f141ae0219bb.png">
</a>

リンクを文章中に設定しよう

もちろん、文章中にリンクを設定することも出来ます。

<p>テキスト中に「TOPページ」へのリンクを設定</p>

テキスト中に「TOPページ」へのリンクを設定

画像とテキストを同時にリンク化しよう

内容には画像とテキストを同時に設定し、リンク化することもできます。

<a href="https://hackable.jp/">
  <img src="https://hackable.jp/s3/2020/3/a48ef3d2-5d1a-4307-91e0-f141ae0219bb.png">
  <p>画像とテキストのリンク</p>
</a>

href属性に書くパスの種類

href属性書けるパスには3種類あります。

  1. URL
  2. 絶対パス
  3. 相対パス
  4. ページ内の特定要素を指定

URL

URLは「http: //〜」や「https://〜」から始まる文字列のことです。この書き方を使うと、別のサイトにリンクを張ることができます。

絶対パス

絶対パスは「/」から始まる文字列のことです。同じドメインでリンクを張る時に使います。

もちろん、同じドメインならURLの書き方でリンクを張ってもいいのですが、その場合、ドメイン名を変更した場合、大改修をしなくてはならないので注意が必要です。

相対パス

相対パスは今のHTMLページから相対的な場所にリンクを張るときに使います。

Web作成現場では、相対パスがあまり使われることはありません。
殆ど、絶対パスかURLが使われます。

新しいタブで開くリンクを作成する

Amazonのサイトのように、リンクをクリックすると新しいタブで開くリンクをHTMLで設定することができます。

<a target="_blank" href="https://hackable.jp/">
    内容
</a>

この設定にはtarget属性をつかいます。

このコードで書くと、このようになります。

MEMO

あまり多用しすぎると鬱陶しく感じてしまう場合もあります。利用箇所を迷っている場合は、いっそのこと使わない方がいいでしょう。

target属性には_blank以外にないの?

結論から言うと、他にもあります_blankの他には_self _top _parent があります。

_selftはデフォルトで設定されている値です。なので意識する必要はありません。

その他の_top_parentは使う機会はまずありません。

この設定がブラウザにどのように影響するのかは、下記サイトが参考になります。

参考 一般的なターゲットの説明Adobe

HTMLのaタグの応用的な使い方

aタグはリンクへ飛ばすだけではなく、ページ内ジャンプしたり、ファイルを開いたり、電話を書けたり色々な使い方ができます。

ページ内ジャンプする方法

同じページ内の特定の場所にジャンプするリンクを設置する方法を紹介します。これを「ページ内リンク」といいます。

ページ内リンクはHTMLのaタグとhrefを使って動作させることができます。

<p>色々なコンテンツを追加します</p>   

まず、普通にコンテンツ作りましょう

<div id="content1">
    <p>色々なコンテンツを追加します</p>   
</div>

作ったコンテンツを<div>タグで囲み、id属性を付与します。idの名前はわかりやすければ、英数字のどんな名前でも大丈夫です。

<a href="#content1">ページ内リンクです</a>

先程idを付けた部分まで移動するページ内リンクを作成します。

<a>タグのhref属性に「# + id名」を書きましょう。

これで、ページ内リンクの完成です。

idの名前はcontent1ではありませんが、実際にページ内リンクを作成してみました。

ページ内リンクのスクロール方法

ページ内リンクでジャンプ先までスムーズにスクロールさせる方法を2種類紹介します。なお、このようなスクロールを「スムーズスクロール」といいます。

  1. CSSの「scroll-behavior」を使う
  2. JavaScriptを使う

CSSの「scroll-behavior」を使う

html{
    scroll-behavior : smooth;
}

htmlに対して「scroll-behavior : smooth;」を設定します。これだけで、スムーズなアニメーション風のスクロールになります。

MEMO

但し、ブラウザによっては対応していないので注意しましょう!

対応ブラウザを調べるには「Can I use」を使います。

対応表を見ると、「IE」「Edge」「Safari」では対応していないことがわかります。このブラウザにも対応したい場合は、JavaScriptの方法を使いましょう。

JavaScriptを使う

JavaScriptを使う場合は、下記のようなライブラリを活用した方法を下記サイトで確認できます。

PDFファイルを開く

PDFファイルを開くボタンも<a>タグで作ることができます。作り方はpdfファイルのURLやパスをhref属性に設定するだけです。

ソースコード

<a href="https://hackable.jp/i/b73adfd6-fc94-4f70-9f6d-4c7437064880_compressed.pdf" target="_blank">
PDFを開く
</a>

ブラウザ表示

PDFの場合target="_blank"を設定しなくても、Chromeでは自動的に別ダブで開きます。ただ、バージョンが変わるとこの部分の挙動も変化する可能性があるので、target="_blank"をつけるようにしましょう!

注意
同じドメインからのリンクでないと、セキュリティ上の問題からPDFを開けない場合があります。

PDFファイルをダウンロードさせる

PDFファイルをダウンロードするには、download属性を使います。例えば、download="sample.pdf"というのを追加すると、「sample.pdf」という名前でダウンロードすることができます。

ソースコード

<a download="sample.pdf" href="https://hackable.jp/i/b73adfd6-fc94-4f70-9f6d-4c7437064880_compressed.pdf" target="_blank">
PDFを開く
</a>

ブラウザ表示

タップしたら電話をかける

リンクをクリックすると、スマホの電話番号を自動的に入力してくれたり、skipeを開いてくれたりする機能を簡単に設定することができます。

これを「電話番号リンク」といいます。

ソースコード

<!-- 国内ならそのまま入力 -->
<a href="tel:08012345678">08012345678</a>
 
<!-- 国際電話番号も設定することができます -->
<a href="tel:+491570156">+49 157 0156</a>

ブラウザ表示

電話番号にどのような形式を使うことができるのかは「RFC 3966(英語)」に仕様が記載されています。

タップしたらメールを起動する

メールを送信するために、メーラーを起動させるリンクをmailto:を使って作成することができます。

ソースコード

<a href="mailto:[email protected]">田中さんにメールを送る</a>

mailto:の後に設定できるメールアドレスの形式は「RFC 6068(英語)」で仕様が記載されています。

ダミーリンクの存在(参考程度に)

リンクのように見せかけて、何も反応がないリンクがWebページには存在します。そのようなリンクを「ダミーリンク」と言います。

ソースコード

<a href="javascript:void(0);">ダミーリンク</a>

ブラウザ表示

ダミーリンクは、javascriptを使って何かしらの処理をさせたい場合に使います。

これらのライブラリとEvent.preventDefault() Event.stopPropagation()といったJavaScriptとセットで使われることがよくあります。心の隅で覚えておきましょう。

CSSでHTMLのaタグリンクのデザインを変える

次にリンクのデザインをCSSを使って変える方法を紹介します。

リンクをどのようなデザインに変えるのかによってCSSの内容は変わりますが、基本的に下記の流れで行います。

  1. リンクタグ特有の下線や色を消す
  2. リンクタグの見た目をデザインする
  3. カーソルを乗せた時のデザインを変える(:hover)
  4. 訪問済みリンクのデザインを変える(:visited)

また、この章からCSSを使います。CSSの基礎は下記の記事で解説しているので参考にしてくださいね!

【初心者向け】CSSとは?10分でわかる基礎と書き方をイラストを使って解説 CSSセレクタとは?使い方と書き方解説

リンクタグ特有の下線や色を消す

まずはデザインの邪魔になるリンクタグ特有の下線や色を消しましょう。

下線を消す

a {
    text-decoration: none;
}

まずは、リンクタグの下線を消しましょう。通常、特に何も指定していない時には下線が引かれます。

下線を消すには、text-decoration: none;を指定します。

実際に使ってみると、下記のように下線がなくなっているのがわかります。

MEMO

消した下線を復活させたいときには、text-decoration: underline;を指定します。

MEMO

マウスカーソルがリンクに乗った時、下線が表示されるのに気づいたでしょうか?

乗った時にも下線を表示させないようにするには、CSSを追加で書く必要があります。

どのような内容を書けばいいかは「カーソルを乗せた時のデザインを変える(:hover)」で解説しています。

色を消す(変える)

a {
    color: #333;
}

リンクの色を変えるにはcolor:を使います。

今回は色指定として、#333を指定していますが、color:の値には色コードか色名を指定できます。

例えば、赤くしたい時には、red#f00を指定します。
緑色にしたい時は、green#008000を指定します。
黄緑色にしたい時は、#99ff00を指定します。

色の組み合わせは1677万通りあり、フルカラーの写真の色ならほとんど再現出来ますよ。

実際に下記の例で、リンクを黒色にしてみました。

色選びに迷ったら、まずは#333に設定してくださいね!

リンクタグの見た目をデザインする

リンクタグをあなたのデザインしたい形にしましょう!

今回は例としてボタン型のリンクを作成してみます。

a {
  /* ここは前回設定したのと同じ */
  text-decoration: none;
  color: #333;

 /*  ここがボタン型にデザインする部分 */
  display: inline-block;
  padding: 0.8em 1em;
  border: 2px solid #bbb;
  border-radius: 5px;
}

これを実際に設定してみました。

カーソルを乗せた時のデザインを変える(:hover)

a:hover {
    text-decoration: none;
    background: #ddd;
}

カーソルを乗せる事を「ホバー」と言います。ここではホバー時のデザインを変えましょう。

今回は背景を灰色に変化するように設定します。

実際に設定してみました。


👷これより下の内容は旧記事で改修中🏗です👷


HTML aタグのデザイン方法(基本編)

次に、<a>タグのデザインを変更する方法を紹介します。

  • リンクの下線を消す
  • リンクのテキストの色を変える
  • 画像をリンクにする
  • 画像リンクのhover時の見た目を変える

リンクの下線を消す

まずは、リンクの下線を消す方法を紹介します。
ボタン風リンクやカード風リンクなどを作る基礎になるので、一番先にマスターしましょう。

下線を消すには、CSStext-decorationをつかいます。

ソースコード

ブラウザ表示

おまけ: 特定のリンクの下線を消すには?

特定のリンクのスタイルを変更したい場合、idclassを使いましょう。

ソースコード

ブラウザ表示

リンクのテキストの色を変える

リンクのテキストの色を変えるには、CSScolorを使います。

ソースコード

ブラウザ表示

画像をリンクにする

リンクはテキストだけではなく画像も使うことができます。

画像はそのままだとサイズが合わない場合もあるので、CSSのwidthを使って調節しましょう。heightが未指定なら、アスペクト比が維持されたまま縮小・拡大ができます。

ソースコード

ブラウザ表示

画像リンクのhover時の見た目を変える

画像のリンクのママだと、見た目上その部分がクリックできるのかわかりません。
そこで、マウスカーソルが画像の上に来た時に、見た目が変わるように変更しましょう。

今回は、「透明度」を変更するopacityを使います。

ソースコード

ブラウザ表示

HTML aタグのデザイン方法(応用編)

最後に、もっと応用的なデザインとして、下記の2つを紹介します。

  • フラットデザインなボタン型のリンク
  • フラットデザインなカード型のリンク

フラットデザインなボタン型のリンク

ボタン型のリンクを作りにはポイントが2点あります。

  1. display:block;又はdisplay:inline-block;を指定する
  2. text-decoration: none;を指定する

この2つを守って、後はお好みで装飾すれば、ボタン型のリンクを作ることができます。

ソースコード

ブラウザ表示

フラットデザインなカード型のリンク

カード型のリンクは、作る難易度が上がりますが、基本的にはボタン型のリンク作成と同じです。

  1. display:block;又はdisplay:inline-block;を指定する
  2. text-decoration: none;を指定する

これらを忘れないように指定して、画像やテキストを配置し、お好みで装飾してください。

カード型のリンクは「bulma – Card」や「Bootstrap – Cards」を使うと簡単にできます。自分でリンクを作る際にも、これらを参考にすると作りやすいと思います。

ソースコード

ブラウザ表示

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。