やぁカロリーメイトはやっぱりチョコレート、ユトピ@yutopi60paだよ。
皆さんはHTMLでページを作っているときにふと他のページにリンクを貼りたくなることってありますよね?
そんな時に使うのがaタグ!このタグを使えばほかのページへリンクを貼ることができるんだ!それにリンクの貼り方にも種類がたくさんあります!
ということで今回はリンクを貼ることができる<a>タグについて解説していきますぜ!
<a>タグとは?
aタグとは英語のAnchor(アンカー)の略です。日本語だと「目印」といったイメージですね。
インライン要素のタグで、文字や画像にリンクを設定したいときに使用するタグです。
リンクを付ける際はhref属性を使ってURLを指定します。
それでは早速やってみましょう!
<a>タグでリンクを貼ろう!
結構簡単だね。
「href=””」のところにリンクを貼りたいURLを貼り付ければそれでOKです。
aタグで囲む文章はなんでも大丈夫ですよ。
画像にリンクを貼ろう!
aタグは文章だけじゃなくて画像にもリンクを貼ることができます!
こんな感じ↓
<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