【HTML】aタグで同じページ内のリンクを実装する | アルファベット順に分けて移動できるようなNavを作る

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、aタグで同じページ内のリンクを実装する方法について解説します。

1 aタグで同じページ内のリンクを実装する
2 SampleCode全文 & HTML実行イメージ
3 おすすめ書籍(HTML&CSS編)
4 Twitterやってます！Follow Me！
5 参考・引用
6 最近の投稿

aタグで同じページ内のリンクを実装する

aタグで同じページ内リンクを実装する時は、

id属性 or name属性に、リンク先（到達点）の設定をする
href属性に、リンク元（出発点）の設定をする

上記、2点の実装をするだけで完了です。

リンク先（到達点）の設定をするために、固有の識別名を指定する必要があります。

そこで、id属性 or name属性をページ内の移動先(リンク先)に設定します。

移動先・リンク先の準備ができたら、aタグを用意して、

そのhref属性に「 #id属性値」or「 #name属性値」の付与でページ内Linkのaタグのできあがりです。

SampleCode全文 & HTML実行イメージ

SampleCodeを実行すると、次のようなアルファベットのNavとアルフォベット順に並べたListが表示されます。

アルファベットをClickすると、対応するListのアルファベットの欄までページ内移動します。

これらの機能は、国連のWebサイトのSrcCodeから作りました。

