HTMLタグのaタグは別のページへ遷移させるための専用タグです。
基本的にはaタグは別ページへ遷移させる目的で使用するため、リンク設定したくない場合はpタグやspanタグに置き換えることが一般的です。
しかし、中には後からリンク設定したいから、ある条件を満たした場合のみリンク設定したい等、理由は様々ですがaタグを使用しているけど、ページ遷移させたくないという場合も存在します。
今回の記事はaタグを使用しつつ、ページ遷移を無効化する方法をご紹介します。

aタグのリンクを無効にする方法

aタグのリンクを無効にする方法はいくつかの方法があります。それぞれの方法を順番にご紹介します。

href属性を外す

まず初めにご紹介するのがaタグにリンク先を指定する場合に使用するhref属性。このhref属性を削除することでリンクを無効化することが出来ます。

<a>【テクニック】aタグのリンクを無効にする方法</a>

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ただし、この方法だとhref属性を削除する必要があるため、予めリンク先は設定したままaタグだけ無効化したいという場合には使用することが出来ないので注意が必要です。

JavaScriptでaタグを無効にする

続いてご紹介するのがJavaScriptによるaタグを無効化する方法です。JavaScriptでaタグを無効化する方法は複数存在しています。

javascript:void(0)を指定

JavaScriptでaタグを無効にする方法の一つ目はhref属性に「javascript:void(0)」を指定する方法です。

実際の指定方法は以下の通りです。

<a href="javascript:void(0)">【テクニック】aタグのリンクを無効にする方法</a>

このように記述することでaタグを無効化することが出来ます。合わせてCSSを少し調整して、見た目もリンクでは印象に変えていきます。

a {
    text-decoration: none;
    color: #000;
    cursor: default;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

なお、この方法の場合もhref属性は専用の記述をしないといけないため、予めリンク先を設定しておいて、リンクのみ無効にすることは出来ません。

またこの方法だとaタグにリンクを合わせた際、画面下部に「javascript:void(0)」と表示されてしまい、人によっては「？」と思ってしまう恐れがあります。

preventDefault()を指定

続いて紹介する方法が関数を作成してaタグのリンクを無効化する方法です。
この方法であれば、href属性のリンク設定を残したまま、リンク機能を無効化することが可能です。

<a href="https://irodori-design-web.com/">【テクニック】aタグのリンクを無効にする方法</a>

<script>
document.querySelector("a").addEventListener("click", (event) => {
	event.preventDefault();
});
</script>

こちらの方法でも先ほどと同じようにCSSで見た目を調整します。

a {
    text-decoration: none;
    color: #000;
    cursor: default;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

CSSでaタグを無効にする

続いてご紹介するのがCSSによるaタグの無効化です。この方法も簡単で無効化したいaタグに対してpointer-events: none;を指定することで可能になります。
そのため、この方法であれば、aタグのリンクを復活させたいという場合はCSSの記述だけ削除すればOKです。

<a href="https://irodori-design-web.com/">【テクニック】aタグのリンクを無効にする方法</a>

a {
    pointer-events: none;
    text-decoration: none;
    color: #000;
    cursor: default;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

個人的にはこの方法を一番使います。

まとめ

いかがですか？
aタグはリンク設定をするものという意味合いは変わりませんが、一時的にそのリンク設定を無効化することは可能です。
利用機会は意外と多いかもしれません。
それぞれ適切な方法を選択して、適宜aタグのリンクを無効化しましょう。