別サイトへのリンク
aタグで、リンクを設定したい箇所を囲みます。
aタグは、ankerの略です。
href属性で、リンクの飛ぶ先を設定できます。
target属性で_blankを使うと、別タブへ移動するように設定できます。
![](https://tumaboki.com/wp-content/uploads/2020/10/711210b3a1d5c18837302fa94db15c9a.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/d948a08473f43a0173c2b856893ac7d1.png)
ページ内のリンク
別サイトへのリンクと同様です。
aタグで、リンクを設定したい箇所を囲みます。
href属性で、リンクの飛ぶ先を設定できます。
フォルダ場所が階層ならば、ファイル名を入力すればOKです。
下の階層なら、/を使えば飛べますし、戻る場合は../index.htmlで戻れます。
![](https://tumaboki.com/wp-content/uploads/2020/10/3c321567a9b9ae5c0dc1df08d7f40fee-1024x586.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/c6d8059f4b82fc3c147cd584aba9a40d.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/7ff17c0e08bb4a95a6236bf2369d05d7.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/cad1692428c0c38c1ccf7955f4c87715.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/324b86f190d681614b4ad94a6a6875fb.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/cccbcbed13d8f2ed427fa6a34a069c82.png)
ページ内リンク
aタグとid属性+#を使うと、ページ内リンクが作成できます。
aタグとhref属性+#topを使うと、ページ先頭へ移動するリンクが作成できます。
![](https://tumaboki.com/wp-content/uploads/2020/10/f2701074c5d762e5256af9c8f53460a9-1024x694.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/c5ec803efbbcb565bd0aeea35d964fc4-1024x693.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/43a2bf6ca4cafe1a616296fd4edb01cd-1024x702.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/b4624074c60d4c0fba43397abc86a6d5.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/5abd503b5affc785a7087b887618de9b.png)
まとめ
![](https://tumaboki.com/wp-content/uploads/2020/10/gabby-orcutt-7E29j_4GBNI-unsplash-1024x819.jpg)
リンクの作成には、aタグが基本になります。
外部、内部、ページ内移動の3パターンをマスターしましょう♪
一緒に一歩踏み出しましょう♪
コメント