今回はHTMLのaタグの使い方について解説をしていきます！
aタグは文章や画像などの指定した要素をハイパーリンクにすることができます。
この記事では、
・aタグとは
・aタグの基本的な使い方
・aタグでよく使われる属性
について解説をしていきます。
実用的なコードも交えて解説していくのでぜひ、ご覧ください！
aタグとは
aタグは、一般的には指定した部分の要素をハイパーリンクとして扱うことができるタグです。
ハイパーリンクと聞くとあまり聞き馴染みが無いかもしれませんが、クリックするとマウスポインタが変わってページが切り替わるようなリンクをイメージして貰えれば大丈夫です。
このaタグでは文章だけではなく、画像などの要素になるものをリンクにさせることができます。
aタグの基本的な使い方
それでは基本的なaタグの使い方について見ていきましょう。
こちらのコードをご覧ください。
<html>
<p>ここはリンクになっていません。</p>
<a href="指定したリンク先"><p>ここはリンクになっています。</p></a>
</html>
実行結果
pタグだけで囲った部分には特に何も起きていませんが、aタグで囲った部分は青い色に変わって下線が引かれて、リンクになっていることがわかるかと思います。
ここで大事なのがhref属性で、このhref属性で移動先のリンクを指定することでリンクを機能させることができます。
またWebサイトの開発中で、リンクにする部分をaタグで囲ったものの、リンク先がまだ出来ていない場合も考えられます。
そのようなときは、
<html>
<p>ここはリンクになっていません。</p>
<a href="#"><p>ここはリンクになっています。</p></a>
</html>
実行結果
のように、「href="#"」と表記させることで、クリックをしてもどこにも飛ばないように設定することが出来ます。
ただし、この表記は実際には、ページの最上部へのリンクという意味になっているので、この表記を使うことで、ページが見つからないというエラーを回避することが出来ています。
aタグの属性
ここでよく使われるaタグの属性についても見ていきましょう。
ここでは、
・target属性
・無効化（disable）する方法
について解説していきます。
target属性
target属性はリンク先をどのように表示させるか、指定することが出来ます。
こちらのコードをご覧ください。
<html>
<a href="#" target="_blank"><p>ここはリンクになっています。</p></a>
</html>
実行結果
このブラウザで実行して実際にリンクをクリックすると、新しいタブが開くと思います。
これが「target="_blank"」の効果で、リンク先を新しいタブで開くということを指定しています。
ただしブラウザでポップアップブロック機能が有効になっている場合、新しいタブで開くことが出来ない場合もあるので気をつけましょう。
無効化（disable）する方法
aタグを一時的に停止してリンク先に飛べないようにしたい場合、HTMLを使ってきた方ならなんとなく「disabled」という属性をつければ無効化されるのでは？と思うかもしれません。
しかし、aタグにはdisabledという属性はありません。
そこで、CSSを使って特定のclassを無効化する方法について解説してきます。
こちらのコードをご覧ください。
<style>
.link-disabled {
pointer-events: none;
text-decoration: none;
}
</style>
<html>
<a href="#" class="link-disabled" target="_self"><p>ここはリンクになっています。</p></a>
</html>
実行結果
ここでは、無効化させたいリンクに「class="link-disabled"」を追加しています。
さらにCSSでは、そのclassに対して「pointer-events: none;」で実際にリンクを無効化させて、「text-decoration: none;」でリンクに自動的に引かれる下線を無効にしました。
aタグを無効化したい場合はこのようにCSSを使いましょう。
まとめ
この記事ではaタグの基本的な解説からよく使われる属性について解説をしてきました。
aタグの使い方については分かっていただけたでしょうか？
基本的にはhref属性で移動先のリンクを指定しましょう。
また、リンクを無効化させるときはclassをつけてCSSを使いましょう。
aタグについて忘れてしまった場合はまたぜひ、この記事をご覧ください！
