【html&css】リンク<a>タグの使い方とWebデザインによる装飾

2026年3月12日2026年3月16日

CSSの装飾やレイアウトの知識を組み合わせると、クリックしたくなる魅力的なボタンに変えることができます。

本記事では、Webサイトのページとページをつなぐ「<a>タグ（リンクタグ）」の解説になります。

また、HTML&CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のHTML&CSSページをご確認ください。

HTML&CSS | Code Stock

HTMLにおける<a>タグ（リンクタグ）の使い方

Webページから別のWebページへ移動したり、特定の場所へジャンプしたりするリンクを作るには、HTMLの<a>（アンカー）タグを使用します。

リンクはWebサイトの基本ですが、少し属性（設定）を追加するだけで、別タブで開いたり、画像をクリックして遷移するなどの使い方が可能です。

<a>タグ（リンクタグ）の使い方

<a>タグ（リンクタグ）の書き方
別タブで開くリンクを作る
画像のリンクボタンを作る

<a>タグ（リンクタグ）の書き方

リンクを作る基本的な書き方は以下の通りです。

<a href=”飛ばしたい先のURL”>画面に表示されるテキスト</a>

絶対に必須なのがhref（エイチレフ）属性です。

「Hypertext Reference（ハイパーテキストの参照先）」の略で、「クリックした時にどのURLに移動するか」をブラウザに指示する役割を持ちます。

これがないと、ただの下線付きテキストになってしまい、クリックしても何も起きません。

1. 通常のテキストリンク：Code Stockのトップページへ

2. CSSで装飾したボタンリンク：Code Stockのトップページへ

HTMLコード表示

<div class="a-demo-basic-wrap">
  <p>1. 通常のテキストリンク：<a href="https://su-gi-rx.com/" class="demo-link-text">Code Stockのトップページへ</a></p>  
  <p>2. CSSで装飾したボタンリンク：<a href="https://su-gi-rx.com/" class="demo-link-button">Code Stockのトップページへ</a></p>
</div>

CSSコード表示

.a-demo-basic-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
 }
/* 1. 通常のテキストリンクの装飾 */
.demo-link-text {
  color: #0d6efd;
  text-decoration: underline; /* 下線を引く */
  transition: opacity 0.2s ease;
}
.demo-link-text:hover {
  opacity: 0.7; /* マウスを乗せたら少し薄くする */
}
/* 2. ボタン風リンクの装飾 */
.demo-link-button {
  display: inline-block; /* 幅や余白を持たせるために必須！ */
  background-color: #198754;
  color: #ffffff;
  text-decoration: none; /* 下線を消す */
  padding: 12px 24px;
  border-radius: 8px; /* 角を丸くする */
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.demo-link-button:hover {
  background-color: #146c43; /* マウスを乗せたら色を濃くする */
  transform: translateY(-2px); /* 少し上にフワッと浮かす */
}

href="#"は、クリックしてもどこにも飛ばないダミーリンクを意味します。

別タブで開くリンクを作る

自サイトから外部の別サイトへリンクを貼る場合、そのまま移動されてしまうと自サイトから離脱されます。

そんな時は、リンクをクリックした時に「新しいタブ（別ウィンドウ）で開く」といった設定が定番です。

<a>タグの中にtarget="_blank"という属性を追加するだけです。

target="_blank"を使う時は、セキュリティとパフォーマンスの観点から rel="noopener noreferrer"という属性もセットで書くのがよいです。

▼ 用途に合わせて「開き方」を変えましょう

同じタブで開く（内部リンク）別タブで開く（外部リンク）

HTMLコード表示

<div class="a-demo-target-wrap">
  <p style="font-size:14px; margin-bottom:15px;">▼ 用途に合わせて「開き方」を変えましょう</p>
  <a href="#" class="demo-target-same">同じタブで開く（内部リンク）</a>
  <a href="#" target="_blank" rel="noopener noreferrer" class="demo-target-blank">別タブで開く（外部リンク）</a>
</div>

CSSコード表示

.a-demo-target-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
}
.demo-target-same,
.demo-target-blank {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.2s;
}
/* 同じタブで開くボタンのデザイン */
.demo-target-same {
  background-color: #e9ecef;
  color: #495057;
  border: 2px solid #ced4da;
}
.demo-target-same:hover {
  background-color: #dee2e6;
}
/* 別タブで開くボタンのデザイン */
.demo-target-blank {
  background-color: #0dcaf0;
  color: #000000;
  border: 2px solid #0bacce;
}
.demo-target-blank:hover {
  background-color: #31d2f2;
}
/* 別タブで開くリンクの右側に、CSSで「外部リンクアイコン風」の矢印をつける */
.demo-target-blank::after {
  content: " ↗";
  font-size: 1.1em;
}

