こんにちは！本気のパソコン塾の三浦です。
今回はHTMLのaタグ(リンクタグ)についてです！
リンクと言ってもさまざまな使い方があり、全て覚えるのは大変です。
今回はまとめ記事のような感じで作ってみましたので、辞書代わりに利用してみてください！
aタグ(リンク)ってなに？
まずはじめに、
Web上の文章の一部をクリックすると、別ページに移動するものをリンクと言います。
このようなやつですね↓(クリックするとトップページに移動するので戻ってきてくださいね！)
このリンクを作るためのHTMLタグを
リンクタグ
又は
aタグと言います。(両方とも意味は同じです！)
以降は aタグという名前に統一して説明していきます。
基本的な使い方を理解しよう
まずは基本のサンプルをみてください。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CLASSとIDの違いが知りたい..</title> <link rel="stylesheet" href="style.css" /> </head> <body> <a href="https://honki-pc.jp">本気のパソコン塾</a>に移動します。 </body> </html>
表示結果(クリックするとトップページに移動するので戻ってきてくださいね！)
本気のパソコン塾に移動します。
9行目にある
<a href=””></a>が基本的なaタグになり、
href=””の中にリンク先のページURLを入れると完成です。
aタグにはキーワードを設定しよう！
<a href=“https://honki-pc.jp”>本気のパソコン塾</a>に移動します。
9行目のように、aタグにはリンクする部分に文字をいれることができます。
どんな文字でも入れられるんですが、これちょっと注意が必要です！
例えば、これどちらも同じサイトの紹介リンクですが、どちらがいいと思いますか？？
よく見るのは1の方じゃないでしょうか？
「こちら」 と書いてあるからクリックしやすいんじゃないかな…..
と考えてはいけません！
この場合は2番の方法でaタグを利用するほうが望ましいです。
というのも、aタグのキーワードはSEO(GoogleやYahooサイトでの表示順位をあげる方法)に影響を与えます。
人間には 「こちら」の方がわかりやすいかもしれませんが、googleなどの検索エンジンは「こちら」の意味がわかりません。
しかもこのように、
サイト内に同じようなリンクがたくさんあった場合…
全部 「こちら」 じゃ意味分かんないよ！
と嫌がられてします。
Webサイトを公開する以上、アクセスがたくさんくるサイトを作りたいですよね。そのためにはSEOを意識しておいて損はありません。
リンクのキーワードは意味のわかるものを利用していきましょう！
リンクを新規タブで開こう
リンクは通常同じページで移動しますが、別のタブで画面を開くこともできます。
別タブで開きたい場合は、target=”_blank”を追加してあげるとOKです！
リンクを別タブで開くサンプル
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CLASSとIDの違いが知りたい..</title> <link rel="stylesheet" href="style.css" /> </head> <body> <a href="https://honki-pc.jp" target="_blank">本気のパソコン塾</a>に移動します。 </body> </html>
表示結果
本気のパソコン塾に移動します。
クリックすると新規タブで、ページが開きましたね。
リンクを新規タブで開いた方がいいかどうかsなのですが、
自分のサイトで移動する場合は同じタブで
外部サイト(他人のサイト)に移動する場合は別タグで開くのが一般的です。
画像にリンクを適応してみる
画像をリンクにしたい場合は、画像タグ(imgタグ)をaタグで囲ってあげましょう。
画像をリンクにするサンプル
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CLASSとIDの違いが知りたい..</title> <link rel="stylesheet" href="style.css" /> </head> <body> <a href="https://honki-pc.jp"><img src="./logo.jpg" alt="本気のパソコン塾サイト" /></a> </body> </html>
この時に、alt属性を忘れずに入れておきましょう！
画像をリンクにする場合、aタグのキーワード部分がなくなるので、その変わりに画像のalt属性をいれてあげましょう。
Googleなどの検索エンジンはその画像がどんな画像なのかalt属性から判断できるようになります。
CSSが理解できる場合は、aタグにこちらを適応しておきましょう！マウスが画像の上に来た時に画像が半透明になります。
サイトを見ている人も「これはリンクだな」とわかるのでおすすめです。
a:hover img { filter: alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; }
ページ内リンクをつくってみる
お次は同じページ内で移動したい場合に利用する、ページ内リンク(内部リンク)の使い方です。
ページ内リンクのサンプル
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CLASSとIDの違いが知りたい..</title> <link rel="stylesheet" href="style.css" /> </head> <body> <a href="#end">移動する！</a> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p>もっと下へ↓</p> <p id="end">ここまで移動します！</p> </body> </html>
手順1: 移動したい部分のタグにidで名前を付けます。(今回はendという名前を付けました)
手順2: aタグでリンク先を#end(#idの名前)にしましょう。
同じページ内の移動が可能になります。
idは各ページに一箇所までとなっているので、注意して利用しましょう！
いっぱいあるとどの部分に移動したらいいかわからなくなります。
リンクに電話番号をいれる！(メールアドレスも)
最近はスマホの利用者が圧倒的に増えてきて、スマホ向けのサイトを作ることも増えてきましょた。
スマホ利用者向けに、タップしたらすぐに電話ができるようにすることができます。
これもaタグで作ることができます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CLASSとIDの違いが知りたい..</title> <link rel="stylesheet" href="style.css" /> </head> <body> <a href="tel:0355555555">電話はこちらへ</a> <a href="mailto:[email protected]">メール問い合わせはこちらへ</a> </body> </html>
hrefの中に”tel:電話番号”を入れると、スマホの場合はタップで電話がかけれるようになります。
また”mailto:メールアドレス”を入れると、メールが送れるようになります。
この電話ができる機能に関しては、HTML5からになっています。それ以前のHTMLバージョンで作られているサイトでは機能しないので、注意ください。
最近では迷惑メール対策として、お問い合わせフォームに誘導する流れが一般的になっています。
メールアドレスを公開する際は、公開していいのかどうか検討しましょう。
いかがでしたでしょうか？
今回はaタグについてまとめてみました。
様々な機能がありました。全てを覚える必要はありません。
こんなこともできたな…. というような感じで記憶に残っていれば
okだと思います。
また必要に応じてこのページに戻ってきて、コピペで利用してくださいね。
