ページ内リンクの設置 - アンカーの記述

このページのタグ:[HTML] [ページ内リンク]
HTMLでページ内のリンクを記述するコードを紹介します。

コード

以下の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>
の場所へページ内遷移します。

実行結果

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


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


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


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


ページ内で遷移できるリンクを記述できました。
登録日 :2013-06-27    最終更新日 :2013-06-27
このページのタグ:[HTML] [ページ内リンク]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)