【HTML＋CSS初心者講座09】リンク＜aタグ＞の書き方

この記事はCSS入門の続きです。aタグを使いこなすには、HTMLとCSSの基礎知識が必要です。まだ学んでいない方は、先に「CSS入門：書き方の基本とセレクタの使い方」をご覧ください。

1. aタグとは？

HTMLの <a> タグは、リンク（ハイパーリンク）を作るためのタグです。クリックすると別のページや場所に移動できます。「アンカータグ」と呼ばれることもあります。

タグ 役割
<a> リンクを作る。クリックすると指定したページへ移動する
href属性 リンク先のURLを指定する（必須）

💡 href は「Hypertext REFerence」の略です。リンク先の住所（URL）を指定します。

2. aタグの基本的な書き方

2-1. テキストリンクを作る

aタグの基本構文は以下のとおりです。

<a
href=“URL”
>
リンクテキスト
</a>
開始タグ
リンク先のURL

クリックできる文字
終了タグ

HTMLコード
<p>
  <a href="https://example.com/">
    サンプルサイトへ
  </a>
</p>

表示結果

サンプルサイトへ

このようにリンクテキストには自動で青い下線がつき、クリックできる状態になります。

2-2. 文章の中にリンクを入れる

pタグの中にaタグを書くと、文章の一部だけをリンクにできます。

HTMLコード
<p>詳しくは
  <a href="https://example.com/">こちら</a>
  をご覧ください。
</p>

表示結果

詳しくは こちら をご覧ください。

3. 別タブで開く（target属性）

リンク先を新しいタブで開くには、target="_blank" を追加します。外部サイトへのリンクによく使われます。

<a
href=“URL”
target=“_blank”
>
テキスト
</a>

HTMLコード
<a href="https://example.com/"
   target="_blank"
   rel="noopener">
  別タブで開くリンク
</a>

表示結果
別タブで開くリンク

💡 target="_blank" を使うときは、セキュリティ対策として rel="noopener" を一緒に書く習慣をつけましょう。

属性値 動作
_blank 新しいタブ（またはウィンドウ）で開く
_self 同じタブで開く（デフォルト）

4. 画像にリンクを貼る

aタグの中にimgタグを入れると、画像をクリックしてリンクすることができます。

<a href=”URL”>
<img src=”画像パス” alt=”説明”>
</a>

HTMLコード
<a href="https://example.com/">
  <img src="logo.png"
       alt="サンプルのロゴ">
</a>

イメージ
🖼 画像（クリックでリンク）

💡 imgタグには必ず alt="〜" を書きましょう。画像の内容を説明する短い文を入れます。

5. CSSでリンクのデザインを変える

デフォルトのリンクは「青い文字＋下線」ですが、CSSで自由にデザインを変えることができます。

5-1. 下線を消す（text-decoration）

a
{ text-decoration: none; }

CSSコード
a {
  text-decoration: none;
}

表示結果

下線あり（デフォルト）：リンク

下線なし（none）：リンク

5-2. 文字色を変える（color）

CSSコード
a {
  color: orange;
  text-decoration: none;
}

表示結果

オレンジ色のリンク

5-3. カーソルを当てたときのデザイン（:hover）

a:hover を使うと、カーソルを重ねたとき（ホバー時）のデザインを指定できます。

a:hover
{ プロパティ: 値; }

CSSコード
a {
  color: #0066cc;
  text-decoration: none;
}
a:hover {
  color: orange;
  text-decoration: underline;
}

表示結果（カーソルを当ててみて）

ホバーデモリンク

💡 :hover のようにコロン : に続けて書く記法を擬似クラスと呼びます。aタグ以外のタグにも使えます。

5-4. 訪問済みリンクのデザイン（:visited）

a:visited で、一度アクセスしたことがあるリンクのデザインを変えられます。

CSSコード
a:visited {
  color: gray;
}

表示結果（訪問済みの場合）

未訪問：リンク

訪問済み：リンク

擬似クラス タイミング
a:hover カーソルを重ねたとき
a:visited 一度訪れたことがあるリンク
a:active クリックしている瞬間

6. ボタン型リンクを作る

CSSを組み合わせると、aタグをボタンのような見た目にすることができます。

  • 1

    HTMLでaタグにclass名をつける

    HTMLコード
    <a href="https://example.com/"
   class="btn-link">
  詳しくはこちら
</a>

  • 2

    CSSでボタンらしいデザインを指定する

    CSSコード
    .btn-link {
  display: inline-block;  /* 余白を効かせるため必須 */
  text-decoration: none;  /* 下線を消す */
  background: #FFA07A;    /* 背景色 */
  color: white;           /* 文字色 */
  padding: 8px 24px;      /* 内側の余白 */
  border-radius: 20px;    /* 角を丸くする */
  font-weight: bold;      /* 太字 */
}
.btn-link:hover {
  background: #ff7f50;    /* ホバー時の背景色 */
  text-decoration: none;
}

  • 3

    ブラウザで確認する

    表示結果

    詳しくはこちら

    💡 display: inline-block を書かないと padding が正しく効かないので注意しましょう。

    • 7. ここまでの復習

    学んだ内容を組み合わせて、リンクの一覧を作ってみましょう。

    HTMLコード
    <ul>
  <li>
    <a href="https://example.com/"
       class="text-link">
      テキストリンク
    </a>
  </li>
  <li>
    <a href="https://example.com/"
       target="_blank"
       rel="noopener"
       class="text-link">
      別タブで開くリンク
    </a>
  </li>
  <li>
    <a href="https://example.com/"
       class="btn-link">
      ボタンリンク
    </a>
  </li>
</ul>

    CSSコード
    .text-link {
  color: #0066cc;
  text-decoration: none;
}
.text-link:hover {
  text-decoration: underline;
}
.text-link:visited {
  color: gray;
}

.btn-link {
  display: inline-block;
  text-decoration: none;
  background: #FFA07A;
  color: white;
  padding: 8px 24px;
  border-radius: 20px;
  font-weight: bold;
}
.btn-link:hover {
  background: #ff7f50;
}

    ブラウザ表示イメージ

    📝 まとめ

    • <a href="URL">テキスト</a> でリンクを作る
    • リンク先URLは href属性 に指定する
    • 新しいタブで開くには target=”_blank”（セキュリティ対策に rel="noopener" も追加）
    • 画像をリンクにするには aタグの中に imgタグ を入れる
    • 下線を消す：text-decoration: none
    • 文字色を変える：color
    • ホバー時のデザイン：a:hover { }
    • 訪問済みのデザイン：a:visited { }
    • ボタンにするには display: inline-block + padding + border-radius を組み合わせる

    次のステップ

    aタグをマスターしたら、次は widthとheightで幅・高さを指定する 方法を学びましょう。ボタンやボックスのサイズを自由に調整できるようになります。