<style>
    
    #memberStatesIndex {
        border: solid 1px #000;
        background: #eee;
        padding: 10px;
        text-align: center;
        margin-bottom: 1em;
    }
    
    #memberStatesIndex a {
        padding: 9px;
        font-size: 1.25em;
        font-weight: 700;
    }
    
    .member-state-grouping-letter {
        text-align: center;
        font-size: 28px;
        font-weight: bold;
    }
    
    .robotama {
        text-align: center;
    }
    
    </style>
    
    <h1>aタグで同じページ内のリンクを実装する</h1>
    
    <h2>1. リンク先（到達点）の設定をする => 固有の識別名を指定する必要がある</h2>
    
    <h3>id属性 or name属性に、リンク先（到達点）の設定をする🔥</h3>
    
    <h3 id="abc">ここがABCの位置</h3>
    
    <h2>2. リンク元（出発点）の設定 => リンク先のID名を指定する必要がある</h2>
    
    <h3>href属性に、リンク元（出発点）の設定をする🔥</h3>
    
    <a href="#abc">ABCの位置へジャンプ</a>
    
    
    <h2>参考・引用</h2>
    
    <ol>
        <li>
            <a href="https://www.tagindex.com/html_tag/link/a_id.html" target="_blank">HTMLタグ/リンクタグ/同じページ内にリンクする - TAG index</a>
        </li>
        <li>
            <a href="https://www.un.org/en/about-us/member-states" target="_blank">United Nations (国連-WebSite)</a>
        </li>
    </ol>
    
    <div>
        <div id="memberStatesIndex">
            <a href="#gotoA">A</a>
            <a href="#gotoB">B</a>
            <a href="#gotoC">C</a>
            <a href="#gotoD">D</a>
            <a href="#gotoE">E</a>
            <a href="#gotoF">F</a>
            <a href="#gotoG">G</a>
            <a href="#gotoH">H</a>
            <a href="#gotoI">I</a>
            <a href="#gotoJ">J</a>
            <a href="#gotoK">K</a>
            <a href="#gotoL">L</a>
            <a href="#gotoM">M</a>
            <a href="#gotoN">N</a>
            <a href="#gotoO">O</a>
            <a href="#gotoP">P</a>
            <a href="#gotoQ">Q</a>
            <a href="#gotoR">R</a>
            <a href="#gotoS">S</a>
            <a href="#gotoT">T</a>
            <a href="#gotoU">U</a>
            <a href="#gotoV">V</a>
            <a href="#gotoY">Y</a>
            <a href="#gotoZ">Z</a>
        </div>
    </div>
    
    <p class="member-state-grouping-letter"><a id="gotoA">A</a></p>
    
    <h3 class="robotama">Robotama-A-1</h3>
    <h3 class="robotama">Robotama-A-2</h3>
    <h3 class="robotama">Robotama-A-3</h3>
    
    
    <p class="member-state-grouping-letter"><a id="gotoB">B</a></p>
    
    <h3 class="robotama">Robotama-B-1</h3>
    <h3 class="robotama">Robotama-B-2</h3>
    <h3 class="robotama">Robotama-B-3</h3>
    
    
    <p class="member-state-grouping-letter"><a id="gotoC">C</a></p>
    
    
    <h3 class="robotama">Robotama-C-1</h3>
    <h3 class="robotama">Robotama-C-2</h3>
    <h3 class="robotama">Robotama-C-3</h3>
    
    
    <p class="member-state-grouping-letter"><a id="gotoD">D</a></p>
    
    <h3 class="robotama">Robotama-D-1</h3>
    <h3 class="robotama">Robotama-D-2</h3>
    <h3 class="robotama">Robotama-D-3</h3>
    
    <p class="member-state-grouping-letter"><a id="gotoF">F</a></p>
    
    <h3 class="robotama">Robotama-E-1</h3>
    <h3 class="robotama">Robotama-E-2</h3>
    <h3 class="robotama">Robotama-E-3</h3>
    
    <p class="member-state-grouping-letter"><a id="gotoG">G</a></p>
    
    <h3 class="robotama">Robotama-G-1</h3>
    <h3 class="robotama">Robotama-G-2</h3>
    <h3 class="robotama">Robotama-G-3</h3>
    
    <p class="member-state-grouping-letter"><a id="gotoH">H</a></p>
    
    
    <h3 class="robotama">Robotama-H-1</h3>
    <h3 class="robotama">Robotama-H-2</h3>
    <h3 class="robotama">Robotama-H-3</h3>
    
    <p class="member-state-grouping-letter"><a id="gotoI">I</a></p>
    
    
    <h3 class="robotama">Robotama-I-1</h3>
    <h3 class="robotama">Robotama-I-2</h3>
    <h3 class="robotama">Robotama-I-3</h3>
    
    
    <p class="member-state-grouping-letter"><a id="gotoJ">J</a></p>
    
    
    <h3 class="robotama">Robotama-J-1</h3>
    <h3 class="robotama">Robotama-J-2</h3>
    <h3 class="robotama">Robotama-J-3</h3>
    
    
    <p class="member-state-grouping-letter"><a id="gotoK">K</a></p>
    
    
    <h3 class="robotama">Robotama-K-1</h3>
    <h3 class="robotama">Robotama-K-2</h3>
    <h3 class="robotama">Robotama-K-3</h3>
    
    
    <p class="member-state-grouping-letter"><a id="gotoL">L</a></p>
    
    
    <h3 class="robotama">Robotama-L-1</h3>
    <h3 class="robotama">Robotama-L-2</h3>
    <h3 class="robotama">Robotama-L-3</h3>
    
    
    <p class="member-state-grouping-letter"><a name="gotoM">M</a></p>
    
    <h3 class="robotama">Robotama-M-1</h3>
    <h3 class="robotama">Robotama-M-2</h3>
    <h3 class="robotama">Robotama-M-3</h3>
    
    
    <p class="member-state-grouping-letter"><a name="gotoN">N</a></p>
    
    
    <h3 class="robotama">Robotama-N-1</h3>
    <h3 class="robotama">Robotama-N-2</h3>
    <h3 class="robotama">Robotama-N-3</h3>
    
    
    <p class="member-state-grouping-letter"><a name="gotoO">O</a></p>
    
    
    <h3 class="robotama">Robotama-O-1</h3>
    <h3 class="robotama">Robotama-O-2</h3>
    <h3 class="robotama">Robotama-O-3</h3>
    
    
    <p class="member-state-grouping-letter"><a name="gotoP">P</a></p>
    
    <h3 class="robotama">Robotama-P-1</h3>
    <h3 class="robotama">Robotama-P-2</h3>
    <h3 class="robotama">Robotama-P-3</h3>
    
    <p class="member-state-grouping-letter"><a name="gotoQ">Q</a></p>
    
    <h3 class="robotama">Robotama-Q-1</h3>
    <h3 class="robotama">Robotama-Q-2</h3>
    <h3 class="robotama">Robotama-Q-3</h3>
    
    <p class="member-state-grouping-letter"><a name="gotoH">H</a></p>
    
    <h3 class="robotama">Robotama-H-1</h3>
    <h3 class="robotama">Robotama-H-2</h3>
    <h3 class="robotama">Robotama-H-3</h3>
    
    <p class="member-state-grouping-letter"><a name="gotoR">R</a></p>
    
    <h3 class="robotama">Robotama-R-1</h3>
    <h3 class="robotama">Robotama-R-2</h3>
    <h3 class="robotama">Robotama-R-3</h3>
    
    <p class="member-state-grouping-letter"><a name="gotoS">S</a></p>
    
    <h3 class="robotama">Robotama-S-1</h3>
    <h3 class="robotama">Robotama-S-2</h3>
    <h3 class="robotama">Robotama-S-3</h3>
    
    <p class="member-state-grouping-letter"><a name="gotoT">T</a></p>
    
    <h3 class="robotama">Robotama-T-1</h3>
    <h3 class="robotama">Robotama-T-2</h3>
    <h3 class="robotama">Robotama-T-3</h3>
    
    <p class="member-state-grouping-letter"><a name="gotoU">U</a></p>
    
    <h3 class="robotama">Robotama-U-1</h3>
    <h3 class="robotama">Robotama-U-2</h3>
    <h3 class="robotama">Robotama-U-3</h3>
    
    <p class="member-state-grouping-letter"><a name="gotoV">V</a></p>
    
    <h3 class="robotama">Robotama-V-1</h3>
    <h3 class="robotama">Robotama-V-2</h3>
    <h3 class="robotama">Robotama-V-3</h3>
    
    <p class="member-state-grouping-letter"><a name="gotoY">Y</a></p>
    
    <h3 class="robotama">Robotama-Y-1</h3>
    <h3 class="robotama">Robotama-Y-2</h3>
    <h3 class="robotama">Robotama-Y-3</h3>
    
    <p class="member-state-grouping-letter"><a name="gotoZ">Z</a></p>
    
    <h3 class="robotama">Robotama-Z-1</h3>
    <h3 class="robotama">Robotama-Z-2</h3>
    <h3 class="robotama">Robotama-Z-3</h3>