ページ内リンクの設置 - アンカーポイントの記述 - HTML

HTMLでページ内のリンクを記述するコードを紹介します。

概要

リンク(アンカータグ)の参照先アンカーポイントを記述することで、ページの長さが長い場合に指定した位置にジャンプするリンクを作成できます。

書式

リンク元

<a href="#(アンカーポイント名)">リンクの文字列</a>

リンク先

遷移する場所の要素にアンカーポイント名のidを設定します。

コード例

以下のHTMLを作成します。

Anchor.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
  <a href="#section1">セクション1へ</a><br />
  <a href="#section2">セクション2へ</a><br />
  <a href="#section3">セクション3へ</a><br />
  <hr />

  <a id="section1">セクション1</a>
  <div style="height:300px">コンテンツ</div> 

  <a id="section2">セクション2</a> 
  <div style="height:300px">コンテンツ</div> 

  <a id="section3">セクション3</a> 
  <div style="height:300px">コンテンツ</div> 
</body>
</html>

解説

Aタグのhrefに "#(アンカーポイント名)" を記述するとページ内のリンクとなります。遷移先は `<a id="(アンカーポイント名)"> の形式で記述します。

上記のコードでは以下のリンクをクリックすると

 <a href="#section1">セクション1へ</a><br />

下記の要素の場所へページ内遷移します。

 <a id="section1">セクション1</a>

補足

ジャンプ先の要素は aタグでなくても動作します。

実行結果

HTMLファイルを表示します。下図の画面が表示されます。

ページの上部に表示されている[セクション1へ]リンクをクリックするとページ内遷移し、セクション1が画面の最上部に表示される状態になります。

同様に[セクション2へ]リンクをクリックするとページ内遷移し、セクション2が画面の最上部に表示されます。

[セクション3へ]のリンクも同様です。

ページ内で遷移できるリンクを記述できました。

補足

遷移先のidはaタグでない場合でも動作します。下記コードはdivタグのidを遷移先に指定している場合のコードです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
  <a href="#section1">セクション1へ</a><br />
  <a href="#section2">セクション2へ</a><br />
  <a href="#section3">セクション3へ</a><br />
  <hr />

  <div id="section1">セクション1</div>
  <div style="height:300px">コンテンツ</div> 

  <div id="section2">セクション2</div> 
  <div style="height:300px">コンテンツ</div> 

  <div id="section3">セクション3</div> 
  <div style="height:300px">コンテンツ</div> 
</body>
</html>

このページのキーワード

アンカーポイント

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

ページ内リンクの設置 - アンカーポイントの記述 - HTML

概要

書式

リンク元

リンク先

コード例

解説

実行結果

補足

関連するページ