やぁカロリーメイトはやっぱりチョコレート、ユトピ@yutopi60paだよ。
皆さんはHTMLでページを作っているときにふと他のページにリンクを貼りたくなることってありますよね？
そんな時に使うのがaタグ！このタグを使えばほかのページへリンクを貼ることができるんだ！それにリンクの貼り方にも種類がたくさんあります！
ということで今回はリンクを貼ることができる<a>タグについて解説していきますぜ！
<a>タグとは？
aタグとは英語のAnchor(アンカー)の略です。日本語だと「目印」といったイメージですね。
インライン要素のタグで、文字や画像にリンクを設定したいときに使用するタグです。
リンクを付ける際はhref属性を使ってURLを指定します。
それでは早速やってみましょう！
<a>タグでリンクを貼ろう！
結構簡単だね。
「href=””」のところにリンクを貼りたいURLを貼り付ければそれでOKです。
aタグで囲む文章はなんでも大丈夫ですよ。
画像にリンクを貼ろう！
aタグは文章だけじゃなくて画像にもリンクを貼ることができます！
こんな感じ↓
<a>タグで画像にリンクを貼る！
imgタグを使うよ！
コード
|
1 |
<a href="http://60pablog.com/"><img src="https://60pablog.com/wp-content/uploads/2016/08/60logo_out.png" /></a> |
結果
画像を貼り付けるHTMLタグの「imgタグ」を使って画像を貼り付けたら、imgタグをaタグで囲んであげればOKです。
ページ内リンクを貼ろう！
aタグで指定できるリンクは完全に別のページだけじゃないよ！
同じページ内にある部分にもリンクを飛ばすことができます！
まずは実際にどういう動きをするか見てみましょう！
ページ内リンクを貼ろう！
ね？飛んだでしょ？
これがページ内リンクです！同じページの指定した部分にリンクをはることができるんです！
それではやり方です。
まずリンクの目的地のタグに「id」で名前を付けます。(classっではないので注意)
idの付け方についてはCSS入門の『id』と『class』の使い方のところで解説していますので、そちらをご覧ください。
今回はこの記事の上にある「やぁ」のところにid名pagetopを付けました。
|
1 |
<span id="pagetop">やぁ</span> |
このようにidでリンクの到着点を指定します。
次にaタグです。
href属性に先ほどidで指定した名前を挿入します。挿入する際にidを指定するルールとして「#」を付けます。
|
1 |
<a href="#pagetop">ページの1番上に飛ぶよ！</a> |
これで先ほどのデモみたいなリンクを貼り付けることができます！
ちなみにページ内リンクは、別ページの特定の部分の指定もすることが可能です！
それも先ほど上の方に合ったの気付きましたか？
idの付け方についてはCSS入門の『id』と『class』の使い方のところで解説していますので、そちらをご覧ください。
出典：上の方
そう。ここで使っています！このリンクをクリックするとCSS入門のページに飛んで、さらに『id』と『class』の使い方について解説した部分に飛びます。
それではリンクの貼り方はこちら
|
1 |
<a href="http://60pablog.com/2016/08/19/css1/#cssid-calss">『id』と『class』の使い方</a> |
このように指定したURLの最後にid名を指定してあげると、先ほどのようなリンクの貼り方ができます！
リンク先を別タブで開く！
aタグで指定したURLをクリックするとそのままページに飛ぶとは思いますが、そのページを別タブで開かせたいときがあると思います。
自分のページも開いておいてもらいながら、リンク先のページに飛んでもらいたいときとかね。
そういう時は「target=”_blank”」を<a>タグに付け加えてみましょう！
実際にどういう動きをするか見てみましょう。
別タブでリンクを開こう！
target=”_blank”を指定
コード
|
1 |
<a href="https://www.google.co.jp/" target="_blank">googleを別タブで開くよ！</a> |
ほらね！別タブ開いてgoogleが開いたでしょ！
こうやってリンク先を開けば、自分のサイトを離れることなくリンク先のページを見てもらえるので、非常に便利です！
同じく先ほどのページ内リンクでもtarget=”_blank”の指定は可能です。
その他の<a>タグ属性
aタグにはhref属性やtarget属性以外にもたくさんの属性があります。
aタグですと使用頻度は少ないので細かい説明は割愛しますが、念のためまとめておきます。
- name=”名前”
文書内にリンク到達点とするための名前をつける- charset=”文字セット”
リンク先の文字コードセット- hreflang=”言語コード”
リンク先の言語コードセット- type=”MIMEタイプ”
リンク先のMIMEタイプ- rel=”リンクタイプ”
この文書から見たリンク先との関係- rev=”リンクタイプ”
リンク先から見たこの文書との関係- tabindex=”Tab移動の順番”
Tabキーを押した際の移動順を割り当てる- accesskey=”ショートカットキー”
ショートカットキーを割り当てる- shape=”領域の形状”
リンク領域の形状- coords=”領域の座標”
リンク領域の各座標
まとめ
aタグはWEBサイトを作る上で非常によく使うタグですので、必ず覚えておきましょう！
まぁほんとによく使うので、嫌でも覚えていくと思いますけどね笑
それでは今日はこの辺でばいばいなら！
質問や意見がありましたらお気軽にツイッターの方へどうぞ。
ユトピのツイッター
@yutopi60pa