画像のリンクボタンを作る

<a>タグで囲めるのはテキスト（文字）だけではありません。

<img>（画像）タグをまるごと<a>タグで囲めば、画像全体をクリックできるリンクボタンにできます。

バナー広告や記事のアイキャッチ画像をクリックして詳細ページへ飛ばすなど、よく使われる手法です。

▼ 画像にマウスを乗せてみてください

HTMLコード表示

<div class="a-demo-img-wrap">
  <p style="font-size:14px; margin-bottom:10px;">▼ 画像にマウスを乗せてみてください</p>
  <a href="#" class="demo-img-link">
    <img src="https://placehold.jp/320x180.png?text=Click+Here!" alt="リンク先の詳細画像" class="demo-link-image">
  </a>
</div>

CSSコード表示

.a-demo-img-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  text-align: center;
}
/* リンクをブロック要素（またはインラインブロック）にする */
.demo-img-link {
  display: inline-block;
  border-radius: 8px; /* 枠の角を丸くする */
  overflow: hidden; /* 画像が枠から飛び出さないようにする */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 少し影をつけてボタンっぽく */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 画像自体の設定 */
.demo-link-image {
  display: block; /* 画像の下にできる謎の隙間を消す鉄則！ */
  max-width: 100%; /* スマホでもはみ出さないようにする */
  height: auto;
  transition: opacity 0.3s ease;
}
/* マウスを乗せた時の動き（画像全体をフワッと浮かし、少し明るくする） */
.demo-img-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.demo-img-link:hover .demo-link-image {
  opacity: 0.8; /* 少し透明にして「押せる感」を演出 */
}

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

HTMLで<a>タグを書いただけの状態では、文字は青色になり、下にアンダーライン（下線）が引かれます。

「ここがリンクです」と伝えるためのブラウザの初期設定ですが、自サイトのデザインに合わないことも多いです。

CSSを使えば、リンクを自分好みの色に変えたり、立派なボタンに変身させることができます。

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

デフォルトの「青文字」と「下線」を消す
マウスを乗せた時（ホバー時）に色を変える
クリックしたくなる「ボタン風」にアレンジする
アニメーションで変化をつける（transition）

デフォルトの「青文字」と「下線」を消す

リンクの装飾は、「ブラウザの初期設定をリセット（打ち消す）」するところから始まります。

下線を消すにはtext-decoration: none;を使い、文字色はcolorプロパティで好みの色に上書きします。

❌ 初期設定のままのリンク

トップページへ戻る

⭕️ CSSでリセットしたリンク

トップページへ戻る

HTMLコード表示

<div class="link-demo1-wrap">
  <p class="ld1-label">❌ 初期設定のままのリンク</p>
  <a href="https://su-gi-rx.com/" class="ld1-default">トップページへ戻る</a>

  <p class="ld1-label" style="margin-top:20px;">⭕️ CSSでリセットしたリンク</p>
  <a href="https://su-gi-rx.com/" class="ld1-reset">トップページへ戻る</a>
</div>

CSSコード表示

.link-demo1-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.ld1-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #495057;
}
/* 初期設定のリンク（何もしない） */
.ld1-default {
  /* ブラウザデフォルトの青色と下線が適用されます */
}
/* CSSでリセットしたリンク */
.ld1-reset {
  text-decoration: none; /* 下線を消す */
  color: #333333; /* 文字色を濃いグレーに変更 */
  font-weight: bold; /* 少し太字にして目立たせる */
}

マウスを乗せた時（ホバー時）に色を変える

リンクの装飾に欠かせないのが「マウスカーソルが乗った時（ホバー時）のリアクション」です。

これを作るには、CSSのセレクタ（クラス名）の直後に:hover（ホバー）を付与します。

これを「擬似クラス」と呼びます。

▼ マウスを乗せてみましょう

お知らせ一覧を見る

HTMLコード表示

<div class="link-demo2-wrap">
  <p style="font-size:14px; margin-bottom:10px;">▼ マウスを乗せてみましょう</p>
  <a href="#" class="ld2-hover-text">お知らせ一覧を見る</a>
