更新日: 2019年08月21日
公開日: 2019年08月15日

【初心者向け】HTMLでアンカータグを使う方法

同一ページ内の移動に便利な「アンカータグ」。以下のコードでスタンバイできます。

【リンク元】

<a href="#text">本文へ</a>

【リンク先】

<p id="text">ジャンプできた？</p>

試しにをクリックしてみて下さい。

【初心者向け】HTMLでアンカータグを使う方法
アンカータグとは？
アンカータグを使ってみる（前半）
アンカータグを使ってみる（後半）
アンカータグを使ったメニューバー
移動スピードとリンク先の余白を調整してみた
【注意！】アンカータグのいろいろな書き方
CSSのidとアンカータグのid
まとめ

【初心者向け】HTMLでアンカータグを使う方法

ジャンプできた？

アンカータグとは？

アンカータグのアンカー（Anchor）は、錨いかりという意味で、Webにおいてはリンク可能な特定ポイント、目印という意味で使います。

通常「リンク」というと、Webページと Webページをつなぐもので、リンクをクリックするとページのトップが表示されます。しかし、アンカータグを用いた場合、リンク先の特定箇所を最初に表示することが可能。つまりユーザーがスクロールしなくても、見せたいポイントを表示できる、ということになります。こうしたアンカータグの機能を活かした Webページとしては以下のようなサイトがあります。

サイト	ジャンル
Wikipedia	ドキュメント
Apple Plug	商品紹介

Wikipedia においては、『目次』としてアンカータグが使用。Apple Plug では、メニューとしてアンカータグが使われていますね。 WebデザインやWebサイトの構成を考える上で「アンカータグ」役に立ちそうですね。

ちなみに「アンカータグ」は、「ページ内リンク」や「アンカーリンク」とも言われますので、欲しい情報が入手できないときはキーワードを変えて検索してみましょう。

アンカータグを使ってみる（前半）

本稿冒頭にアンカータグのコードは、

【リンク元】

<a href="#text">本文へ</a>

【リンク先】

<p id="text">ジャンプできた？</p>

であるとご紹介しました。ただこれだけでは HTML初心者の方などには分かりにくいので、もう少し詳しくご紹介していきます。

まずリンク元の設定は、「リンクタグ」になります。WordPress やブログサービスを使っている方は、記事作成画面の 🔗アイコンで操作可能。

【WordPressの場合】

ブログサービスの場合は、利用しているサービスによって設定できない場合があるかもしれませんが、Livedoorブログの場合は、🔗アイコンで #text を入力すると、

<a  target="_self" href="http://#text">リンク元</a>

というふうに URLが入力したものとは違い、 http://#text に。そのため一旦 HTMLタグ編集画面で http:// を消す必要がでてきます。

次はリンク先の設定についてご紹介していきます。

アンカータグを使ってみる（後半）

リンク先の設定は、

<p id="text">ジャンプできた？</p>

とご紹介しました。ポイントは、 id="text" の部分。id=○○ の ○○の部分とリンク元の #○○ が同じキーワードである必要があります。キーワードが間違っていてばアンカータグのリンク移動は実行されません。

また上記の場合、pタグを使っていますが、これは a でも h1 でも h5 でも id の設定ができるものなら大丈夫です。実際に作ってみた HTMLファイルは以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <style>span{color:red}</style>
</head>
<body>
<h2>アンカータグのテスト</h2>
<a href="#text">本文へ</a>
<p>ジャンプ前の文章</p>
<h2 id="text">ジャンプできた？</h2>
<p>ジャンプ<span>後</span>の文章</p>
ページの最後です
</body>
</html>

デモ

どうでしょうか？リンク文字の「本文へ」をクリックしても何もおきないですね。これはページ内に既にリンク先のキーワードがあるため。試しに以下のコードを実行してみて下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <style>span{color:red}</style>
</head>
<body>
<h2>アンカータグのテスト</h2>
<a href="#text">本文へ</a>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<p>ジャンプ前の文章</p>
<h2 id="text">ジャンプできた？</h2>
<p>ジャンプ<span>後</span>の文章</p>
ページの最後です
</body>
</html>

デモ

今度はリンク先に移動できたものの、リンク先ターゲットの id="text" の部分がページ下方に。これはリンク先ターゲットの下にコンテンツがないために発生する現象です。試しにターゲットの下にも文章を羅列してみると、

デモ

というようにリンク先ターゲットのキーワードをページトップに表示することができました。

このようにアンカータグは、リンク先前後のコンテンツもうまく調整しないと思ったように表示されない、という点を注意する必要があります。

お次は、実際の Webデザインに使えそうな「アンカータグ」の事例を 2点ご紹介させて頂きます。

アンカータグを使ったメニューバー

シングルページやランディングページの場合、メニューバーにアンカータグがよく使われます。今回は、レスポンシブデザインにも対応した「アンカータグ式のメニューバー」を作ってみました。実際の動きは下記動画をご参照下さい。

