![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
どこかで見た事ある人がいた様な…
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
普段何気なく使用していますが意外と奥が深いのがリンクです
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
文中にあるリンクであったり、バナーであったりWeb上にはリンクがたくさんあるよね
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
またただのリンクだけではなく、工夫しだいでボタンなども作ることが出来ます。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
今回はそんな便利なリンクの基本を説明していこうと思います。
1.aタグ
1-1.aタグとは
“anchor(アンカー)”の略でテキストを<a></a>で囲い、”href属性=値”と書く事でリンクを作ることができます。
<a href="アドレスなど">テキスト</a>
href属性
- STEP1リンクにしたいテキストをaタグで囲う
<a>YouTubeへ</a>
- STEP2aタグの中にhref属性を書き、値にリンク先のurlを書く
<a href="https://www.youtube.com/">YouTubeへ</a>
たまにurl=” “で書きはじめてしまうミスがあるので気を付けます。
- STEP3完成YouTubeへ(外部サイトへ飛びます)
文中にも挿入することもできます。
<p>わからないことがあれば<a href="https://www.google.com/">google先生</a>に聞こう!</p>
わからないことがあればgoogle先生に聞こう!
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
http://やhttps://を書き忘れるとページを移動できないので注意。また” “で囲うこともたまに忘れてしまうことがあるので注意しましょう!!
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
pタグの中にaタグを入れている事に注意しましょう
またこのような構造を入れ子構造と呼びます
初期値にはテキストに色とアンダーラインが引かれていますが。後から消したり色を変えたりもできます。これはCSSというもので操作します。
詳しくはこちらの記事に書いてありますのでよろしければどうぞ。
1-2.画像をリンクにする場合
バナーのように画像をクリックするとサイトを移動するようなものを作るにはimgタグをaタグで囲えばおkです。
<a href="https://www.youtube.com/">
<img src="youtube.png" alt="YouTubeへのリンク">
</a>
![youtubeへのリンク画像](https://kbyt-programming.com/wp-content/uploads/2020/07/7bc0dc5561c88bf1c643cf7c772c4bfc.png)
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
画像をクリックしたら別サイトに行けた!
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こちらも入れ子構造に注意です
1-3.target=”_blank”
リンクを別のタブで開きたい場合はtarget=”_blank” を使うと別タブで開く事ができます。
<a href="https://www.youtube.com/" target=”_blank”>YouTubeへ</a>
しかしリンクをどう開くかは「訪問者に決めさせる」というインターネット倫理の基本原則があるので無暗に多用しない方が良いとされています。
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
クリックする度にタブが開いていくと鬱陶しいってのもあるもんね
またセキュリティの問題から target=”_blank”を使う際にはrel=”noopener”を加えて書くのがベターです。
<a href="https://www.youtube.com/" target=”_blank” rel="noopener">YouTubeへ</a>
その辺りはこちらのブログさんで詳しく書かれているので一度ご覧ください。
![](https://kbyt-programming.com/wp-content/uploads/cocoon-resources/blog-card-cache/cc99e45644718b8125b0582d8166700f.png)
1-4.href=”#”
最後になりますが値に”#”が入ることがあります。
これはaタグを使う事は決まっているが具体的なリンク先が決まっていない時にとりあえず入れておこう的なものになります。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
デザインの時によく使います
<a href="#">リンク</a>
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
クリックするとページトップに遷移します
2.まとめ
- aタグでテキストや画像を囲う事によってリンクを作る事ができる
- aタグ内には”href属性”を書き、値にリンク先のurlを書く。文中に挿入することもできる
- 値に”#”を入れるとページトップへ移動する
<!--基本のリンク-->
<a href="#">リンク</a>
- 画像をリンクにする場合は画像をaタグで挟む
<!--画像をリンクにする-->
<a href="#">
<img src="○○.png" alt="youtubeの画像">
</a>
- aタグを他のタグで挟むことで、文中にリンクを貼ることもできる
<!--文中のリンク-->
<p>リンクは<a href="#">コチラ!!</a></p>
リンクはコチラ!!
- 別タブで開いてもらいたい時は”target属性”を書き、値を”_blank”とする。これには賛否あるので無闇に多様しないように気をつける
- どうしても使いたい場合は”rel属性”を書き、値に”noopener”をつけるのがベター
<!--別タブでリンクを開く場合-->
<a href="#" target=”_blank” rel="noopener">詳細はコチラへ</a>
コメント