</div>

CSSコード表示

.link-demo2-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  text-align: center;
  font-family: sans-serif;
}
/* 普段のリンクの状態 */
.ld2-hover-text {
  text-decoration: none;
  color: #0d6efd; /* 普段は青色 */
  font-weight: bold;
  font-size: 18px;
}
/* ▼「:hover」を追加▼ */
/* マウスが乗った時のリンクの状態 */
.ld2-hover-text:hover {
  color: #dc3545; /* マウスが乗ると赤色に変化 */
  text-decoration: underline; /* マウスが乗った時だけ下線を出す */
}

クリックしたくなる「ボタン風」にアレンジする

ただのテキストリンクを「押しやすいボタン」に変身させましょう。

<a>タグは「インライン要素（幅や高さが効かない）」なので、display: inline-block;を利用するとボタンとしての幅や余白（padding）を持たせることができます。

お問い合わせはこちら

HTMLコード表示

<div class="link-demo3-wrap">
  <a href="#" class="ld3-button">お問い合わせはこちら</a>
</div>

CSSコード表示

.link-demo3-wrap {
  background-color: #f8f9fa;
  padding: 30px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  text-align: center;
  font-family: sans-serif;
}
.ld3-button {
  display: inline-block; /* ① 幅や余白を効かせるために必須 */
  text-decoration: none; /* ② 下線を消す */
  background-color: #198754; /* ③ ボタンの背景色（緑） */
  color: #ffffff; /* ④ 文字色（白） */
  padding: 15px 40px; /* ⑤ 内側の余白（上下15px、左右40px） */
  border-radius: 50px; /* ⑥ 角を丸くする */
  font-weight: bold; /* ⑦ 文字を太く */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ⑧ 少し影をつけて立体的に */
}
/* マウスが乗った時の変化 */
.ld3-button:hover {
  background-color: #146c43; /* 少し濃い緑にする */
}

アニメーションで変化をつける（transition）

「ボタン風リンク」でマウスを乗せた時、色が切り替わったかと思います。

これでも十分ですが、少し機械的で安っぽい印象を与えてしまうことがあります。

Webデザインで使われるのがtransition（トランジション）プロパティです。

CSSに追加するだけで、色が滑らかに変化します。

❌ transitionなし（パッと変わる）

詳しく見る

⭕️ transitionあり（フワッと変わる）

詳しく見る

HTMLコード表示

<div class="link-demo4-wrap">
  <div class="ld4-col">
    <p class="ld4-label">❌ transitionなし（パッと変わる）</p>
    <a href="#" class="ld4-btn ld4-no-trans">詳しく見る</a>
  </div>

  <div class="ld4-col">
    <p class="ld4-label">⭕️ transitionあり（フワッと変わる）</p>
    <a href="#" class="ld4-btn ld4-with-trans">詳しく見る</a>
  </div>
</div>

CSSコード表示

.link-demo4-wrap {
  display: flex;
  gap: 20px;
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
  text-align: center;
}
.ld4-col {
  flex: 1;
}
.ld4-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #495057;
}
/* 共通のボタンデザイン */
.ld4-btn {
  display: inline-block;
  text-decoration: none;
  background-color: #0dcaf0;
  color: #000000;
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: bold;
}
/* 共通のホバー（マウスが乗った時）の設定 */
.ld4-btn:hover {
  background-color: #055160; /* 濃い青緑に変化 */
  color: #ffffff; /* 文字は白に変化 */
}
/* =========================================
  transitionのあり・なしの比較
  ========================================= */
.ld4-no-trans {
  /* transitionを指定しない（一瞬で切り替わる） */
}
.ld4-with-trans {
  /* ▼0.3秒かけて変化を滑らかに行う▼ */
  transition: all 0.3s ease;
}
/* スマホ表示では縦に並べる */
@media (max-width: 600px) {
  .link-demo4-wrap {
    flex-direction: column;
  }
}

ページの途中にジャンプするリンクの作り方

Webページ内の特定場所へジャンプするリンクを作るには、目的地（ゴール）と出発点（リンク）」の2つの設定が必要です。

