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>
これで、同じページ内にリンクすることができました。
では、異なるページの特定の場所にリンクする場合は、どうすればいいのでしょうか?
その場合は、リンク元のhref=""にリンク先の html と id 属性を指定します。
例えば、リンク先のページが about.html、特定の場所が another-target の場合、リンク元のコードは、以下の通りです。
html
<a href="about.html#another-target">今日の天気は</a>
一番下にリンクしたい場合、使う機会がありますので、ぜひ使ってみてください。
お知らせ
私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。
Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。
詳しくはこちら(Udemyの外部サイトへ遷移します)