誰でも簡単にリンクを貼れる！初心者からのaタグの使い方と応用

 
やぁカロリーメイトはやっぱりチョコレート、ユトピ@yutopi60paだよ。

 
 
皆さんはHTMLでページを作っているときにふと他のページにリンクを貼りたくなることってありますよね？
そんな時に使うのがaタグ！このタグを使えばほかのページへリンクを貼ることができるんだ！それにリンクの貼り方にも種類がたくさんあります！
 

ということで今回はリンクを貼ることができる<a>タグについて解説していきますぜ！

 

<a>タグとは？

 

aタグとは英語のAnchor(アンカー)の略です。日本語だと「目印」といったイメージですね。
インライン要素のタグで、文字や画像にリンクを設定したいときに使用するタグです。
リンクを付ける際はhref属性を使ってURLを指定します。

 

それでは早速やってみましょう！

 
 

 

結構簡単だね。
「href=""」のところにリンクを貼りたいURLを貼り付ければそれでOKです。
aタグで囲む文章はなんでも大丈夫ですよ。

 
 

画像にリンクを貼ろう！

 

aタグは文章だけじゃなくて画像にもリンクを貼ることができます！

こんな感じ↓

 
 

 

画像を貼り付けるHTMLタグの「imgタグ」を使って画像を貼り付けたら、imgタグをaタグで囲んであげればOKです。
 
 

ページ内リンクを貼ろう！

 

aタグで指定できるリンクは完全に別のページだけじゃないよ！
同じページ内にある部分にもリンクを飛ばすことができます！

 

まずは実際にどういう動きをするか見てみましょう！
 
 

 

ね？飛んだでしょ？
これがページ内リンクです！同じページの指定した部分にリンクをはることができるんです！

 

それではやり方です。
まずリンクの目的地のタグに「id」で名前を付けます。(classっではないので注意)
idの付け方についてはCSS入門の『id』と『class』の使い方のところで解説していますので、そちらをご覧ください。

 

今回はこの記事の上にある「やぁ」のところにid名pagetopを付けました。

 

 

このようにidでリンクの到着点を指定します。

 
 

次にaタグです。
href属性に先ほどidで指定した名前を挿入します。挿入する際にidを指定するルールとして「#」を付けます。

 

 

これで先ほどのデモみたいなリンクを貼り付けることができます！
ちなみにページ内リンクは、別ページの特定の部分の指定もすることが可能です！

 

それも先ほど上の方に合ったの気付きましたか？

 
 

idの付け方についてはCSS入門の『id』と『class』の使い方のところで解説していますので、そちらをご覧ください。

出典：上の方

 
 

そう。ここで使っています！このリンクをクリックするとCSS入門のページに飛んで、さらに『id』と『class』の使い方について解説した部分に飛びます。

 

それではリンクの貼り方はこちら

 

 

このように指定したURLの最後にid名を指定してあげると、先ほどのようなリンクの貼り方ができます！

 
 

リンク先を別タブで開く！

 

aタグで指定したURLをクリックするとそのままページに飛ぶとは思いますが、そのページを別タブで開かせたいときがあると思います。
自分のページも開いておいてもらいながら、リンク先のページに飛んでもらいたいときとかね。

 

そういう時は「target="_blank"」を<a>タグに付け加えてみましょう！
実際にどういう動きをするか見てみましょう。

 
 

 

ほらね！別タブ開いてgoogleが開いたでしょ！
こうやってリンク先を開けば、自分のサイトを離れることなくリンク先のページを見てもらえるので、非常に便利です！
同じく先ほどのページ内リンクでもtarget="_blank"の指定は可能です。

 
 

その他の<a>タグ属性

 

aタグにはhref属性やtarget属性以外にもたくさんの属性があります。

aタグですと使用頻度は少ないので細かい説明は割愛しますが、念のためまとめておきます。

 

• name="名前"
  文書内にリンク到達点とするための名前をつける
• charset="文字セット"
  リンク先の文字コードセット
• hreflang="言語コード"
  リンク先の言語コードセット
• type="MIMEタイプ"
  リンク先のMIMEタイプ
• rel="リンクタイプ"
  この文書から見たリンク先との関係
• rev="リンクタイプ"
  リンク先から見たこの文書との関係
• tabindex="Tab移動の順番"
  Tabキーを押した際の移動順を割り当てる
• accesskey="ショートカットキー"
  ショートカットキーを割り当てる
• shape="領域の形状"
  リンク領域の形状
• coords="領域の座標"
  リンク領域の各座標

出典：http://www.htmq.com/html/a.shtml

 
 

まとめ

 

aタグはWEBサイトを作る上で非常によく使うタグですので、必ず覚えておきましょう！
まぁほんとによく使うので、嫌でも覚えていくと思いますけどね笑

それでは今日はこの辺でばいばいなら！

 
 
質問や意見がありましたらお気軽にツイッターの方へどうぞ。

 
ユトピのツイッター
@yutopi60pa

よく使うHTMLタグ, インライン要素, リンク