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

チャッピー

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

こばゆた

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

きなこ

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

こばゆた

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

こばゆた

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

1.aタグ

1-1.aタグとは

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

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

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

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

こばゆた

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

こばゆた

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

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

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

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

【初心者向け】色に関するプロパティと値 rgbaとは？カラーコードとは？【CSS】

色を変える時に使うcolorプロパティとその値の指定方法3種類を解説しております。

kbyt-programming.com

2021年11月30日

【text-align】テキストを中央などに自由に配置する【CSS】

文章を好きなところに配置するには”text-align”プロパティというものを使うととても簡単に配置できます。とても簡単でよく使うのでぜひマスターしましょう！

kbyt-programming.com

2021年12月02日

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>

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

きなこ

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

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

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

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

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

...

webtan.impress.co.jp

1-4.href=”#”

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

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

こばゆた

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

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

こばゆた

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

2.まとめ

<!--基本のリンク-->
<a href="#">リンク</a> 

<!--画像をリンクにする-->
<a href="#">
　　<img src="○○.png" alt="youtubeの画像">
</a>

<!--文中のリンク-->
<p>リンクは<a href="#">コチラ！！</a></p> 

<!--別タブでリンクを開く場合-->
<a href="#"　target=”_blank” rel="noopener">詳細はコチラへ</a>