【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の基礎講座を受講できます。ご興味のある方はお問い合わせください😊

教室について詳しくはコチラ

初心から資格取得まで対応、開校21年のアットホームなパソコン教室です