

今回はWebサイトやWebサービスを作る上で欠かせない<a>タグ(アンカータグ)の使い方やできる事、簡単なカスタマイズまで初心者でも分かり易ように詳しく解説します!
アンカータグ(aタグ)でできる事

アンカー(anchor=いかり⚓️)だから何かを結びつけるのかな?

その通り!アンカータグはページとページを結びつける役割があります!
アンカータグを使うと「ファインダー越しに世界を散歩」 ←このようにWebサイトでよく見るリンクを作る事ができて、クリックするとそのURLのページに移動する事ができます!
- 文字をリンクに変える事ができる
- 画像にリンクを割当てることも可能
- CSS+aタグでボタンの作成が可能
- 別タブでページを開く事ができる
主にこの4つがありますが、よく使うのは文字をリンクに変えたり、ボタンを作ったりする事でしょう!
HOMEaタグとCSSを上手く使えばこんなボタンも作れてしまいます!

今回の記事ではこんなかっこいいボタンや、先ほど説明した4ができるように解説しますね!
アンカータグ(aタグ)の基本的な書き方
例えば、
↑このようなリンクを作りたいとします。
<a href="https://hikopro.com">Hiko Pro Blog TOP ページへ</a>
このようにHTMLを書いてあげれば簡単に実装できます。

覚えておくべき事はリンクを付けたい文字を<a>で挟み、hrefを書く事です!
次に、
詳細はこちらをクリック
このような文中にリンクがある場合を解説します。
詳細は<a href="https://hikopro.com">こちら</a>をクリック
と”こちら”の部分だけを<a>タグで囲めばいいですね!
別タブでページを表示させる場合
先ほど解説したリンクをクリックすると同じウィンドウタブでリンク先のページが開いたかと思います。
別タブで開く↑こちらをクリックしてみてください!別タブでページが開いたかと思います。
<a href="https://hikopro.com" target="_blank">別タブで開く</a>
このように aタグの中に target=”_blank” と書くだけで簡単に実装できます!

リンクを付けたい文字を<a>で囲むだけなんだね!とっても簡単!
アンカータグ(aタグ)を使ってボタンを作る
ボタンをクリックすると別のページに飛ばす方法は2つあり、
- 画像にアンカータグを適用する
- aタグにCSSを適用する
この2つがあります!
画像にアンカータグを付けてボタンを作る
←この画像をクリックしてみて下さい!
この赤のボタンは画像なのですが、アンカータグを適用させることによってボタンのようになります。
<a href="https://hikopro.com"><img src="https://hikopro.com/wp-content/uploads/2019/06/42f91f8968837b6e9a402aa81c0c8be8.png" class="wp-image-389"/></a>
HTMLコードはこのようにimgタグを<a>タグで囲むだけです!
画像素材さえあれば簡単にボタンが作れてしまいます!
aタグにCSSを適用しボタンを作る
HOME次に↑このボタンは画像ではなく<a>タグにCSSを適用させて作成しています。
<a href="https://hikopro.com" class="button">HOME</a>
先ほど解説したようにHTMLを書き、classを付けて
.button{
border-radius:7px;
background:#3490dc;
padding:10px 16px;
color:white;
text-decoration:none;
font-size:15px;
}
.button:hover{
color:white;
background:#227dc7;
CSSでこのようにコーディングすると作れてしまいます。
「CSSボタン カスタマイズ」のようにググれば沢山のテンプレートコードが出てくるので、そのままコピペすれば簡単におしゃれなボタンが作れます!
リンクがホバー(hover)した時の装飾
僕のブログではリンクにカーソルが乗った時(ホバーした時)に文字の色が青→赤に変わるようにCSSを当てています。
このようにリンクにカーソルが乗った時に色が変わったり、アンダーラインが消えたりするにはCSSでhoverと言うものを使います!
<a href="httpp://google.com">リンク</a>
a{
color:blue;
}
a:hover{
color:red;
}
このようにa:hoverと書けばリンクにカーソルが乗った時のスタイルを適用する事ができます!
文字を大きくしたり、色を変えたり、様々なカスタマイズができるのでぜひ試してみて下さい!
リンクのアンダーラインをカスタマイズする
お使いのエディタで<a>タグを使ってリンクを作ると、デフォルトでアンダーラインが引かれるようになります。
今回は、アンダーラインを決してカーソルが乗った時にアンダーラインが出現するカスタマイズをご紹介します。
a{
text-decoration:none;
{
a:hover{
text-decoration:underline;
}
このようにtext-decorationをCSSに書いてあげるとできます。

aタグの装飾はhoverを使えばいいんだね!
HTML アンカータグ(aタグ)まとめ

<a>タグとhoverこの2つは必ず押さえておきましょう!
初心者向けにHTMLのaタグの使い方と簡単なカスタマイズをご紹介しました!
Webサイトを作る上では必ず必要な技術なので、何度も自分のエディタで練習しましょう!
最後までご覧いただきありがとうございました!
