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

アンカータグ（aタグ）でできる事

アンカータグを使うと「ファインダー越しに世界を散歩」 ←このようにWebサイトでよく見るリンクを作る事ができて、クリックするとそのURLのページに移動する事ができます！

主にこの4つがありますが、よく使うのは文字をリンクに変えたり、ボタンを作ったりする事でしょう！

HOME

aタグとCSSを上手く使えばこんなボタンも作れてしまいます！

アンカータグ（aタグ）の基本的な書き方

例えば、

HikoPro Blog TOPページへ

↑このようなリンクを作りたいとします。

<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タグ）を使ってボタンを作る

ボタンをクリックすると別のページに飛ばす方法は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>タグを使ってリンクを作ると、デフォルトでアンダーラインが引かれるようになります。

今回は、アンダーラインを決してカーソルが乗った時にアンダーラインが出現するカスタマイズをご紹介します。

例： hoverするとアンダーラインが出現

a{
text-decoration:none;
{
a:hover{
text-decoration:underline;
}

このようにtext-decorationをCSSに書いてあげるとできます。

HTML アンカータグ（aタグ）まとめ

初心者向けにHTMLのaタグの使い方と簡単なカスタマイズをご紹介しました！

Webサイトを作る上では必ず必要な技術なので、何度も自分のエディタで練習しましょう！

最後までご覧いただきありがとうございました！