【初心者向け】リンクを作成するaタグの使い方と外部リンクを開く際の注意点

チャッピー

どこかで見た事ある人がいた様な…

こばゆた

普段何気なく使用していますが意外と奥が深いのがリンクです

きなこ

文中にあるリンクであったり、バナーであったりWeb上にはリンクがたくさんあるよね

こばゆた

またただのリンクだけではなく、工夫しだいでボタンなども作ることが出来ます。

ボタン

こばゆた

今回はそんな便利なリンクの基本を説明していこうと思います。

今回の内容

1.aタグ
2.まとめ

1.aタグ

1-1.aタグとは

“anchor(アンカー)”の略でテキストを<a></a>で囲い、”href属性=値”と書く事でリンクを作ることができます。

<a href="アドレスなど">テキスト</a>

用語

href属性

値にリンク先のアドレスを記入することでリンクを貼る事ができる

aタグの使い方

STEP1
リンクにしたいテキストをaタグで囲う
```
<a>YouTubeへ</a>
```
STEP2
aタグの中にhref属性を書き、値にリンク先のurlを書く
```
<a href="https://www.youtube.com/">YouTubeへ</a>
```
たまにurl=” “で書きはじめてしまうミスがあるので気を付けます。
STEP3
完成
YouTubeへ(外部サイトへ飛びます)

文中にも挿入することもできます。

<p>わからないことがあれば<a href="https://www.google.com/">google先生</a>に聞こう！</p>

わからないことがあればgoogle先生に聞こう！

こばゆた

http://やhttps://を書き忘れるとページを移動できないので注意。また” “で囲うこともたまに忘れてしまうことがあるので注意しましょう！！

こばゆた

pタグの中にaタグを入れている事に注意しましょう

またこのような構造を入れ子構造と呼びます

初期値にはテキストに色とアンダーラインが引かれていますが。後から消したり色を変えたりもできます。これはCSSというもので操作します。

詳しくはこちらの記事に書いてありますのでよろしければどうぞ。

1-2.画像をリンクにする場合

バナーのように画像をクリックするとサイトを移動するようなものを作るにはimgタグをaタグで囲えばおkです。

<a href="https://www.youtube.com/">
  <img src="youtube.png" alt="YouTubeへのリンク">
</a>

チャッピー

画像をクリックしたら別サイトに行けた！

こばゆた

こちらも入れ子構造に注意です

1-3.target=”_blank”

リンクを別のタブで開きたい場合はtarget=”_blank” を使うと別タブで開く事ができます。

<a href="https://www.youtube.com/" target=”_blank”>YouTubeへ</a>

YouTubeへ(別ページで開きます)

しかしリンクをどう開くかは「訪問者に決めさせる」というインターネット倫理の基本原則があるので無暗に多用しない方が良いとされています。

きなこ

クリックする度にタブが開いていくと鬱陶しいってのもあるもんね

またセキュリティの問題から target=”_blank”を使う際にはrel=”noopener”を加えて書くのがベターです。

<a href="https://www.youtube.com/" target=”_blank” rel="noopener">YouTubeへ</a>

その辺りはこちらのブログさんで詳しく書かれているので一度ご覧ください。

「別タブで開く」リンク()は脆弱性あり？【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ

外部向けリンクを別タブで開くためにHTMLでtarget = _blank属性を指定するのは実はヤバい? このaタグの使い方には、脆弱性やセキュリティ、パフォーマンスの点で問題があるとグーグルのエンジニアが指摘しています。他にも、SEOコンサルタントを採用するときのポイント、Google検索に有利なCMS、AMPストー...

1-4.href=”#”

最後になりますが値に”#”が入ることがあります。

これはaタグを使う事は決まっているが具体的なリンク先が決まっていない時にとりあえず入れておこう的なものになります。

こばゆた

デザインの時によく使います

<a href="#">リンク</a>

リンク

こばゆた

クリックするとページトップに遷移します

2.まとめ

aタグまとめ

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>