目的地（ゴール）に「名前（id）」をつける
ジャンプさせたい場所のHTMLタグ（見出しの<h2>や枠の<div>など）にid="好きな名前"という属性を追加して目印をつけます。
（例：<h2 id="section1">セクション1</h2>）
出発点（リンク）のhrefに「#（ハッシュ）＋名前」を書く
リンクを作る<a>タグのhrefに、先ほどつけた目印の名前を書きます。
必ず先頭に#（ハッシュ・シャープ）をつけるのがルールです。
「このページ内の、このidの場所へ飛んで」というブラウザへの合図になります。
（例：<a href="#section1">セクション1へ移動する</a>）

また、スクロールしながら移動する方が読者へ「今どこに移動したのか」を分かりやすくできます。

スクロールする大枠のCSSにscroll-behavior: smooth;という1行を追加するだけで実現できます。

▼ ボタンをクリックしてジャンプを体験しよう！

🔴 エリア1へ 🔵 エリア2へ 🟢 エリア3へ

エリア1

ここはエリア1です。
トップからジャンプしてきましたね！

↑ トップに戻る

エリア2

ここは真ん中のエリア2です。
長いページで迷子にならないための必須テクニックです。

↑ トップに戻る

エリア3

一番下のエリア3です。
この機能を使えば、目次から記事の各見出しへ簡単に飛ばせます！

↑ トップに戻る

HTMLコード表示

<div class="jump-demo-wrapper">
  <p class="jump-demo-title">▼ ボタンをクリックしてジャンプを体験しよう！</p>

  <div class="jump-scroll-box">
    
    <div id="demo-top" class="jump-nav-area">
      <a href="#demo-sec1" class="jump-btn btn-red">🔴 エリア1へ</a>
      <a href="#demo-sec2" class="jump-btn btn-blue">🔵 エリア2へ</a>
      <a href="#demo-sec3" class="jump-btn btn-green">🟢 エリア3へ</a>
    </div>

    <div id="demo-sec1" class="jump-section section-red">
      <div class="jump-section-title">エリア1</div>
      <p>ここはエリア1です。<br>トップからジャンプしてきましたね！</p>
      <a href="#demo-top" class="jump-return-btn">↑ トップに戻る</a>
    </div>

    <div id="demo-sec2" class="jump-section section-blue">
      <div class="jump-section-title">エリア2</div>
      <p>ここは真ん中のエリア2です。<br>長いページで迷子にならないための必須テクニックです。</p>
      <a href="#demo-top" class="jump-return-btn">↑ トップに戻る</a>
    </div>

    <div id="demo-sec3" class="jump-section section-green">
      <div class="jump-section-title">エリア3</div>
      <p>一番下のエリア3です。<br>この機能を使えば、目次から記事の各見出しへ簡単に飛ばせます！</p>
      <a href="#demo-top" class="jump-return-btn">↑ トップに戻る</a>
    </div>

  </div>
</div>

CSSコード表示

/* デモ全体を囲む枠 */
.jump-demo-wrapper {
  background-color: #ffffff;
  padding: 0;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  font-family: sans-serif;
  overflow: hidden; /* 角丸からはみ出た部分を隠す */
}
/* デモのタイトル */
.jump-demo-title {
  font-size: 14px;
  font-weight: bold;
  margin: 15px 0;
  color: #333333;
  text-align: center;
}
/* 上部のナビゲーションエリア */
.jump-nav-area {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background-color: #f8f9fa;
  border-bottom: 2px dashed #ced4da;
  flex-wrap: wrap;
}
/* ジャンプボタンのデザイン */
.jump-btn {
  display: inline-block;
  padding: 10px 20px;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.jump-btn:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}
.btn-red { background-color: #dc3545; }
.btn-blue { background-color: #0d6efd; }
.btn-green { background-color: #198754; }

/* 各セクションの共通デザイン */
.jump-section {
  /* スクロールを実感できるように、あえて高さをしっかり持たせる */
  min-height: 350px; 
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 5px solid #ffffff;
  scroll-margin-top: 60px; 
}
/* 最後のセクションの下線を消す */
.jump-section:last-child {
  border-bottom: none;
}
.jump-section-title {
  font-size: 24px;
  margin-bottom: 15px;
  color: #333333;
  font-weight: bold;
}
/* セクションごとの背景色 */
.section-red { background-color: #f8d7da; }
.section-blue { background-color: #cfe2ff; }
.section-green { background-color: #d1e7dd; }

/* トップへ戻るボタンのデザイン */
.jump-return-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 8px 16px;
  background-color: #ffffff;
  color: #495057;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #adb5bd;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.jump-return-btn:hover {
  background-color: #e9ecef;
}