2016/09/04

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

18b20b8f3d6616405d4196c1933e536d_s


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



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

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

<a>タグとは?

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

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


<a>タグでリンクを貼ろう!

googleにリンクを貼るよ!

コード

結果
googleに行っちゃうよ!

yahooにリンクを貼るよ!

コード

結果
yahooに行くよ!

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


画像にリンクを貼ろう!

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

こんな感じ↓


<a>タグで画像にリンクを貼る!

imgタグを使うよ!

コード

結果

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

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

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

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

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

ページの上に行くよ!

コード

結果
ページの1番上に飛ぶよ!

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

それではやり方です。
まずリンクの目的地のタグに「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>タグに付け加えてみましょう!
実際にどういう動きをするか見てみましょう。


別タブでリンクを開こう!

target="_blank"を指定

コード

結果
googleを別タブで開くよ!

ほらね!別タブ開いて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

, ,