HTMLを使って、狙った場所にリンクする方法
HTML&CSS

HTMLを使って、狙った場所にリンクする方法

作成日:2021年05月06日
更新日:2021年05月06日

ウェブサイトで他のページに飛びたい場合、リンク元のタグにhref=""を使ってリンク先を指定しています。

では、同じページ内の特定の場所にリンクしたい場合はどうすればいいでしょうか?

同じページ内の特定の場所にリンクする場合も、href=""で指定することができます。

同じページ内のリンク先に、id 属性を付けます。

※id の名前は何でもかまいませんが、同じページ内に同じ id は付けないようにしましょう。

html
<div id="target">晴れ!</div>

そして、リンク元のhref=""に、id を指定します。

id の指定方法は、『#』の後に、id 名です。

html
<a href="#target">今日の天気は</a>

image2

これで、同じページ内にリンクすることができました。

では、異なるページの特定の場所にリンクする場合は、どうすればいいのでしょうか?

その場合は、リンク元のhref=""にリンク先の html と id 属性を指定します。

例えば、リンク先のページが about.html、特定の場所が another-target の場合、リンク元のコードは、以下の通りです。

html
<a href="about.html#another-target">今日の天気は</a>

image3

一番下にリンクしたい場合、使う機会がありますので、ぜひ使ってみてください。

© 2023あずきぱんウェブスタジオ