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



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

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

【リンク元】

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

【リンク先】

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

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

目次
  1. 【初心者向け】HTMLでアンカータグを使う方法
  2. アンカータグとは?
  3. アンカータグを使ってみる(前半)
  4. アンカータグを使ってみる(後半)
  5. アンカータグを使ったメニューバー
  6. 移動スピードとリンク先の余白を調整してみた
  7. 【注意!】アンカータグのいろいろな書き方
  8. CSSのidとアンカータグのid
  9. まとめ

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

ジャンプできた?

アンカータグとは?

image

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

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

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

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

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

アンカータグを使ってみる(前半)

image

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

【リンク元】

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

【リンク先】

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

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

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

【WordPressの場合】

image

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

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

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

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

アンカータグを使ってみる(後半)

リンク先の設定は、

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

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

image

また上記の場合、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 でもどちらでもイカリマークは表示されています。

image

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

image

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
 

デモ


まとめ

今回ご紹介したアンカータグ(ページ内リンク)は、 WordPressやブログサービスの標準機能だけでは実現できないものです。しかし、HTMLの基礎さえ押さえていれば、WordPressや Livedoorブログでもアンカータグ、実装できました。

「標準のエディタ機能だけで十分」「普通のリンクだけで十分」そう思われている方、是非今回ご紹介したコードの デモ を試してみて下さい。アンカータグのストレスフリーなページ移動は、ちょっとヤミツキになると思います。

「独学で HTMLはシンドイ」「古い HTMLを使ってしまわないか心配だ」、そんな時は CodeCamp をご検討下さい。『オンライン × マンツーマン』であなたのお悩みを解決できると思います。無料体験や無料相談、実施していますのでお気軽にご利用下さい。

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp