【HTML小技】ページ内リンクの貼り方
今日は、当ブログ初のHP系の小技を紹介します。
リンクを貼る、といえば、<a href=”URL”></a>構文でリンクを貼る場合もあれば、WordpressなどのCMSを使うと、鎖のようなマークをクリックしてリンク先を貼り付けたり、ボタンを使用してリンクをつなげたりなどなど、様々な方法がありますね。
ページ内リンクの構文
リンクを貼る時は、基本的にどんな内容でも、中身を見ると<a href=””>構文になっていることが多いです。
この際、リンク先が「#」で始まる単語になっていることがあります。
これはページ内リンクを指していて、現在閲覧しているページの中でのリンクに使われます。
例えば <a href=”#karasu”> という構文であればページ内の「#karasu」に紐づけされた箇所に飛びます。
名前で紐づけをする
名前を付けることによって、ページ内にリンクする箇所をつけることが出来ます。
名前を付ける構文 <a name=”○○”></a>
○○の所に任意の名前(#の後に続く名前)を入れます。つまり、先ほどの <a href=”#karasu”> のページ内リンクを成立させる為には、「 <a name=”karasu”></a> 」という構文を、予め仕込んでおく必要があるのです。
IDで紐づけをする
見出しタグなどにIDをつけることにより、そのIDにリンクを飛ばすことができます。(HTML5)
例えば、見出し2タグ（h2）にID要素を加えるという事をするには <h2 id=””> というように、もとからある<h2>に付け足す形で加えていきます。
つまり、#karasuに紐づけをするには「 <h2 id=”karasu”> 」という見出しタグになるのです。(h2の部分は見出しやタグ内容によって変わります)
最近はレスポンシブ対応のページも増え、読み込みの速度等も考慮して1ページでHPを納める傾向も見られます。この際に使用するのがこのページ内リンクです。覚えておくと便利ですよ(^^)
教室では、HTML,CSSの基礎講座を受講できます。ご興味のある方はお問い合わせください😊