【アンカータグを使ったメニューバーのコード】

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>UnchorTag-MenuBar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">タイトル</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#business">ビジネスモデル</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#work">実績</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#member">メンバー</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container-fluid">
  <div id="business">
      <h3>ビジネスモデルのご紹介</h3>
      <p style="margin-bottom: 500px">文章</p>
  </div>
  <div id="work">
        <h3>実績のご紹介</h3>
        <p style="margin-bottom: 500px">文章</p>
  </div>
  <div id="member">
        <h3>メンバーのご紹介</h3>
        <p style="margin-bottom: 1500px">文章</p>
  </div>
</div>
</body>
</html>

デモ

レスポンシブデザインに Bootstrap を使い、メニューバーの機能にはアンカータグを使用。HTMLタグの中のclass や id が若干にぎやかですが、キチンとメニューバーとしての役割を果たしていますね。

移動スピードとリンク先の余白を調整してみた

HTMLのアンカータグ、実際に使ってみると分かるのですが、リンク先への移動スピードが早すぎたり、移動後の表示が不適切だったりなど、何かと不便な点も多いと思います。そこで今回は、『スピード』と『移動後の上部余白』を調整できるコードをご紹介。まずはスピードと余白を変えるとどんな風になるのか、下記動画をご参照ください。

【アンカータグの移動スピードとリンク先の余白を調整できるコード】

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>アンカータグのジャンプスピードとジャンプ先上部余白の調整</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <style>
    .jump span {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="jump">
  <ol>
    <li><span class="nav-option">Vision</span></li>
    <li><span class="nav-option">Design</span></li>
    <li><span class="nav-option">Innovation</span></li>
  </ol>
  </div>
  <p style="font-size: 4em">文章</p>
  <p style="font-size: 4em">文章</p>
  <p style="font-size: 4em">文章</p>
  <p style="font-size: 4em">文章</p>
  <p style="font-size: 4em">文章</p>
  <p style="font-size: 4em">文章</p>

  <div id="vision">
    <h4>Vision</h4>
    <p>うまくジャンプできましたでしょうか？</p>
    <p style="font-size: 4em">文章</p>
    <p style="font-size: 4em">文章</p>
    <p style="font-size: 4em">文章</p>
    <p style="font-size: 4em">文章</p>
  </div>

  <div id="design">
    <h4>Design</h4>
    <p>うまくジャンプできましたでしょうか？</p>
    <p style="font-size: 4em">文章</p>
    <p style="font-size: 4em">文章</p>
    <p style="font-size: 4em">文章</p>
    <p style="font-size: 4em">文章</p>
  </div>

  <div id="innovation">
    <h4>Innovation</h4>
    <p>うまくジャンプできましたでしょうか？</p>
    <p style="font-size: 4em">文章</p>
    <p style="font-size: 4em">文章</p>
    <p style="font-size: 4em">文章</p>
    <p style="font-size: 4em">文章</p>
  </div>

  <script>
  $(function(){
    $('.nav-option').click(function(){
      var id = $(this).text().toLowerCase();
      var target = $('#' + id).scrollTop(0);
      $('html, body').animate({
        scrollTop: target.offset().top - 42
      }, 800);
    });
  });
  </script>
<p style="margin-bottom: 500px">文章</p>
</body>
</html>

アンカータグの移動スピードと余白は、JavaScriptを使って制御。コード下部の 800 が目的地までの移動時間で 800 は 800ミリセカンド、つまり 0.8秒になります。移動後の上部余白は、 42 という数字で単位は px。実際に数字を変えていろいろ試してみることをオススメします。

ちなみにこちらのコードは、「アンカータグとは」でご紹介した Apple Plugのページを参考にしたものです。HTML や CSS、 JavaScriptの基礎知識があると「いいな」と思ったページのデザインや機能を「マネ」することができますね。

【注意！】アンカータグのいろいろな書き方

ネット上で「html anchor tag」と検索すると様々なチュートリアルサイトが紹介されます。その時にリンク先の記法を

id="○○"

ではなく

name="○○"

としているものも見かけます。

name="○○"　、こちらでも確かにアンカータグは機能するのですが、今は name 属性の使用は推奨されていません。間違って使わないように注意しましょう。（参考文献）

デモ

また WordPress でアンカータグをセットした場合、以下のように id でも name でもどちらでもイカリマークは表示されています。

CSSのidとアンカータグのid

CSSを学習中の方なら、id という言葉をご存知の方もいらっしゃると思います。特定の部分だけにスタイルを指定できる CSS の id ですが、HTMLタグの中は CSS の id もアンカータグの id も一緒の書き方。例えば、CSSの id名称とアンカータグの id名称が一緒だった場合、どうなるでしょうか？答えは、 CSS の id もアンカータグの id も両方採用される、ということです。この場合、意図しないデザインになりかねないので、アンカータグの id 名称をサブタイトルなど CSS と重ならないように注意することを勧めます。ちなみに id の名称は違うものの、一つの文章に対してアンカータグも CSS の id どちらも使いたい、という場合は、divタグなどで予め CSS の id を採用した中にアンカータグの id を書くと、両方機能すると思います。

【サンプルコード】

<div id="size">
<p id="text">ジャンプできた？</p>
</div>

CSSの id
アンカータグの id
　

デモ

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら