この記事では、「ハイパーリンクを設定するaタグ」について解説していきます。
HTMLにはハイパーリンクを設定するaタグがあります。aタグはページ内リンクを設定したり、外部リンクにアクセスしたりすることができます。外部リンクにアクセスする場合には注意点があるので、その点についても解説します。
この記事のゴールは「ハイパーリンクについて理解し、リンク設定ができるようになること」です。いっしょに学習していきましょう。
HTMLにはaタグだけではなく、headタグや見出しタグなどさまざまなタグがあります。それらについては下記の記事で解説していますので、ご一読ください。
- aタグを使ったリンクの実装方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
HTMLのaタグとは：ハイパーリンクを設定する
aタグはページを移動するハイパーリンクを設定できます。aタグのaはanchor（アンカー）の頭文字です。anchorは船の錨（いかり）を意味しています。リンク先をたぐり寄せるイメージです。
aタグにhref属性を適用するとリンク先を指定することができます。
href属性はhypertext reference（ハイパーテキスト リファレンス）の略称で、リンク先を指定することができます。
基本書式
<a href=”リンク先のパス”>アンカーテキスト</a>基本書式にコードを当てはめると次のようになります。
<a href="index2.html">テキストが入ります。</a>出力結果
aタグに囲まれた文字列はアンカーテキストと呼ばれます。
aタグのハイパーリンクに外部リンクを設定する方法
aタグのhref属性には、外部サイトのリンク先をURLで指定できます。
<a href="https://zero-plus.io/">Zeroplusへ</a>リンクをクリックすると、ZeroPlusのWebサイトにページが遷移します。
リンク先を新しいウインドウで表示する方法
aタグにはhref属性の他に様々な属性を設定することができます。その一つがtarget属性です。
通常aタグをクリックすると、現在いるページから新しいページに遷移してしまいます。aタグにtarget属性を付与すると、新しいウインドウが開いて、そこに新しいページが表示されます。
<a href="https://zero-plus.io/">Zeroplusにページが移動します</a>
<a href="https://zero-plus.io/" target="_blank">別ウインドウが開きます。</a>出力結果
See the Pen href-link by ZeroPlus (@zeroplus-programming) on CodePen.
target属性には”_blank”を適用します。ただし、”_blanck”を指定する場合は、次のようにrel="noopener noreferrer"と併せて追記するようにしましょう。
<a href="https://zero-plus.io/" target="_blank" rel="noopener noreferrer">別ウインドウが開きます。</a>rel属性（relationship)は、リンク先とリンク元の関係性を示すものになります。
noopenerを適用すると、リンク先からwindow.openerをリンク元から参照できなくなります。
リンク先にリンク元のリンク情報が送られなくなり、セキュリティ対策、パフォーマンス向上につながります。別タブで開く設定をする場合は、上記の属性を設定しておきましょう。
aタグでページ内リンクを設定する方法
aタグでページ内リンクを設定する場合、次のようになります。
<a href="#id1">セクションに移動します</a>
<section class="box" id="id1"></section>.box {
width: 200px;
height: 200px;
background: orange;
margin-top: 1000px;
}出力結果
See the Pen ページ内リンク by ZeroPlus (@zeroplus-programming) on CodePen.
href属性にid名を指定します。aタグをクリックすると、id名と紐付けられた場所に移動します。
相対パスでサイト内にリンクする方法
href属性のリンク先は、相対パスと絶対パスの2つの方法で設定できます。
相対パスは、表示しているファイルを起点に読み込みたいファイルのパスを指定する方法です。
index.htmlを起点とした場合、下記はどちらも同じフォルダ内にリンクする場合の記述になります。
<a href="index2.html">index2.htmlにアクセス</a>
<a href="./index2.html">index2.htmlにアクセス</a>
下記の場合、index.htmlと同階層にあるpageフォルダの中にあるindex2.htmlにリンクする記述になります。
<a href="page/index2.html">index2.htmlにアクセス</a>
下層のindex2.htmlを起点に、上層のindex.htmlファイルにリンクする場合は次のようになります。
<a href="../index.html">index.htmlにアクセス</a>
上位階層にリンクする場合は、../ に続けてパスを記述します。2つ以上の上位階層にリンクする場合は、../../ に続けて指定します。
一方で「絶対パス」は、読み込みたいファイルや外部リンクをURLで指定する方法です。
画像でページ遷移する方法
画像にハイパーリンクを設定してページにリンクすることができます。
コードは下記になります。
<a href="index2.html">
<img src="images/dummy.png" alt="">
</a>img {
width: 100%;
height: 100%;
display: block;
}
a {
max-width: 400px;
cursor: pointer;
display: block;
}出力結果
画像をクリックすると、index2.htmlにリンクすることができます。imgタグをaタグで囲むことで画像にハイパーリンクを設定することができます。
この方法では、例えば企業のロゴ画像をクリックするとWebサイトのトップに戻ったり、画像で作成されたボタンに対してハイパーリンクで任意のページに飛ばす、などができるようになります。
aタグにハイパーリンクを設定してみよう
aタグのハイパーリンクの設定の知識をふまえて、次のようなディレクトリのとき、index.htmlでaタグを設定してみましょう。
設定するaタグは2つで、条件は次のようになります。
- クリックしたら、about.htmlに遷移する。
- クリックしたら、https://zero-plus.io/media/web-roadmap/ の記事に遷移する。ただし、別タブで開くこととする。
<a href="">about.htmlにアクセス！</a>
<a href="">Web制作ロードマップ記事にアクセス！</a>aタグのリンク先を設定することができたでしょうか？
以下は、リンク先設定例になります。
<a href="page/about.html">about.htmlにアクセス！</a>
<a href="https://zero-plus.io/media/web-roadmap/" target="_blank" rel="noopener noreferrer">Web制作ロードマップ記事にアクセス！</a>
まとめ
aタグのハイパーリンクについて解説しました。特に遷移先を別タブで開く場合はtarget属性をつける必要がありますので、注意してください。
HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
ハイパーリンクを設定するaタグまとめ
- aタグはハイパーリンクを設定できる
- 別タブでウィンドウを開く場合は、taget属性をつける
- target属性をつける場合は、noopenerとnoreferrerをつける
- ページ内リンクを設定できる
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
