初心者保存版!HTMLでaタグの使い方を徹底解説してみた!

HTMLのaタグで移動しよう

こんにちは!本気のパソコン塾の三浦です。

今回はHTMLのaタグ(リンクタグ)についてです!

リンクと言ってもさまざまな使い方があり、全て覚えるのは大変です。
今回はまとめ記事のような感じで作ってみましたので、辞書代わりに利用してみてください!

aタグ(リンク)ってなに?

まずはじめに、

Web上の文章の一部をクリックすると、別ページに移動するものをリンクと言います。

このようなやつですね↓(クリックするとトップページに移動するので戻ってきてくださいね!)

本気のパソコン塾に移動します。

このリンクを作るためのHTMLタグを 

リンクタグ  

又は

aタグと言います。(両方とも意味は同じです!)

以降は aタグという名前に統一して説明していきます。

基本的な使い方を理解しよう

まずは基本のサンプルをみてください。

表示結果(クリックするとトップページに移動するので戻ってきてくださいね!)

本気のパソコン塾に移動します。

9行目にある
<a href=””></a>が基本的なaタグになり、
href=””の中にリンク先のページURLを入れると完成です。

aタグにはキーワードを設定しよう!

<a href=“https://honki-pc.jp”>本気のパソコン塾</a>に移動します。

9行目のように、aタグにはリンクする部分に文字をいれることができます。

どんな文字でも入れられるんですが、これちょっと注意が必要です!

 

例えば、これどちらも同じサイトの紹介リンクですが、どちらがいいと思いますか??

  1. 本気のパソコン塾はこちら
  2. 本気のパソコン塾では….

よく見るのは1の方じゃないでしょうか?

「こちら」 と書いてあるからクリックしやすいんじゃないかな…..

 

と考えてはいけません!

この場合は2番の方法でaタグを利用するほうが望ましいです。

 

というのも、aタグのキーワードはSEO(GoogleやYahooサイトでの表示順位をあげる方法)に影響を与えます。

人間には 「こちら」の方がわかりやすいかもしれませんが、googleなどの検索エンジンは「こちら」の意味がわかりません。

しかもこのように、

  1. 本気のパソコン塾はこちら
  2. 今月のおすすめはこちら

サイト内に同じようなリンクがたくさんあった場合…

全部 「こちら」 じゃ意味分かんないよ!

と嫌がられてします。

 

Webサイトを公開する以上、アクセスがたくさんくるサイトを作りたいですよね。そのためにはSEOを意識しておいて損はありません。

リンクのキーワードは意味のわかるものを利用していきましょう! 

リンクを新規タブで開こう

リンクを別タブで開こう

リンクは通常同じページで移動しますが、別のタブで画面を開くこともできます。

別タブで開きたい場合は、target=”_blank”を追加してあげるとOKです!

リンクを別タブで開くサンプル

表示結果

本気のパソコン塾に移動します。

クリックすると新規タブで、ページが開きましたね。

 

リンクを新規タブで開いた方がいいかどうかsなのですが、

自分のサイトで移動する場合は同じタブ

外部サイト(他人のサイト)に移動する場合は別タグで開くのが一般的です。

画像にリンクを適応してみる

画像をリンクにしたい場合は、画像タグ(imgタグ)をaタグで囲ってあげましょう。

画像にリンクをつける

画像をリンクにするサンプル

この時に、alt属性を忘れずに入れておきましょう!

画像をリンクにする場合、aタグのキーワード部分がなくなるので、その変わりに画像のalt属性をいれてあげましょう。
Googleなどの検索エンジンはその画像がどんな画像なのかalt属性から判断できるようになります。

 CSSがわかる方は!
CSSが理解できる場合は、aタグにこちらを適応しておきましょう!マウスが画像の上に来た時に画像が半透明になります。
サイトを見ている人も「これはリンクだな」とわかるのでおすすめです。
a:hover img { filter: alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; }

ページ内リンクをつくってみる

お次は同じページ内で移動したい場合に利用する、ページ内リンク(内部リンク)の使い方です。

ページ内リンクのサンプル

手順1: 移動したい部分のタグにidで名前を付けます。(今回はendという名前を付けました)

手順2: aタグでリンク先を#end(#idの名前)にしましょう。

同じページ内の移動が可能になります。

 注意
idは各ページに一箇所までとなっているので、注意して利用しましょう!
いっぱいあるとどの部分に移動したらいいかわからなくなります。

 

リンクに電話番号をいれる!(メールアドレスも)

最近はスマホの利用者が圧倒的に増えてきて、スマホ向けのサイトを作ることも増えてきましょた。

スマホ利用者向けに、タップしたらすぐに電話ができるようにすることができます。

これもaタグで作ることができます。

hrefの中に”tel:電話番号”を入れると、スマホの場合はタップで電話がかけれるようになります。

また”mailto:メールアドレス”を入れると、メールが送れるようになります。

 電話番号はHTML5から
この電話ができる機能に関しては、HTML5からになっています。それ以前のHTMLバージョンで作られているサイトでは機能しないので、注意ください。
メールアドレスは載せないほうがいい?
最近では迷惑メール対策として、お問い合わせフォームに誘導する流れが一般的になっています。
メールアドレスを公開する際は、公開していいのかどうか検討しましょう。

 

いかがでしたでしょうか?

今回はaタグについてまとめてみました。

様々な機能がありました。全てを覚える必要はありません。

こんなこともできたな…. というような感じで記憶に残っていれば

okだと思います。

また必要に応じてこのページに戻ってきて、コピペで利用してくださいね。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です