HTMLのリンク設定方法！aタグの基本からCSSでの装飾まで解説

HTML リンクとは

Webページの根幹をなす「ハイパーリンク」。このリンクがあるからこそ、私たちは様々な情報を自由に行き来できます。HTMLでこの重要なリンク機能を実現するのが<a>タグ（アンカータグ）です。

この記事では、<a>タグの基本的な使い方から、実用的な応用テクニック、さらにはCSSを使ったおしゃれなデザイン方法まで、初心者がつまずきやすいポイントも押さえながら、網羅的に解説していきます。

この記事を読み終える頃には、あなたはWebページに自由自在にリンクを設置できるようになっているでしょう。

HTMLリンクの基本

まずは、最も基本的なテキストリンクの作り方をマスターしましょう。HTMLのリンクは<a>タグで作成し、href属性でリンク先のURLを指定します。
基本コード

<a href="https://ninjacode.work/">忍者CODEの公式サイトはこちら</a>

表示結果
忍者CODEの公式サイトはこちら
<a>と</a>で囲まれた「忍者CODEの公式サイトはこちら」というテキストが、クリック可能なリンクになります。

HTMLリンクの応用テクニック

基本を覚えたら、次はより実用的なリンクのテクニックを見ていきましょう。

別タブで開く (target)

<target="_blank">属性を追加すると、ユーザーがリンクをクリックした際に新しいブラウザタブでページが開かれます。自分のサイトからユーザーを離脱させたくない場合に有効です。

<a href="https://ninjacode.work/" target="_blank" rel="noopener noreferrer">新しいタブで開く</a>

ページ内リンク

長いページの特定の見出しへジャンプさせたい場合に使います。移動先の要素にid属性で名前を付け、href属性でid名を指定します。

<!-- リンク元 -->
<a href="#section2">セクション2へ移動</a>

<!-- 移動先 -->
<h2 id="section2">セクション2</h2>
<p>ここにコンテンツが入ります。</p>

画像リンク

<a>タグで<img>タグを囲むことで、画像全体をクリック可能なリンクにできます。

<a href="https://ninjacode.work/">
<img src="logo.png" alt="忍者CODEのロゴ">
</a>

メール送信 (mailto:)

href属性の値にmailto:メールアドレスを指定すると、クリックした際に既定のメールソフトが起動します。

<a href="mailto:contact@example.com">お問い合わせはこちら</a>

電話発信 (tel:)

スマートフォンで閲覧した際に、クリックすると電話を発信できるようにします。

<a href="tel:012-345-6789">012-345-6789</a>

ダウンロードリンク

download属性を追加すると、リンク先のファイルを閲覧するのではなく、ダウンロードさせることができます。

<a href="document.pdf" download="資料.pdf">資料をダウンロード</a>

CSSによるリンクの装飾

<a>タグの見た目は、CSSを使うことで自由自在にカスタマイズできます。

下線の表示・非表示

text-decorationプロパティで下線の表示をコントロールできます。

a {
text-decoration: none; /* 下線を消す */
}

リンク色の変更

colorプロパティで文字色を変更できます。訪問前、訪問後で色を変えることも可能です。

/* 訪問前のリンク */
a:link {
color: blue;
}

/* 訪問後のリンク */
a:visited {
color: purple;
}

ホバーエフェクト

:hover疑似クラスを使うと、マウスカーソルが乗った時のスタイルを指定できます。

a:hover {
color: red;
text-decoration: underline; /* マウスが乗ったら下線を出す */
}

ボタンデザイン

paddingやbackground-colorを指定することで、リンクをボタンのように見せることができます。

a.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}

HTML リンクの注意点

リンクのテキストをわかりやすくする

リンクのテキストは、ユーザーがクリックして移動する先を予測できるようにわかりやすくすることが重要です。リンクテキストは、リンクの目的やリンク先の内容を正確に表現する必要があります。

例えば、「こちらをクリックしてください」といった曖昧な表現ではなく、「詳細情報を見る」「商品を購入する」「お問い合わせページへ」といった具体的なテキストを使用しましょう。

以下は、わかりやすいリンクテキストを使用する基本的な例です。

<a href="http://www.example.com">詳細情報を見る</a>
<a href="http://www.example.com">商品を購入する</a>
<a href="http://www.example.com">お問い合わせページへ</a>

上記の例では、リンクの目的や行動をテキストで明確に伝えています。

リンクの目的を明示する

リンクをクリックする前に、ユーザーにリンクの目的やリンク先の情報を提供することは重要です。これにより、ユーザーがリンク先のコンテンツに興味を持ち、クリックする意欲が高まります。

リンクの目的を明示する方法の一つは、ユーザーにリンク先のURLやリンク先ページの説明を提供することです。以下は、リンクの目的を明示する基本的な例です。

<a href="http://www.example.com" title="詳細情報を見る">製品の詳細</a>
<a href="http://www.example.com" title="商品を購入する">購入する</a>
<a href="http://www.example.com" title="お問い合わせページへ">お問い合わせ</a>

上記の例では、title属性を使用してリンクの目的や説明を提供しています。ユーザーがリンクにカーソルを合わせると、ツールチップやマウスオーバーによって目的が表示されます。

これらの注意点を意識することで、ユーザーにとってわかりやすく魅力的なリンクを作成することができます。HTMLリンクは、ウェブページのユーザビリティとアクセシビリティにおいて重要な要素ですので、適切なテキストと目的の明示に留意しましょう。

HTMLリンクのよくある質問

絶対パスと相対パス

絶対パス：https://から始まる完全なURL。主に外部サイトへのリンクで使います。
相対パス：現在のページを基準としたパス。同じサイト内のページへのリンクで使い、記述が短くなります。（例：page2.html,./img/logo.png）

rel=”noopener”の必要性

リンク先のページから、元のページをJavaScriptで操作されるというセキュリティ上の脆弱性を防ぐためのおまじないです。また、パフォーマンス上のメリットもあります。
target="_blank"を使う際は、必ずセットで記述するようにしましょう。

訪問済みリンクの色

ブラウザが「そのリンクは既に訪問済みですよ」と教えてくれているためです。この色はCSSのa:visitedで変更することができます。

挫折することなくHTMLを習得するなら

独学？スクール？

ここまで、HTMLとは何なのか？について概念的な話から各要素の役割、各要素の使い方なども交えて紹介してきました。

ただ、実際学習を始めるとなると

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり

＼満足度90%以上！／

プログラミングスクール忍者CODE
無料相談はこちら>

まとめ

今回は、HTMLのリンク（<a>タグ）について、基本的な使い方から応用、CSSでの装飾まで幅広く解説しました。

リンクはWebの根幹をなす非常に重要な機能です。この記事で紹介したテクニックをマスターすれば、よりユーザーにとって親切で、デザイン性の高いWebページを作成できるようになります。

リンクを使いこなせるようになったら、次はCSSのレイアウトやJavaScriptでの動きのある表現にも挑戦してみましょう。忍者CODEでは、Web制作のすべてを体系的に学べるカリキュラムを用意していますので、興味がある方はぜひ無料相談にご参加ください。